Что такое HTML5?
К этому моменту вы, вероятно, поняли, что под HTML5 разные люди подразумевают разные вещи. Для некоторых это просто новые теги вроде <header> и <footer> и масса новых атрибутов, доступных в разметке. Для других это все новое и интересное в Web, в том числе технологии, реализованные всего в одном из браузеров, или какие-то спецификации, официально не включенные в HTML5. Поэтому для начала нужно разобраться в том, чем на самом деле является HTML5.
И, если честно, такому разнообразию толкований можно найти оправдание. HTML5 огромен! Формально определенный организацией международных стандартов World Wide Web Consortium (W3C), HTML5 состоит из более чем 100 спецификаций, относящихся к веб-технологиям нового поколения. Хотя охватить разом столь широкое понятие, как HTML5, и недвусмысленно определить его очень трудно, я считаю, что W3C пыталась ввести HTML5 как обобщающую концепцию перемен, происходящих в Web.
По сути, HTML5 — широкий термин, описывающий набор спецификаций HTML, CSS и JavaScript, разработанных для создания веб-сайтов и приложений нового поколения. Примечательно, что в этом определении есть три части: HTML, CSS и JavaScript. Они определяют, как разработчики должны использовать улучшенную разметку, более богатые стилевые возможности и новые JavaScript API. Проще говоря, HTML5 = HTML + CSS + JavaScript.
Вот и все. HTML5 — это совокупные изменения в HTML, CSS и JavaScript. Эти три термина описывают всю широту и масштаб HTML5. Вы по-прежнему думаете, что это некоторое упрощение? Возможно, но, как вы вскоре увидите, исчерпывающее определение HTML5 не столь значимо по сравнению с технологиями, которые вы выбираете и считаете заслуживающими вашего времени и сил в освоении.
Покончив с определением, потратим несколько минут на позицию Microsoft в отношении HTML5.
HTML vs HTML5
A group known as WHATWG developed HTML5 and was designed to improve upon the previous HTML versions and solve some cross-browser compatibility issues. We’ll use ‘HTML’ to refer to the pre-HTML5 versions of HTML. The key differences between HTML and HTML5:
|
Basis of Comparison |
HTML |
HTML5 |
|
What is it? |
Hypertext Markup Language, the primary language for developing webpages |
A new version of HTML, offering new functionalities to interact with internet technologies for structuring and presenting the content. |
|
Media Support |
It does not offer any support for video and audio for any language. |
Offers support for audio and video as integrated into the language. |
|
Geographical Support |
The process of tracking the user’s location is cumbersome and all the more complicated if the user is logged in on mobile devices. |
The language uses JavaScript Geolocation API that is used to identify the location of any user accessing the website. |
|
Storage |
Uses Browser cache memory as temporary storage. |
Equipped with multiple storage options like web storage, SQL database, and application cache |
|
Communication |
Communication between client and server is done with the assistance of streaming and long pooling as it does nit offer socket support. |
The language allows full-duplex communication between client and server. |
|
Browser Compatibility |
As it is old, so all browsers support it. |
Compatible with only a few browsers as it introduces new tags and elements. |
|
Graphic Support |
Needs third-party tools to provide vector graphic support. |
Vector graphic support is by default as it has canvas and SVG built. |
|
Threading |
JavaScript and browser interface running in the same thread leads to performance issue. |
It offers JavaScript web API support, which allows JavaScript and browser interface to run on different threads. |
|
Error Handling |
Not capable of handling inaccurate syntax or any other errors |
Capable of handling incorrect syntax or any other errors |
In short, HTML5 is just a better version of HTML with added features and functionalities.
Новые блочные теги HTML5.
В дополнении к существующим блочным тегам у HTML5 появились 3 новых тега:
<aside> <dialog> <figure>
Тег <aside> используется для обозначения какой-то части текста, в пределах основного текста, например цитаты или сноски. …
... <section> Основной текст... <aside> Цитата ... </aside> </section> ...
Веб-браузер никак не выделяет текст, заключенный в тэге <aside>, он используется для создания хорошей структуры HTML документа. Это по достоинству смогут оценить разработчики поисковых систем.
Следующий тэг <dialog> используется для создания диалогов между пользователями:
... <dialog> <dt>Пользователь 1 </dt> <dd>Сообщение пользователя 1</dd> <dt>Пользователь 2 </dt> <dd>Сообщение пользователя 2</dd> </dialog> ...
В тег <dialog> мы вложили еще два тэга: <dt> — содержащий имя пользователя и <dd> для отображения сообщения пользователя.
Третий тег <figure> используется для того, чтобы указать название изображения.
... <figure> <legend>Заголовок изображения</legend> <img alt="Некоторое изображение" src="/image.jpg" width="200" height="200"> </figure> ...
Мы использовали тэг <legend>, чтобы указать название изображения, тег <img>, чтобы вставить определенное изображение, и тэг <figure>, чтобы связать их вместе.
HTML против синтаксиса XML
Эта спецификация определяет абстрактный язык для описания документов и приложений, а также некоторые API для взаимодействия с представлениями ресурсов в памяти, которые используют этот язык.
Представление в памяти известно как «DOM HTML» или «DOM» для краткости.
Существуют различные конкретные синтаксисы, которые могут использоваться для передачи ресурсов, использующих этот абстрактный язык, два из которых определены в данной спецификации.
Первый такой конкретный синтаксис — это синтаксис HTML. Этот формат рекомендуется для большинства авторов. Он совместим с большинством устаревших веб-браузеров. Если документ передается с MIME-типом text/html, (https://www.w3.org/TR/html53/iana.html#text-html) веб-браузеры будут обрабатывать его как HTML-документ. Эта спецификация определяет последнюю версию синтаксиса HTML, известного просто как «HTML».
Второй конкретный синтаксис — это синтаксис XHTML, который является приложением XML. Когда документ передается с типом XML MIME (https://www.w3.org/TR/html53/infrastructure.html#xml-mime-type), таким как application/xhtml+xml (https://www.w3.org/TR/html53/iana.html#application-xhtmlxml), веб-браузеры обрабатывают его как XML-документ для анализа XML-процессором. Авторам напоминают, что обработка для XML и HTML отличается; в частности, даже незначительные синтаксические ошибки не позволят полностью отобразить документ, помеченный как XML, тогда как в синтаксисе HTML они будут игнорироваться. Эта спецификация определяет последнюю версию синтаксиса XHTML, известную просто как «XHTML».
DOM, синтаксис HTML и синтаксис XHTML не могут представлять один и тот же контент. Например, пространства имен не могут быть представлены с использованием синтаксиса HTML, но они поддерживаются в DOM и в синтаксисе XHTML. Точно так же документы, которые используют функцию <noscript> (https://www.w3.org/TR/html53/semantics-scripting.html#elementdef-noscript), могут быть представлены с использованием синтаксиса HTML, но не могут быть представлены с помощью DOM или в синтаксисе XHTML. Комментарии, содержащие строку «—>», могут быть представлены только в DOM, но не в синтаксисах HTML и XHTML.
Page Structure
To create your pages in , you need to know how to structure a page in . Basically, the structuring of a page follows the order below:
1 — The statement must always be the first to appear on an page and tells the browser which version of the language is being used. In this case, we are working with .
2 — The and tags tell the web browser where the code starts and ends.
3 — The and tags contains information about the web site, for example: style, meta-tags, scripts, etc…
4 — The and tags tell the browser what the page title is. The title can be seen by identifying the tab in your internet browser. The text that is defined between these tags is also the text that is used as title by the search engines when they present the pages in the results of a search.
5 — Between the and tags the page content is placed, which is what is displayed in the browser.
Что нового?[править]
- В отличие от HTML4, у которого 3 валидатора (strict, transitional, frameset), у HTML5 валидатор один: <!DOCTYPE html>.
- HTML5 поддерживает MathML и SVG.
- Новые теги:
- <section>, <article>, <aside>, <header>, <footer>, <nav>, <main>, <hgroup> (уже считается устаревшим в W3C),
- <figure>, <figcaption>, <video>, <audio>, <source>, <track>, <picture>, <canvas>, <svg>, <math>, <embed> (для вставки контента с плагином (только)),
- <datalist>, <keygen>, <output>, <progress>, <meter>, <dialog>,
- <data>, <time>, <mark>, <ruby>, <rt>, <rp>, <bdi>, <wbr>,
- <details>, <summary>, <menu>, <menuitem> (нужно использовать вместо тега <command>).
- Новые значения атрибута type для тега <input>:
- date, datetime, datetime-local, time, month, week,
- color, email, tel, number, range, search, url.
- Новые атрибуты для тегов, например:
- autocomplete, autofocus, placeholder, required, pattern (для регулярных выражений) и другие для тега <input>,
- autocomplete, autofocus, placeholder, required и другие для <textarea>,
- async для тега <script>,
- srcset для тега <img>,
- download для тегов <a> и <area>.
- Новые глобальные атрибуты, то есть которые могут использоваться с любым из тегов, например:
- Некоторые теги отмечены как устаревшие, вместо них рекомендуется использовать CSS
, , , , , .
: - Исчезновение фреймов (<frame>, <frameset>, <noframes> (кроме <iframe>)) из-за проблем с поисковыми системами и некоторых неудобств при навигации по странице.
- Исчезновение некоторых тегов, заменённых в обновлённой спецификации на более актуальные:
- вместо <acronym> нужно использовать тег <abbr>,
- вместо <applet> использовать <object>,
- вместо <dir> использовать <ul>,
- вместо <bgsound> — тег <audio>,
- вместо <listing> и <xmp> — теги <pre> или <code>,
- вместо <strike> — <del> или <s>,
- вместо <isindex> — комбинацию тега <form> и текстового поля.
- Не поддерживаются некоторые атрибуты у тегов, например:
- charset и rev у тегов <link> и <a>,
- coords, shape и name у тега <a>,
- align у всех тегов,
- background, bgcolor, text, topmargin, rightmargin, bottommargin, leftmargin, link, alink, vlink у тега <body>.
- Новые API:
- Рисование 2D-картинок в реальном времени (Canvas),
- Контроль над проигрыванием медиафайлов,
- Хранение данных в браузере,
- Редактирование,
- Drag-and-drop,
- Работа с сетью,
- MIME.
- Новые элементы в DOM.
Аудитория
Эта спецификация предназначена для авторов документов и сценариев, которые используют функции, определенные в этой спецификации, разработчиков инструментов, работающих на страницах, использующих функции, определенные в этой спецификации, и лиц, желающих установить правильность документов или реализаций в отношении требования этой спецификации.
Этот документ, вероятно, не подходит для читателей, которые еще не имеют хотя бы мимолетного знакомства с веб-технологиями, поскольку местами он жертвует ясностью для точности и краткостью для полноты. Более доступные учебные пособия и руководства по разработке могут обеспечить более мягкое введение в тему.
В частности, знакомство с основами DOM необходимо для полного понимания некоторых из более технических частей этой спецификации. Понимание Web IDL, HTTP, XML, Unicode, кодировок символов, JavaScript и CSS также будет полезно в некоторых местах, но не является необходимым.
Пример простого HTML документа:
И так, мы с Вами поняли, что HTML — это краеугольный камень, благодаря которому любой браузер пользователя отобразит страницу.
Но как выглядит HTML? Давайте рассмотрим простой код, из которого состоит практически любая информационная страница:
<!DOCTYPE html> <html> <head> <title>Название для документа (страницы)</title> </head> <body> <h2>Это заголовок</h2> <p>Это параграф (абзац).</p> </body> </html>
Хочу сразу обратить Ваше внимание на то, что браузеры игнорируют символы табуляции и пробелы в документе (если им явно это не указать, но об этом позднее).
Чтобы вам было легче воспринимать HTML код в примерах, теги вложенные в другие теги мы будем отделять табуляцией (как показано в примере) выше. А теперь детально разберем из чего состоит любая HTML страница:
А теперь детально разберем из чего состоит любая HTML страница:
DOCTYPE это декларация, которая определяет тип документа. Декларация не является тегом HTML это только инструкция для веб-браузера о том, какая версия HTML используется в документе. Декларация !DOCTYPE помогает браузеру отобразить веб-страницу правильно, для этого браузер должен знать, как тип, так и версию документа.
Декларация <!DOCTYPE html> сообщает, что в этом документе используется пятая версия языка гипертекстовой разметки — HTML 5.
Обращаю Ваше внимание на то, что декларация должна указываться самой первой в вашем HTML документе, перед тегом . Декларация не чувствительна к регистру, но записывать её принято в верхнем регистре
Хронология версий HTML:
| Версия | HTML | HTML 2.0 | HTML 3.2 | HTML 4.01 | XHTML | HTML 5 |
|---|---|---|---|---|---|---|
| Год | 1991 | 1995 | 1997 | 1999 | 2000 | 2014 |
Текст между тегами <html> и </html> сообщает браузеру, что необходимо прочитать документ как программный код, написанный на языке гипертекстовой разметки.
Является корневым элементом HTML документа и все остальные элементы должны быть его потомками (вложены в него).
Текст между <head> и </head> содержит информацию о документе (сведения о документе, которые не отображаются пользователю). Внутри этого элемента обязательно должен быть вложен HTML тег <title>.
Текст между <title> и </title> обеспечивает название для документа. Название документа должно содержать важные ключевые слова, чтобы поисковые системы могли включить вашу страницу в результаты поиска (по определенным запросам пользователей).
Текст между <body> и </body> описывает видимое содержимое страницы!
Текст между
и
(англ. heading level 2) описывает заголовок второго уровня. Поисковые системы используют ваши заголовки для индексации структуры и содержания веб-страницПоэтому важно использовать заголовки, чтобы показать структуру документа. Как правильно использовать заголовки от первого до шестого уровня на ваших страницах мы рассмотрим далее в учебнике в статье «Базовый HTML».
Текст между <p> и </p> (англ. HTML Paragraph Element) определяет параграф (абзац). Содержание элемента всегда начинается с новой строки.
Ниже показано как отображается вышерассмотренный пример в браузере:
Рис. 1 Пример отображения HTML документа браузером.
Обращаю Ваше внимание, что все примеры, которые рассматриваются в учебнике доступны для просмотра в отдельном окне. Желательно, чтобы вы помимо вопросов и задач, которые будут приводится в конце каждой статьи создавали аналогичные (собственные примеры) и эксперементировали с ними
Это позволит Вам максимально быстро изучить и применять рассмотренный материал.
What are the advantages of HTML5 vs HTML for web developers?
A major focus of HTML5 was to give developers more flexibility, which in turn would lead to more engaging user experiences. HTML5 was conceived with several goals in mind:
1. Consistent error handling
All browsers have parsers for handling syntactically or structurally improper HTML code, or «tag soup.» However, until recently, there was no written standard for this process.
Therefore, new browser vendors had to test malformed HTML documents in other browsers so
that they could create an error handling process through reverse-engineering.
Malformed HTML is an unavoidable fact of life; according to Rebuildingtheweb, about 90 percent of webpages are estimated to contain some improper code, so error handling is vital for properly displaying websites. Consequently, codified error handling can save browser developers a lot of time and money. The benefits of a clearly defined parsing algorithm cannot be understated.
2. Support for more web application features
Another goal of HTML5 was to enable browsers to work as application platforms. As websites became more complex, developers had to find ways to «work around» browser extensions and other server side technologies. HTML5 gives developers more control over the performance of their websites. Many of the Flash and JS-based hacks commonly used in HTML4 are now elements inherent to the language. These changes also allow for a faster and smoother user experience.
3. Enhanced element semantics
The semantic roles of some existing elements have been improved to make the code more insinuative. New elements like section, header, article and nav can replace most div elements, which makes scanning for mistakes a less painful process.
4. Maximized mobile support
Mobile devices are notorious for giving web developers headaches. Their rapid proliferation over the last decade has made the need for better HTML standards more urgent. Users expect to access web applications from anywhere, anytime on any device, so developers have been forced to meet the demands of the market. Fortunately, HTML5 makes mobile support easier by catering to «low-fueled» devices like smartphones and tablets.
5. Easier development
HTML5 includes several new features that make web development easier and more efficient. For example, the introduction of semantic tags makes it easier for search engines to understand the content of web pages, while the canvas element allows developers to create dynamic graphics and animations directly in web pages.
6. Enhanced performance
HTML5 allows developers to create more optimized web pages, resulting in faster load times and improved performance for users. This is achieved through features like asynchronous loading of scripts and stylesheets, which means that these resources do not block the rendering of the page.
Differences between HTML vs XHTML vs HTML5
We have looked at the function and evolution of these three markup languages, so it is now time to explore the specific differences between them in more depth.
HTML vs HTML5
Created by a group called WHATWG, HTML5 was intended as an improvement over the older versions of HTML, meant to solve some of the existing cross-browser compatibility problems. Listed below are some of the main differences between HTML and HTML5:
- HTML5 provides better support for different types of media – for example, audio and video. It is done by providing additional tags for media files. By contrast, HTML doesn’t support these tags and, instead, depends on third-party plugins.
- HTML5 enables Javascript to run in the browser – a feature, previously unavailable in HTML. This new functionality is called the native support of JavaScript, and it allows for a better web page design and enhanced user experience. It was achieved by introducing the JS Web Worker API and this feature is based on utilizing front-end scripts.
- HTML5 introduced brand-new input attributes, including email, URLs, date and time, and search, to name a few.
- HTML5 has better browser compatibility than HTML. It is also device-independent.
- HTML5 adopts superior text processing rules, also known as parsing. This allows for much greater parsing flexibility than HTML.
- HTML5 now makes it a lot easier to find locations without the need for third-party plugins.
- HTML5 provides native support for vector graphics. This reduces the need for third-party software, such as Adobe Flash.
In simple terms, the newly introduced features make HTML5 a better version of HTML, upgraded with new features and functionalities.
HTML vs XHTML
XHTML is, basically, an extension to HTML. You can think of it as an updated, stricter version of HTML4. Therefore, there aren’t too many differences between the two. Below we have listed some of the most notable ones:
- HTML accepts that some elements may not contain the closing tag. XHTML expects that all elements with no exception include a closing tag. (Note: A closing tag is added at the end of an element, such as a paragraph. They usually consist of the name of the element preceded by a backslash. Thus, an opening tag for a paragraph is <p>, and the closing tag is </p>)
- XHTML, unlike HTML, does not allow elements to overlap.
- XHTML requires that all attribute values (e.g., font size) are quoted – even the numeric ones. There is no such requirement in HTML.
- For a document to be valid XHTML, attributes cannot be minimized.
- There are also some minor differences in the way both languages handle empty elements.
The differences mentioned above are some of the most obvious ones. The full list is substantially longer, however, it, by a large margin, consists of features too subtle to encounter on a daily basis. These can be further explored by referring to XHTML documentation. The key thing to remember is that XHTML was developed to fix some shortcomings of HTML by introducing certain features of XML.
HTML5 vs XHTML
As you already know, XHTML and HTML are very similar, meaning that most differences between HTML and HTML5 also apply to HTML5 and XHTML. However, there is some further variation between the two:
- XHTML is case sensitive (same as HTML), whereas HTML5 is not.
- Both XHTML and HTML have a more complex doctype than HTML5. (Note: doctype tells browsers how to interpret the data.)
- HTML5 is compatible with all browsers. XHTML is not.
- HTML5, being a successor of HTML, is much more flexible than XHTML.
- XHTML is better suited for desktop computers, while HTML5 is better suited for mobile devices — smartphones and tablets.
Conclusion
In this HTML vs HTML5 article, we looked at the significant differences between HTML and HTML5. We discussed several advantages of HTML5 over HTML. We also looked at the new elements and features that are included in HTML5.
Are you ready to take the next step toward advancing your career in the exciting and fast-paced web development industry? Simplilearn’s Post Graduate Program in Full Stack Web Development Automation Testing Masters is the perfect course for all skill levels and has been designed to align with a wide range of career goals. The program enables students to earn their postgraduate certification upon completion. From beginners to those with some programming experience, all students are taken on curated learning paths of end-to-end web development with hands-on experience.
If you have any questions, please feel free to ask them in our comments section, and our experts will answer them promptly. You can also comment with your queries in the chat section, and we will have our experts answer them for you.
Шаблоны целевой страницы
Вы можете представить себе, насколько мощна целевая страница вашего бизнеса, созданная с помощью передовых технологий бесплатного HTML5 и CSS. Белая минималистичная целевая страница будет выглядеть потрясающе с чистым меню и видео-баннером в качестве единой точки внимания, приглашающей людей подписаться на ваш блог. Теперь рассмотрите возможность использования некоторых шаблонов CSS, чтобы добавить уникального вкуса вашему адаптивному веб-сайту HTML5. Лучшие бесплатные шаблоны доступны для загрузки на нашем сайте. Приходите и выбирайте свои адаптивные шаблоны сайтов, которые вы можете использовать для создания бесплатного сайта.
С премиальными наборами адаптивных шаблонов вы также можете выбрать более универсальный набор шаблонов целевой страницы. Наборы включают настраиваемые макеты, меню, контактную форму, цветовые темы, блоки содержимого и стили навигации. Вы сможете вдохнуть новую жизнь в свой бизнес-сайт в любое время, когда почувствуете небольшие изменения. Вы можете создавать почти неограниченное количество адаптивных шаблонов веб-сайтов HTML5 премиум-класса и использовать любой тип мультимедиа. Многоцелевые веб-сайты HTML могут без проблем запускать ваши шаблоны final cut pro и premiere pro. Совершенно новая версия веб-сайта вашего агентства будет готова быстро, может быть создана с использованием начальной загрузки, с сохранением творческих ресурсов, политикой конфиденциальности и правами.
New Media Elements
HTML5 offers new elements for media content compared to HTML, such as:
— Defines sound content
<audio src = «simplilearn.mp3» controls autoplay>
Your browser does not support the <audio> element.
</audio>
— Defines a video or movie
<video src = «simplilearn.mp4» width = «300» height = «200» controls>
Your browser does not support the <video> element.
</video>
— Defines multiple media resources for and
<source src = «/html5/audio.mp3» type = «audio/mp3» />
— Defines a container for an external application or interactive content (a plug-in)
<embed type=»video/webm» src=»simplilearn.mp4″ width=»400″ height=»300″>
— Defines text tracks for and
<track src=»subtitles_en.vtt» kind=»subtitles» srclang=»en» label=»English»>
There are many elements that have been modified or removed from HTML5, including:
The HTML5 Doctype
Your HTML5 template needs to start with a document type declaration, or doctype. A doctype is simply a way to tell the browser — or any other parser — what type of document it’s looking at. In the case of HTML files, it means the specific version and flavor of HTML. The doctype should always be the first item at the top of any HTML file. Many years ago, the doctype declaration was an ugly and hard-to-remember mess, often specified as “XHTML Strict” or “HTML Transitional”.
With the advent of HTML5, those indecipherable eyesores are gone and now all you need is this:
Simple, and to the point. The doctype can be written in uppercase, lowercase, or mixed case. You’ll notice that the “5” is conspicuously missing from the declaration. Although the current iteration of web markup is known as “HTML5”, it really is just an evolution of previous HTML standards — and future specifications will simply be a development of what we have today. There’s never going to be an “HTML6”, so it’s common to refer to the current state of web markup as simply “HTML”.
Because browsers are required to support older content on the Web, there’s no reliance on the doctype to tell browsers which features should be supported in a given document. In other words, the doctype alone isn’t going to make your pages compliant with modern HTML features. It’s really up to the browser to determine feature support on a case-by-case basis, regardless of the doctype used. In fact, you can use one of the older doctypes with new HTML5 elements on a page and the page will render the same as it would if you used the new doctype.
Структурные теги.
Давайте посмотрим, каким образом мы сможем создать структуру HTML документа при помощи HTML5. В HTML4 мы обычно используем тэги <table> и <div>, чтобы создать структуру всей страницы, независимо от того с какой частью страницы мы работаем: шапкой, футером, меню или с другими общими разделами. Это не очень хороший способ построения структуры страницы, именно поэтому в HTML5 введены новые тэги для каждой части документа.
Теперь нам доступны следующие структурные теги:
<section> Цель его состоит в том, чтобы определить разделы в пределах определенного текстового содержимого, например, разделять весь текст на небольшие части.
<header> Цель его состоит в том, чтобы определить верхнюю часть HTML документа.
<footer> Этот тег применяется для того, чтобы определить нижнюю часть документа.
<nav> Цель его в том, чтобы определить список ссылок на другие HTML страницы.
<article> Этот тег применяется для того, чтобы определить некоторую часть тестового содержимого документа.
Вот к примеру HTML код с новыми тэгами.
<html> <body> <header> <h1> Заголовок </h1> </header> <section> <article> <h2> Заголовок 1 </h2> <p> Некоторый текст... </p> </article> <article> <h2> Заголовок 2 </h2> <p> Некоторый текст.. </p> </article> <nav> <a href="/someURL"> Ссылка 1 </a> <a href="/someURL"> Ссылка 2 </a> </nav> </section> <footer> <p>Copyright 2010 My Company</p> </footer> </body> </html>
Как вы видите, мы поместили название нашего документа в теги <header>. Затем мы добавили раздел к нашей странице при помощи тэга <section> и вложили в него 2 тега <article>, чтобы отметить две главные части нашего текстового содержимого. После этого мы определили список наших ссылок, используя тэг <nav>. И наконец мы создали нижний колонтитул нашей страницы при помощи тега <footer>.
Так и что же здесь особенного? Мы могли сделать тоже самое, используя старый хороший тэг <div>. Несомненно, но преимущество использования новых тэгов заключается в четкой и понятной структуре HTML документов. Понятной не только для людей, но также и для поисковых систем.
Заключение
Вряд ли новая версия любого языка может быть хуже предшественника и HTML5 не является исключением. С каждым годом разработчики узнают новые способы использования HTML5. Кроме того, ожидается, что в ближайшее время изменение затронет и социальные сети.
Несмотря на то, что волна изменений уже настигла многих разработчиков по всему миру, ожидается, что в ближайшие годы HTML5 еще более расширит свое влияние
Очень важно адаптироваться и узнать что такое HTML5 сейчас, чтобы максимально использовать возможности современных браузеров.
Если вы хотите оптимизировать ваш HTML код, вы можете посетить данное руководство