Html5 структура


Семантика и структура документа в HTML 5

Структура документа играет очень важную роль для понимания того, как устроена веб-страница. Она определяет то, как контенты организованы и взаимосвязаны между собой в документе, а также их относительную важность. Если воспользоваться схемой документа, то можно увидеть, как более просто стало просматривать информацию. Правильно спроектированная структура придаёт содержимому страницы смысл, делает его более лёгким для чтения, которое осуществляется поисковыми системами и другими пользовательскими агентами. На сайте, в котором правильно спроектирована структура, проще ориентироваться и находить нужную информацию.

HTML 5 - Корректные и не корректые структуры страниц

Создание структуры документа до HTML 5

Перед изучением процесса создания структуры документа в HTML 5, желательно познакомиться с тем, как это осуществлялось в предыдущей версии языка и с какими проблемами веб-разработчику при этом приходилось сталкиваться.

Как образуется структура документа в HTML 4

Создание структуры документа в HTML 4 осуществляется с помощью 6 элементов (h1


, h2, h3, h4, h5, h6). Эти элементы, при их размещении на странице, создают неявные разделы. Данные разделы называются неявными, потому что автор их в документе явно не создаёт. Они образуются автоматически, как только user agent встречает один из этих элементов в документе. Впоследствии из всех созданных user agent-ом разделов образуется структура документа.

Проблемы при реализации структуры документа

Модель структуры документа, использованная в HTML 4, имеет существенные ограничения, которые связаны с тем, что автору доступны для её создания всего 6 элементов h1, h2, h3, h4, h5 и h6. С помощью этих элементов веб-разработчик не может спроектировать структуру документа, которая одновременно обеспечивала бы логическую взаимосвязь между разделами и отвечала критериям SEO.

Более подробно познакомиться с процессом создания структуры документа в HTML 4 и с проблемами при её реализации можно в следующей статье.

Создание структуры документа в HTML 5

Стратегия создания структуры документа в HTML5 значительно изменилась. Теперь она не определяется только одними заголовками, т.к. это всегда для большинства веб-разработчиков выглядело как-то нелепо. Заголовки позволяют определить структуру документа, но они не группируют контент. До HTML 5 авторы группировали контент с помощью элементов div


, а затем использовали атрибуты классов или id атрибуты для того, чтобы присвоить этим разделам более семантически верное значение. К счастью в HTML5 появилась новая группа элементов sectioning, которые позволяют авторам создавать описание (структуру) документа. К этой группе относятся элементы article, aside, nav и section. Их основное назначение сделать код HTML более семантическим, добавить в него смысл с помощью разметки.

Элементы, предназначенные для создания структуры в HTML 5.

Для создания структуры документа в HTML 5 используются заголовочные элементы (h1, h2, h3, h4, h5 и h6) и элементы nav, aside, section и article из группы sectioning. Данные элементы в отличие от заголовков предназначены для создания явных разделов и установления этим разделам некоторого смысла.

HTML5 - Элементы предназначенные для создания структуры документа

Процесс создания структуры документа в HTML5

Для того чтобы было более просто понять основные принципы структурирования документа в HTML 5 будет считать, что элементы body


, nav, aside, section и article создают секции (явные разделы), а элементы h1, h2, h3, h4, h5 и h6 — обычные разделы (неявные разделы).

Процесс разработки структуры документа рассмотрим посредством пошаговых инструкций.

В HTML 5 создание структуры документа начинается с элемента body. Данный элемент создаёт основную секцию (раздел на уровне документа).

  <body>  </body>    --> Вышеприведённый пример будет создавть следующую структуру документа:  [document] Untitled  

После этого обычно переходят к созданию секций внутри body (основной секции). Например, создадим секции nav, section и aside. Эти секции будут являться дочерними по отношению к body.

  <body>   <nav></nav>   <section></section>   <aside></aside>  </body>    --> Вышеприведённый пример будет создавать следующую структуру документа:  [document] Untitled   [nav] Untitled   [section] Untitled   [aside] Untitled  

Каждая из секций (nav


, aside, section, article) в свою очередь тоже может содержать секции. Таким образом, в HTML 5 получается структура документа. Т.е. одни секции вкладываются в другие. Секции, которые расположены непосредственно в body, имеют 2 уровень. А секции, которые расположены непосредственно в секциях 2 уровня будут уже иметь 3 уровень и т.д.

Например, создадим в section 3 секции article.

  <body>   <nav></nav>   <section>   <article></article>   <article></article>   <article></article>   </section>   <aside></aside>  </body>    --> Вышеприведённый пример будет создавать следующую структуру документа:  [document] Untitled   [nav] Untitled   [section] Untitled   [article] Untitled   [article] Untitled   [article] Untitled   [aside] Untitled  

Элементы h1, h2, h3, h4, h5 и h6 в HTML5 применяются для указания названия секции (т.е.


ступают в качестве заголовка секции) и для создания неявных разделов внутри секции. Причём взаимосвязь между неявными разделами осуществляется только в пределах одной секции. Т.е. заголовочные элементы, находящиеся в одной секции, не связаны с заголовочными элементами, находящимися в другой секции. Другими словами неявные разделы одной секции изолированы от неявных разделах другой секции. В качестве заголовка секции выступает заголовочный элемент, находящийся в этой секции и имеющий самый высокий ранг (уровень). Если секция не содержит заголовочный элемент, то она не имеет названия (Untitled).

Например, создадим названия для всех секций кроме nav.

  <body>   <h1>A</h1>   <nav></nav>   <section>   <h1>B</h1>   <article>   <h1>C</h1>   </article>   <article>   <h1>D</h1>   </article>   <article>   <h1>E</h1>   </article>   </section>   <aside>   <h1>F</h1>   </aside>  </body>    --> Вышеприведённый пример будет создавать следующую структуру документа:  [document] A   [nav] Untitled   [section] B   [article] C   [article] D   [article] E   [aside] F  

Например, создадим неявные разделы в секции section и aside:


lt;h3>F-R2</h3> <h4>F-R3</h4> <h3>F-R4</h3> <h3>F-R5</h3> </aside> </body> --> Вышеприведённый пример будет создавать следующую структуру документа: [document] A [nav] Untitled [section] B [article] C [article] D [article] E [h2] B-R1 [h3] B-R2 [h2] B-R3 [aside] F [h2] F-R1 [h3] F-R2 [h4] F-R3 [h3] F-R4 [h3] F-R5

HTML5 - Пример структуры документа

itchief.ru

Структура страницы наглядно

В такой статье просто не обойтись без картинки, а именно изображения этой самой структуры, поэтому я быстро нарисовал в paint простой вариант верстки на html5. Схема кривая, прошу простить, талантом рисовальщика обделен:


структура страницы html5

Как видите, здесь новые теги, которых небыло в html4. И это:

  1. header — первый новый семантический тег, который используется для обозначения шапки как у сайта в целом, так и у каких-то конкретных секций. Своя шапка может быть в статье, в новости, в карточке товара и т.д. Поэтому не удивляйтесь, если видите несколько header-ов на странице.
  2. nav — контейнер для важных навигационных ссылок на сайте. Иными словами, в него помещают главное меню, а также дополнительные меню, если они есть на сайте.
  3. article — тег для основного текста на странице. Это может быть статья, новость, описание товара, заметка в блог, анонс статьи и т.д.
  4. aside — спорный тег. Многие говорят, что его нужно использовать для вывода сайдбара или боковой колонки, другие говорят, что в него помещается информация в статье, которая не имеет прямого отношения к основному содержимому. Мне более логичным видится вывод боковой колонки через этот тег.
  5. footer — подвал сайта, хотя, как и header, может быть подвалом статьи, новости и т.д.

Это те теги, которые вы можете увидеть на рисунке. Помимо этого я не упомянул еще один важный тег. Это section или секция. Как его использовать — вопрос тоже спорный. Вообще, в большой статье, например, мощно сделать несколько секций. Определение секции таково, что в ней должен быть заголовок.

Соответственно, секцией может выступать глава книги, подраздел статьи и что-то в этом духе. В общем, придумать применение секциям можно.

Так ли важна идеальная разметка?

Я вам сразу скажу — нет. Если вы не совсем правильно будете использовать теги, ничего катастрофического не случится. Просто есть оптимальный вариант, о нем я попытался вам сказать в этой статье и его лучше придерживаться.

Но не нужно думать, что если заключить article в section или в nav занести не самые приоритетные ссылки, то вы потеряете много поискового трафика. Я уверен, что минимально все это влияет на оптимизацию и качество сайта, но не более того. Да и к тому же, кто сказал, что статья не может располагаться в секции?

Конечно, не совершайте грубых ошибок. Не стоит заключать в тег header основной текст. Я не говорю о том, что это катастрофа для сео, но лучше так не делать, чтобы не запутывать лишний раз поискового робота.

В общем, теперь вы примерно знаете, как выглядит на html5 структура сайта. Придерживайтесь примерно такого подхода и тогда ваша верстка будет качественной и семантической.

dolinacoda.ru

Структура сайта на html 5


Сначала была верстка табличная, на смену ей пришла верстка блочная, с помощью тегов <div></div>. Подавляющее большинство сайтов содержали в себе похожие блоки <div> с id=»wrapper», id=»header»; id=»content», id=»sidebar», id=»nav», id=»footer» и другие, что послужило катализатором того, что в html 5 появились новые блочные теги, такие как: <header>, <nav>, <aside>, <footer>, <section> и другие.

 

И на радость нам, веб-разработчикам, мы теперь можем использовать данные теги в своей работе. Так как же выглядит структура документа, написанного на html 5?

Html5 структура

Для верхней части сайта теперь можно использовать тег <header></header>, который может содержать логотип, контакты, баннер, второстепенное меню и т. д.

Основная навигация сайта обрамляется в тег <nav></nav>.

Главная часть сайта – это основной контент, помещается в тег <main>, данный тег еще не совсем корректно работает во всех браузерах, поэтому ему желательно указывать атрибут role=»main». Этот тег можно применить всего один раз на странице, и он не может быть дочерним элементом остальных тегов.


Главную часть сайта можно поделить на отдельные секции, с помощью тега <section></section>. Этот тег может содержать в себе любую информацию, текст, картинки, аудио и видео.

Отдельные статьи необходимо оборачивать в тег <article</article>.

Не обошли стороной и сайдбар. Для него был придуман тег <aside></aside>. Сайдбар не является частью главного контента, поэтому помещать его в тег <main></main> не стоит. Но внутри сайдбара, можно успешно использовать теги <section></section> вместо стандартных <div></div>.

Ну и последний тег, которым нас порадовали, это тег <footer></footer>, предназначенный для подвала сайта, и который может содержать в себе копирайты, второстепенную навигацию или любую другую не очень важную информацию.

Очень полезный тег, который может оказать влияние на SEO продвижения сайта, это тег <mark></mark>. Его действие аналогично тегу <strong></strong> и предназначен он больше для поисковых роботов, чем для человека.

Также с выходом html 5 появилась возможность группировать элементы страницы тегами <figure></figure >, а к сгруппированным элементам можно указать подпись тегом <figcaption></figcaption>.

В html 5 появилась возможность обернуть текст (цитату) в тег <blockquote cite=»Откуда взят текст или цитата»></blockquote> и указать источник этого текста, что поисковые роботы оценят.

Для оформления интерактивных элементов (кнопки с какими-либо функциями) появился тег <menu></menu>. Не стоит применять данный тег для создания меню, его назначение немного другое. Он скорее предназначен для создания веб — приложений.

Как же будет выглядеть минимальная структура документа, с использованием новых тегов html 5:

На этом данная статья подходит к концу, искренне надеюсь, что она будет для вас полезной и желаю вам успехов. В конце, хочу отметить, что использование новых тегов html 5, при создание веб — сайтов, сильно улучшит отношение поисковых систем к вашему сайту, поэтому пренебрегать ими не стоит. До встречи в следующих статьях на страницах сайта.

Html5 структура

variatech.ru

Структура

HTML5 вводит целый ряд новых элементов, которые упрощают структуру страниц. Большинство страниц на HTML4 содержат типовые элементы, такие как «шапка», «подвал» и колонки. Ныне, как правило, в коде документа они обозначаются с помощью элементов <div>, описывая каждый атрибутом id или class.

Html5 структура

На рисунке показано типичное расположение двух колонок сверстанных с использованием <div> с атрибутами id и class. Макет содержит шапку, подвал и горизонтальную навигацию ниже заголовка. Основное содержание включает статью и боковую панель справа (сайдбар).

Использовать элементы <div> правильно, потому что в HTML4 не хватает нужной семантики для описания этих частей более конкретно. HTML5 решает эту проблему путем внедрения новых элементов для представления каждого из этих разных разделов.

Html5 структура

Элементы <div> могут быть заменены новыми элементами <header>, <nav>, <section>, <article> и <footer>

Код для этого документа выглядит следующим образом.

<body>  <header>...</header>  <nav>...</nav>  <article>  <section>  ...  </section>  </article>  <aside>...</aside>  <footer>...</footer> </body>

Вот некоторые преимущества от применения этих элементов. Когда они используются в сочетании с элементами заголовков (от <h1> до <h6>), это позволяет разметить вложенные разделы по уровням заголовков, вплоть до шестого. Спецификация включает подробный алгоритм для создания схемы документа, который принимает структуру этих элементов во внимание и учитывает обратную совместимость с предыдущими версиями. Это могут использовать как средства разработки, так и браузеры для создания оглавления, чтобы помочь пользователям с навигацией по документу.

Например, следующий код структурирован вложенными элементами <section> и <h1>.

<section>  <h1>Уровень 1</h1>  <section>  <h1>Уровень 2</h1>  <section>  <h1>Уровень 3</h1>  </section>  </section> </section>

Заметим, что для лучшей совместимости с существующими браузерами, также можно использовать другие элементы заголовка (от <h2> до <h6>) вместо соответствующих элементов <h1>.

Помечая целевые разделы страницы с помощью специальных тегов, вспомогательные технологии могут помочь пользователю легко перемещаться по странице. Например, они могут просто пропустить раздел навигации или быстро переходить от одной статьи к другой. Автору не придется обеспечивать механизм создания ссылок для этого. Также авторы получают преимущество, поскольку замена множества <div> на несколько различных элементов помогает сделать исходный код понятнее и проще.

Элемент <header> определяет заголовок раздела, который может содержать больше, чем просто название раздела. К примеру, имеет смысл для заголовка включить подзаголовок, информацию о версии истории или авторство.

<header>  <h1>Предварительный обзор HTML5</h1>  <p class="byline">Лаклан Хант</p>  </header>  <header>  <h1>Блог</h1>  <h2>Вставьте сюда слоган.</h2> </header>

Элемент <footer> определяет подвал раздела, в котором добавляется. Подвал обычно содержит такую информацию как: кто написал, ссылки на соответствующие документы, авторские права и тому подобное.

<footer>© 2011 Example Inc.</footer>

Элемент <nav> представляет раздел навигационных ссылок, он подходит для навигации по сайту или оглавления.

<nav>  <ul>  <li><a href="/">Домой</a></li>  <li><a href="/products">Продукция</a></li>  <li><a href="/services">Услуги</a></li>  <li><a href="/about">О нас</a></li>  </ul> </nav>

Элемент <aside> предназначен для содержания, которое имеет косвенное отношение к контенту рядом с ним, как правило, используется для обозначения сайдбара.

<aside>  <h1>Архивы</h1>  <ul>  <li><a href="/2007/09/">Сентябрь 2007</a></li>  <li><a href="/2007/08/">Август 2007</a></li>  <li><a href="/2007/07/">Июль 2007</a></li>  </ul> </aside>

Элемент <section> определяет универсальный раздел документа или приложения, например, главу.

<section>  <h1>Глава 1: То время</h1>  <p>Это было лучшее изо всех времен, это было худшее изо всех времен;   это был век мудрости, это был век глупости;   это была эпоха веры, это была эпоха безверия;   это были годы Света, это были годы Мрака;   ...</p> </section>

(Отрывок из «Повесть о двух городах»)

Элемент <article> представляет собой самостоятельный раздел документа, страницы или сайта. Он подходит для содержания вроде новости, статьи блога, сообщения форума или отдельных комментариев.

<article id="comment-2">  <header>  <h4><a href="#comment-2" rel="bookmark">Комментарий #2</a>  <a href="http://example.com/">Джек О'Нил</a></h4>  <p><time datetime="2007-08-29T13:58Z">29 августа 2007 в 13:58</time>  </header>  <p>Вот это великолепная статья!</p> </article>

Видео и аудио

В последние годы видео и аудио в Интернете становится все более жизнеспособным и сайты вроде YouTube, Viddler, Revver, MySpace и десятки других облегчают жизнь тем, кто публикует видео и аудио. Поскольку в настоящее время в HTML не хватает необходимых средств для успешного внедрения и управления мультимедиа, многие сайты полагаются на Flash, чтобы обеспечить эту функциональность. Хотя можно вставлять мультимедиа с помощью различных плагинов (таких как QuickTime, Windows Media и др.), Flash сейчас единственный широко используемый плагин, обеспечивающий кроссбраузерную совместимость с требуемыми для разработчиков API-интерфейсами.

Как свидетельствуют различные медиаплееры на основе Flash, их авторы заинтересованы в поддержке собственных пользовательских интерфейсов, которые обычно позволяет пользователям воспроизводить, делать паузу, останавливать, искать и регулировать громкость. Планируется обеспечить эту функциональность в браузерах, добавив встроенную поддержку для видео и аудио и предоставив API скриптам для управления воспроизведением.

Новые элементы <video> и <audio> делают это очень простым. Большинство API одинаково для этих двух элементов, разница лишь связана с присущими различиями между визуальным и невизуальным медиа.

Opera и WebKit выпустили версии с частичной поддержкой элемента <video>. Вы можете скачать эти браузеры, чтобы опробовать примеры. Opera включает в себя поддержку Ogg Theora, WebKit поддерживает все форматы, которые поддерживает QuickTime, включая дополнительные кодеки.

Самый простой способ вставить видео это использовать элемент <video> и позволить браузеру обеспечить интерфейс по умолчанию. Атрибут controls указывает, желает автор использовать пользовательский интерфейс или выключить его по умолчанию.

<video src="video.ogv" controls poster="poster.jpg"   width="320" height="240">  <a href="video.ogv">Скачать ролик</a> </video>

Необязательный атрибут poster может быть использован для указания изображения, которое будет отображаться вместо видео до начала воспроизведения. Хотя некоторые видеоформаты вроде MPEG-4 поддерживают собственную функцию кадра, альтернативное решение может работать независимо от формата видео.

Так же просто вставить аудио на страницу с помощью элемента <audio>. Большинство атрибутов являются общими между элементами <audio> и <video>, хотя по понятным причинам у <audio> нет атрибутов width, height и poster.

<audio src="music.oga" controls> <a href="music.oga">Скачать песню</a> </audio>

HTML5 предоставляет элемент <source> для указания альтернативных аудио и видеофайлов, которые браузер может выбрать на основе типа носителя или кодека. Атрибут media может быть использован для указания типа носителя, чтоб отобрать определенные устройства, атрибут type — для указания типа файла и кодека. Обратите внимание, что при использовании элементов <source>, атрибут src у родительских <video> и <audio> или альтернативные <source> игнорируются.

<video poster="poster.jpg">  <source src="video.3gp" type="video/3gpp" media="handheld">  <source src="video.ogv" type="video/ogg; codecs=theora, vorbis">  <source src="video.mp4" type="video/mp4"> </video> <audio>  <source src="music.oga" type="audio/ogg">  <source src="music.mp3" type="audio/mpeg"> </audio>

Для авторов, которые хотят больше контроля над пользовательским интерфейсом, чтобы вписать его в дизайн веб-страницы, обширный API предоставляет несколько методов и событий, позволяющим скриптам управлять воспроизведением. Простейшие методы используют play(), pause() и currentTime для перемотки в начало. Следующий пример иллюстрирует их использование.

<video src="video.ogg" id="video"></video> <script>  var video = document.getElementById("video"); </script> <p><button type="button" onclick="video.play();">Воспроизвести</button>  <button type="button" onclick="video.pause();">Пауза</button>  <button type="button" onclick="video.currentTime = 0;"><< Перемотать</button>

Для видео и аудио есть много других атрибутов и API, которые здесь не обсуждались. Дополнительную информацию вы можете получить, ознакомившись с данным проектом спецификации.

Представление документа

В отличие от предыдущих версий HTML и XHTML, которые определены с позиции их синтаксиса, HTML5 в настоящее время определяется в терминах объектной модели документа (DOM) —дерево представления, которое используют браузеры для отображения документа. К примеру, рассмотрим очень простой документ, состоящий из названия, заголовка и абзаца. Дерево DOM может выглядеть примерно так.

Html5 структура

Дерево DOM включает элемент <title> внутри <head>, а также <h1> и <p> в <body>

Преимуществом определения HTML5 в терминах DOM является то, что язык сам по себе может быть определен независимо от синтаксиса. Существует два синтаксиса, которые могут быть использованы для представления HTML-документов: публикация на HTML (известная как HTML5) и публикация на XML (известная как XHTML5).

Синтаксис HTML основан на SGML, ранней версии HTML, но определен как более совместимый с браузерами на практике.

<!DOCTYPE html> <html>  <head>  <title>HTML-документ</title>  </head>  <body>  <h1>Пример</h1>  <p>Это пример HTML-документа   </body> </html>

Заметьте, как и в предыдущих версиях HTML, некоторые теги являются необязательными и подразумеваются автоматически.

Публикация на XML основана на синтаксисе с использованием XML 1.0 и пространстве имен XHTML 1.0.

<html xmlns="http://www.w3.org/1999/xhtml">  <head>  <title>HTML-документ</title>  </head>  <body>  <h1>Пример</h1>  <p>Это пример HTML-документа</p>  </body> </html>

За исключением закрытого тега и наличия атрибута xmlns эти два примера идентичны.

Браузеры используют MIME-тип для различий. Любой документ, отправленный как text/html должен соответствовать требованиям для публикации на HTML, а документ, отправленный с MIME-типом application/xhtml+xml должен соответствовать требованиям для публикации на XML.

Авторы должны сделать осознанный выбор, какой вариант использовать, это зависит от ряда различных факторов. Авторы не должны безоговорочно использовать один или другой вариант, каждый из них оптимизирован для различных ситуаций.

Преимущества использования HTML

  • Обратная совместимость с существующими браузерами.
  • Авторы уже знакомы с синтаксисом.
  • Снисходительный синтаксис не приведет к появлению «Желтого экрана смерти», при возникновении случайной ошибки.
  • Удобный синтаксис сокращений, к примеру, авторы могут опускать некоторые теги и значения атрибутов.

Преимущества использования XHTML

  • Строгий синтаксис XML поощряет авторов писать правильный код, для некоторых авторов он проще в обслуживании.
  • Напрямую интегрируется с другими XML-технологиями вроде SVG и MathML.
  • Позволяет использовать обработчик XML, который некоторые авторы используют в своей деятельности.

htmlbook.ru

Описание HTML5-элементов

  • Содержание:
  • 1. Элемент <header>
  • 2. Элемент <nav>
  • 3. Элемент <article>
  • 4. Элемент <section>
  • 5. Элемент <aside>
  • 6. Элемент <footer>
  • 7. Элемент <address>
  • 8. Элемент <main>
  • 9. Элемент <figure>
  • 10. Элемент <figcaption>
  • 11. Элемент <time>
  • 12. Элемент <mark>
  • 13. Элемент <bdi>
  • 14. Элемент <wbr>
  • 15. Элементы для описания Восточно-Азиатских символов

1. Элемент <header>

Категории контента: потоковое содержимое.
Группирует вводные и навигационные элементы, не является обязательным. Может содержать заголовки, оборачивать содержание раздела страницы, форму поиска или логотип. В HTML-документе может содержаться одновременно несколько элементов <header> и они могут располагаться в любой части страницы.

<header>   <h1>Site description</h1>   <nav>   <ul>   <li><a href="">About</a>   <li><a href="">Forum</a>   <li><a href="">Download</a>   </ul>   </nav>  </header>

Элемент <header> нельзя помещать внутрь элементов <footer>, <address> или другого элемента <header>.

2. Элемент <nav>

Категории контента: потоковое содержимое, секционное содержимое.
Предназначен для создания блока навигации веб-страницы или всего веб-сайта, при этом не обязательно должен находиться внутри <header>. На странице может быть несколько элементов <nav>. Не заменяет теги <ul> или <оl>, он просто их обрамляет. Не все группы ссылок на странице должны быть обёрнуты <nav>, этот элемент предназначен в первую очередь для разделов, которые состоят из главных навигационных блоков.

<nav>   <ul>   <li><a>...</a></li>   <li><a>...</a></li>   <li><a>...</a></li>   </ul>  </nav>

В качестве элементов панели навигации можно использовать не только элементы списков:

<nav>   <p><a href="">...</a></p>   <p><a href="">...</a></p>  </nav>

Также можно добавлять заголовки внутрь элемента:

<nav>   <h2>...</h2>   <ul>   <li><a>...</a></li>   <li><a>...</a></li>   <li><a>...</a></li>   </ul>  </nav>

3. Элемент <article>

Категории контента: потоковое содержимое, секционное содержимое.
Используется для группировки записей — публикаций, статей, записей блога, комментариев. Представляет собой независимый обособленный блок, предназначенный для многократного использования, как правило, начинается с заголовка. Может дублироваться на других страницах сайта и содержать внутри другие элементы <article>, которые по содержанию имеют близкое отношение к содержанию внешней статьи. Если на странице присутствует только одна статья с заголовком и текстовым содержимым, она не нуждается в обёртке элементом <article>. Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.

<article>   <header>   <h2>...</h2>   </header>   <p>...</p>   <footer>   Опубликовано в категории<a href="">Музыка</a>.   <a href="">0 комментариев</a>   </footer>  </article>

4. Элемент <section>

Категории контента: потоковое содержимое, секционное содержимое.
Элемент представляет собой универсальный раздел документа. Группирует тематическое содержимое и обычно содержит заголовок. Не является блоком-оберткой, для этих целей уместнее использовать элемент <div>. В качестве содержимого может выступать оглавление, разделы научных публикаций, программа мероприятия. Домашняя страница сайта также может быть поделена на секции — блок вводной информации, новости и контакты. Элемент рекомендуется использовать только в том случае, если содержимое элемента будет явно указано в схеме документа.

<article>   <h1>...</h1>   <section>   <h2>...</h2>   <p>...</p>   </section>   <section>   <h2>...</h2>   <p>...</p>   </section>   <p>...</p>  </article>

<article> внутри <section>

Можно создавать родительские элементы <section> с вложенными элементами <article>, в которых есть один или несколько элементов <article>. Не все страницы должны быть устроены именно так, но это допустимый способ вложения элементов. Например, основная область контента страницы содержит два блока со статьями разной тематики. Можно сделать на этом акцент, поместив каждую статью одной тематики внутрь элемента <section>

<section>   <h1>Заметки о природе</h1>   <article>   <h2>...</h2>   <p>...</p>   </article>   <article>   <h2>...</h2>   <p>...</p>   </article>  </section>  <section>   <h1>Исторические заметки</h1>   <article>   <h2>...</h2>   <p>...</p>   </article>   <article>   <h2>...</h2>   <p>...</p>   </article>  </section>

5. Элемент <aside>

Категории контента: потоковое содержимое, секционное содержимое.
Группирует содержимое, связанное с окружающим его контентом напрямую, но которое можно счесть отдельным (т.е., удаление этого блока не повлияет на понимание основного содержимого). Чаще всего элемент позиционируется как боковая колонка (как в книгах) и включает в себя группу элементов: <nav>, цифровые данные, цитаты, рекламные блоки, архивные записи. Не подходит для блоков, просто позиционированных в стороне.

<aside>   <h2>...</h2>   <p>...</p>  </aside>
<aside>   <h2>...</h2>   <p>...</p>   <blockquote>   <p>...<cite>...</cite>...</p>   <p>...</p>   </blockquote>  </aside>

6. Элемент <footer>

Категории контента: потоковое содержимое.
Представляет собой нижний колонтитул содержащей его секции или корневого элемента. Обычно содержит информацию об авторе статьи, данные о копирайте и т.д. Если используется как колонтитул всей страницы, содержимое дополняется сведениями об авторских правах, ссылками на условия использования, контактную информацию, ссылками на связанное содержимое и т.п.

В одном веб-документе может быть несколько элементов <footer>. Как каждая страница, так и каждая статья может иметь свой элемент <footer>, более того, <footer> можно поместить в элемент <blockquote>, чтобы указать источник цитирования.

<footer>   <address>...</address>   <small>@2014...</small>  </footer>

7. Элемент <address>

Категории контента: потоковое содержимое.
Используется для определения контактной информации автора/владельца документа или статьи. Для обозначения автора документа тег размещают внутри элемента <body>, для отображения автора статьи — внутри тега <article>. В браузере обычно отображается курсивом.

8. Элемент <main>

Категории контента: потоковое содержимое.
Элемент <main> представляет основное содержимое документа (содержимое элемента <body>). Контент, находящийся внутри элемента, должен быть уникальным и не повторяться во всех документах сайта, таких как навигационные ссылки, информация о копирайте, логотипы, формы поиска (в случае, если форма поиска является основной функцией документа).

Элемент <main> не может быть потомком таких элементов как <article>, <aside>, <footer>, <header> или <nav>.

<body>  <header>   <h1>Пудель</h1>   <nav>   <ul>   <li><a href="index.html">Главная</a></li>   <li><a href="about.html">О породе</a></li>   <li><a href="health.html">Здоровье</a></li>   </ul>   </nav>   </header>   <main>   <section>   <header>   <h2>О породе</h2>   <nav>   <ul>   <li><a href="#basic">Разновидности</a></li>   <li><a href="#app">Внешний вид</a></li>   <li><a href="#temp">Характер</a></li>   </ul>   </nav>   </header>   <section id="basic">   <h3>Разновидности</h3>   <p>...</p>   </section>   <section id="app">   <h3>Внешний вид</h3>   <p>...</p>   </section>   <section id="temp">   <h3>Характер</h3>   <p>...</p>   </section>   <footer>   <a href="#basic">Разновидности</a>   <a href="#app">Внешний вид</a>   <a href="#temp">Характер</a>   </footer>   </section>   </main>   <footer>   <small>Copyright © <time datetime="2016">2016</time> Моя собака.ру</small>   </footer>  </body>

9. Элемент <figure>

Категории контента: потоковое содержимое, корневое секционное содержимое.
Элемент <figure> представляет автономный контент (необязательно с заголовком), являющийся самостоятельным элементом основного потока. Элемент может быть перемещен из основного содержимого документа в боковую колонку или приложение, не затрагивая поток документа. С помощью элемента <figure> можно добавлять краткие характеристики к иллюстрациям, фотографиям, диаграммам, фрагментам кода и т.д..

<figure>   <img src="picture.jpg" alt="Осень">   <figcaption>Осенний лес</figcaption>  </figure>

Элемент <figure> является блочным, по ширине занимает всю ширину блока-контейнера за минусом внешних отступов margin:

margin-left: 40px;  margin-right: 40px;  margin-top: 1em;  margin-bottom: 1em;

10. Элемент <figcaption>

Элемент <figcaption> — потомок элемента <figure>, не принадлежит ни к одной категории контента. Элемент является блочным, по ширине равен ширине элемента <figure>, высота по умолчанию равна 18px.

11. Элемент <time>

Категории контента: потоковое содержимое, текстовое содержимое.
Определяет время (24 часа) или дату по григорианскому календарю с возможным указанием времени и смещения часового пояса. Текст, заключенный в данный тег, не имеет стилевого оформления браузером. Для тега доступен атрибут datetime, в качестве содержимого которого указывается то, что будет видеть пользователь на экране своего компьютера:

<time datetime="2014-09-25"> 25 Сентября 2014</time>

Чтобы дата могла считываться автоматически, она должна быть в формате YYYY-MM-DD. Время, которое также может указываться, задается в формате HH:MM с добавлением разделяющего префикса T (time):

<time datetime="2014-09-25T12:00"> 25 Сентября 2014</time>

12. Элемент <mark>

Категории контента: потоковое содержимое, текстовое содержимое.
Текст, помещенный внутрь тега <mark>, выделяется по умолчанию желтым цветом (цвет фона и цвет шрифта в выделенном блоке можно изменить, задав определенные css-стили). С помощью данного тега можно отмечать важное содержимое, а также ключевые слова.

13. Элемент <bdi>

Категории контента: потоковое содержимое, текстовое содержимое.
Отделяет фрагмент текста, который должен быть изолирован от остального текста для двунаправленного форматирования текста. Используется для текстов, написанных одновременно на языках, читающихся слева направо и справа налево.

14. Элемент <wbr>

Категории контента: потоковое содержимое, текстовое содержимое.
Одиночный тег, показывает браузеру место, где можно добавить разрыв длинной строки в случае необходимости.

15. Элементы для описания Восточно-Азиатских символов

Категории контента: потоковое содержимое, текстовое содержимое.
Элемент <ruby> позволяет помечать один и более элементов категории текстовое содержимое с помощью ruby-аннотации. Ruby-аннотация используется в преимущественно в Восточно-Азиатской типографики как руководство по произношению или для включения других характеристик. Элемент может содержать:
— один и более текстовых узлов или элементов <rb>;
— один и более элементов <rt>, <rtc>, каждый из которых предшествует или следует непосредственно за элементом <rp>.

Элементы <rb>, <rt>, <rtc> и <rp> не относятся ни к одной категории контента.

Элемент <rb> определяет вложенный в него текст как базовый компонент аннотации.
Элемент <rt> выводит аннотацию к тексту сверху или снизу над ним.
Элемент <rtc> отмечает вложенный в него текст как дополнительную аннотацию.
Элемент <rp> выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>.

html5book.ru

Структура документа в HTML 4

Структура документа, т. е. семантическая структура контента, заключенного в теги  <body> и </body>, является основой для представления страницы пользователю. HTML4 использует для описания структуры страницы разделы и подразделы. Раздел определяется элементом (<div>) с включенными в него элементами заголовка (<h1>, <h2>, <h3>, <h4>, <h5> или <h6>), содержащими его название. Структура документа определяется отношениями между этими элементами.

Так, следующая разметка:

обеспечивает следующую структуру:

1. Лесные слоны  1.1 Среда обитания 

Для задания нового раздела не обязательно использовать элементы <div>. Для этого достаточно наличия элемента заголовка. Поэтому, разметка

<h1>Лесные слоны</h1>  <p>В данном разделе мы поговорим о малоизвестных лесных слонах.  ...продолжение данного раздела...  <h2>Среда обитания</h2>  <p>Лесные слоны живут не на деревьях, а под ними.   ...продолжение данного подраздела...  <h2>Рацион</h2> <h1>Монгольская песчанка</h1> 

обеспечивает следующую структуру:

1. Лесные слоны  1.1 Среда обитания    1.2 Рацион 2. Монгольская песчанка 

Какие проблемы решает HTML5

Определение структуры документа и неявный алгоритм создания структуры в HTML 4 не отличаются четкостью, что порождает множество проблем:

  1. Использование <div> для задания семантических разделов, без задания специальных значений для атрибутов class не позволяет автоматизировать алгоритм создания структуры («Является ли данный <div> частью структуры страницы, определяющим раздел или подраздел, или он используется исключительно для управленя стилем?»). Другими словами, спецификация HTML4 не дает точного определения разделу и четких правил его определения. Автоматическое создание структуры имеет большое значение, особенно в случае с реабилитационными технологиями, представляющими информацию пользователю в соответствии со структурой документа. HTML5 позволяет больше не использовать элементы <div> в алгоритме построения структуры благодаря добавлению нового элемента <section>.
  2. Объединить несколько документов в один непросто: включение подчиненного документа в основной документ требует изменения уровня элементов заголовков для сохранения правильной структуры. В HTML5 эта проблема решена благодаря новым элементам задания разделов (<article>, <section>, <nav> и <aside>), которые всегда являются подразделами ближайшего родительского раздела, независимо от того, какие разделы создаются внутренними заголовками.
  3. В HTML4 каждый раздел является частью структуры документа. Однако часто документы отличаются сложной, нелинейной структурой. Документ может включать специальные разделы, информация в которых не является частью основного контента, хотя и связана с ним, например, рекламный блок или поясняющая заметка. HTML5 добавляет элемент <aside>, позволяющий исключить такие разделы из основной структуры.
  4. Опять же, поскольку в HTML4 каждый раздел является частью структуры документа, как быть с разделами, содержащими информацию, касающуюся не конкретного документа, а всего сайта, например, логотипы, оглавления или информация об авторских правах и правовые положения. В HTML5 для этих целей добавлено три новых элемента: <nav> для наборов ссылок, например, оглавления, <footer> и <header> для информации, касающейся всего сайта. Обратите внимание, что <header> и <footer> не создают разделы как <section>, а, скорее, обеспечивают семантическую разметку частей раздела.

В общем, HTML5 обеспечивает большую точность при задании разделов и оглавлений, позволяя строить более предсказуемую структуру документа, что дает браузерам возможность более качественно обслуживать пользователей.

Алгоритм создания структуры HTML5

Задание разделов в HTML5

Весь контент, находящийся внутри <body>, является частью раздела. Разделы в HTML5 могут быть вложенными. Помимо основного раздела, определяемого элементом <body>, границы разделов определяются явным или неявным образом. Явным образом заданные разделы – это контент внутри тегов <body><section><article><aside> и <nav>

Например:

<section>   <h1>Лесные слоны</h1>    <section>     <h1>Введение</h1>     <p>В данном разделе мы поговорим о малоизвестных лесных слонах.</p>   </section>   <section>     <h1>Среда обитания</h1>     <p>Лесные слоны живут не на деревьях, а под ними.</p>   </section>   <aside>     <p>рекламный блок</p>   </aside> </section> <footer>   <p>(c) 2010 The Example company</p> </footer>

Данный фрагмент HTML задает раздел верхнего уровня:

<section>   <h1>Лесные слоны</h1>      <section>          <h1>Введение</h1>          <p>В данном разделе мы поговорим о малоизвестных лесных слонах.</p>   </section>      <section>          <h1>Среда обитания</h1>     <p>Лесные слоны живут не на деревьях, а под ними.</p>   </section>   <aside>    <p>рекламный блок</p>   </aside> </section> <footer>   <p>(c) 2010 The Example company</p> </footer>

Данный раздел имеет три подраздела:

<section>   <h1>Лесные слоны</h1>    <section>         <h1>Введение</h1>         <p>В данном разделе мы поговорим о малоизвестных лесных слонах.</p>   </section>   <section>         <h1>Среда обитания</h1>    <p>Лесные слоны живут не на деревьях, а под ними.</p>   </section>   <aside>    <p>рекламный блок</p>   </aside> </section>  <footer>  <p>(c) 2010 The Example company</p> </footer>

В результате получаем следующую структуру:

1. Лесные слоны    1.1 Введение    1.2 Среда обитания 

Задание заголовков в HTML5

Хотя структура определяется элементами задания структуры, она будет практически бесполезна без заголовка. Основное правило очень простой: первый элемент заголовка (это может быть <h1>, <h2>, <h3>, <h4>, <h5>, <h6>) задает заголовок текущего раздела.

Элемент заголовка имеет определенную степень важности, определяемую цифрой в его названии, таким образом, <h1> имеет максимальную степень важности, а <h6> минимальную. Соотношение степеней важности имеет смысл только внутри раздела; структура документа определяется структурами разделов, а не степенью важности заголовков разделов. Например, данный код:

<section>   <h1>Лесные слоны</h1>       <p>В данном разделе мы поговорим о малоизвестных лесных слонах.      ...продолжение данного раздела...   <section>     <h2>Среда обитания</h2>       <p>Лесные слоны живут не на деревьях, а под ними.         ...продолжение данного подраздела...   </section> </section> <section>   <h3>Монгольская песчанка</h3>   <p>В данном разделе мы расскажем о монгольской песчанке.       ...продолжение данного раздела... </section>

приводит к следующей структуре:

1. Лесные слоны  1.1 Среда обитания 2. Монгольская песчанка

Обратите внимание, что степень важности элемента заголовка (в данном примере <h1> для первого раздела верхнего уровня, <h2> для подраздела <h3> для второго раздела верхнего уровня) роли не играет. (В качестве заголовка явно заданного раздела может использоваться заголовок с любой степенью важности, хотя такая практика и не рекомендуется.)

Неявное задание разделов

Поскольку элементы задания разделов HTML5 Sectioning Elements не являются обязательными для задания структуры, можно задавать разделы и не используя их, чтобы обеспечить совместимость с веб-сайтами, созданными на HTML4. Это называется неявным заданием разделов.

Элементы заголовков (<h1><h6>) задают новый, неявный раздел, когда не являются первым заголовком своего родительского, явно заданного раздела. То, как этот неявно заданный раздел распологается в структуре документа, определяется отношением важности его заголовка в важности предыдущего заголовка в родительском разделе. Если его степень важности ниже, чем у предыдущего заголовка, он открывает неявно заданный подраздел раздела. Следующий код:

<section>   <h1>Лесные слоны</h1>     <p>В данном разделе мы поговорим о малоизвестных лесных слонах.     ...продолжение данного раздела...   <h3 class="implicit subsection">Среда обитания</h3>   <p>Лесные слоны живут не на деревьях, а под ними.     ...продолжение данного подраздела... </section>

приводит к следующей структуре:

1. Лесные слоны  1.1 Среда обитания (неявно задано элементом h3) 

Если степень важности такого заголовка совпадает со степенью важности предыдущего заголовка, он закрывает предыдущий раздел (который мог быть задан неявно!) и открывает новый неявно заданный раздел на том же уровне: 

<section>   <h1>Лесные слоны</h1>     <p>В данном разделе мы поговорим о малоизвестных лесных слонах.     ...продолжение данного раздела...   <h1 class="implicit section">Монгольская песчанка</h1>   <p>Монгольская песчанка – это небольшое симпатичное млекопитающее.     ...продолжение данного раздела... </section>

приводит к следующей структуре:

1. Лесные слоны 2. Монгольская песчанка (неявно задано элементом h1, который одновременно закрывает предыдущий раздел) 

Если степень важности такого заголовка выше, чем у предыдущего заголовка, он закрывает предыдущий раздел и открывает новый неявно заданный раздел на более высоком уровне:

<body>   <h1>Млекопитающие</h1>   <h2>Киты</h2>   <p>В данном разделе мы поговорим о китах.     ...продолжение данного раздела...   <section>     <h3>Лесные слоны</h3>       <p>В данном разделе мы поговорим о малоизвестных лесных слонах.     ...продолжение данного раздела...     <h3>Монгольская песчанка</h3>       <p>Песчанки распространились далеко за пределы Монголии.          ...продолжение данного подраздела...     <h2>Рептилии</h2>       <p>Рептилии – это холоднокровные животные.           ...продолжение данного раздела...   </section> </body>

приводит к следующей структуре:

1. Млекопитающие  1.1 Киты (неявно задается элементом h2)  1.2 Лесные слоны (явным образом задается элементом раздела)  1.3 Монгольская песчанка (неявно задается элементом h3, который одновременно закрывает предыдущий раздел) 2. Рептилии (неявно задается элементом h2, который одновременно закрывает предыдущий раздел) 

Эта не та структура, которую можно было бы ожидать, бегло просмотрев теги заголовков. Чтобы разметка стала понятна человеку, а также чтобы степень важности заголовка соответствовала уровню вложенности раздела, рекомендуется использовать наглядные теги для открытия и закрытия разделов. Однако спецификация HTML5 этого не требует. Поэтому, если браузеры отображают структуру документа не так, как ожидалось, проверьте, нет ли в документе разделов, не явно закрытых элементами заголовков.

Исключение из общего правила соответствия степени важности тега уровню вложенности раздела делается для разделов, которые могут использоваться в нескольких документах. Например, раздел может храниться в системе управления контентом и добавляться в документы при их генерировании. В этом случае рекомендуется начинать с <h1> в качестве главного заголовка многократно используемого раздела. Уровень вложенности многократно используемого раздела будет определяться иерархией разделов документа, в который он добавляется. Теги для явного задания разделов по-прежнему останутся полезными и в этом конкретном случае.

Корни задания разделов

 Корень задания разделов – это элемент HTML, который может иметь собственную структуру, однако входящие в нее разделы и заголовки, не входят в структуру его родительского элемента. Помимо <body>, который является логическим корнем задания разделов документа, такими элементами часто являются элементы, добавляющие внешний контент на страницу: <blockquote>, <details>, <fieldset>, <figure> и <td>.

Например:

<section>   <h1>Лесные слоны</h1>    <section>     <h2>Введение</h2>     <p>В данном разделе мы поговорим о малоизвестных лесных слонах</p>   </section>   <section>     <h2>Среда обитания</h2>     <p>Лесные слоны живут не на деревьях, а под ними. Давайте рассмотрим, что говорят ученые в «<cite>Лесной слон на Борнео</cite>»:</p>     <blockquote>        <h1>Борнео</h1>        <p>Лесной слон живет на Борнео...</p>     </blockquote>   </section> </section> 

Данный пример приводит к следующей структуре:

1. Лесные слоны  1.1 Введение    1.2 Среда обитания

Данная структура не включает внутреннюю структуру элемента <blockquote>, который, будучи внешней цитатой, является корнем задания разделов и изолирует свою внутреннюю структуру.

Разделы, не входящие в структуру

 HTML5 вводит два новых элемента, позволяющих задавать разделы, не входящие в основную структуру веб-документа:

  1. Элемент вспомогательного раздела <aside> задает раздел, который, хотя и связан с основным элементом, не принадлежит к основной структуре, например, поясняющая заметка или реклама. Он имеет собственную структуру, однако не входит в основную структуру страницы.
  2. Элемент навигационного раздела <nav> задает раздел, содержащий навигационные ссылки. Таких элементов в документе может быть несколько, например, один со внутренними ссылками на страницу, например, оглавление, а другой – с ссылками для навигации по сайту. Такие ссылки не являются частью основной структуры документа и как правило пропускаются экранными дикторами.

Шапки и подвалы

HTML5 также добавляет два новых элемента, которые могут использоваться для разметки верхнего и нижнего колонтитулов страниц:

  1. Элемент шапки <header> задает шапку страницы (как правило, логотип и название сайта, а также горизонтальное меню, если имеется) или раздела (которая может включать заголовок раздела, имя автора и т.д.).<article>, <section>, <aside>, и <nav> могут иметь собственный <header>. Несмотря на название, этот элемент не обязательно распологается в начале страницы или раздела.
  2. Элемент подвала (<footer>) задает нижний колонтитул страницы (как правило включающий уведомления об авторских правах и другую правовую информацию, а иногда также содержащий какие-либо ссылки) или раздела (может включать дату публикации, информацию о лицензии и т.п. <article>, <section>, <aside> и <nav> могут иметь собственный <footer>. Несмотря на название, этот элемент не обязательно распологается в конце страницы или раздела.

Эти элементы не создают новые разделы в структуре, а скорее используются для разметки контента внутри разделов страницы.

Адреса в элементах задания разделов

Автор документа часто хочет опубликовать свою контактную информацию, например, имя и адрес. HTML4 позволял сделать это с помощью элемента <address>, расширенного в HTML5.

Документ может включать несколько разделов, принадлежащих разным авторам. Если раздел создается не автором основной страницы, для задания используется элемент <article>. В результате элемент <address> теперь связан с ближайшим родительским <body> или <article>.

Использование элементов HTML5 в браузерах, не поддерживающих Non-HTML5

Элементы разделов и заголовков должны работать в большинстве браузеров, не поддерживающих HTML5. Хотя они и не поддерживаются, они не требуют специального интерфейса DOM, им требуется лишь особый стиль CSS, поскольку к неизвестным элементам по умолчанию применяется стиль display:inline:

section, article, aside, footer, header, nav, hgroup {   display:block; } 

Конечно, веб-разработчик может применить к ним любой другой стиль, однако следует помнить в браузерах, не поддерживающих HTML5, по умолчанию используется не тот стиль, который требуется для таких элементов. Также обратите внимание на отсутствие в перечне элемента <time>, поскольку по умолчанию к нему применяется одинаковый стиль как в браузерах, не поддерживающих HTML5, так и в браузерах, совместимых с HTML5.

Данный способ не универсален, поскольку некоторые браузеры не позволяют применять стили к неподдерживаемым элементам. Например, Internet Explorer (версии 8 и более ранней), для которого требуется специальный скрипт:

<!--[if lt IE 9]>   <script>     document.createElement("header" );     document.createElement("footer" );     document.createElement("section");      document.createElement("aside"  );     document.createElement("nav"    );     document.createElement("article");      document.createElement("hgroup" );      document.createElement("time"   );   </script> <![endif]-->

Этот скрипт запускается в Internet Explorer (8 и более ранней версии), однако требует включенной поддержки скриптов для правильного отображения элементов задания разделов и заголовок HTML5. Если поддержа скриптов выключена, это может стать проблемой, поскольку данные элементы, скорее всего, определяют структуру всей страницы. Поэтому необходимо добавить элемент <noscript>:

<noscript>    <strong>Внимание!</strong>    Поскольку ваш браузер не поддерживает HTML5, некоторые элементы воспроизводятся с помощью JScript.    Однако в вашем браузере скрипты отключены, пожалуйста, включите их, чтобы браузер смог отобразить данную страницу. </noscript>

This leads to the following code to allow the support of the HTML5 sections and headings elements in non-HTML5 browsers, even for Internet Explorer (8 and older), with a proper fallback for the case where this latter browser is configured not to use scripting:

<!--[if lt IE 9]>   <script>     document.createElement("header" );     document.createElement("footer" );     document.createElement("section");      document.createElement("aside"  );     document.createElement("nav"    );     document.createElement("article");      document.createElement("hgroup" );      document.createElement("time"   );   </script>   <noscript>      <strong>Внимание!</strong>      Поскольку ваш браузер не поддерживает HTML5, некоторые элементы воспроизводятся с помощью JScript.      Однако в вашем браузере скрипты отключены, пожалуйста, включите их, чтобы браузер смог отобразить данную страницу.   </noscript> <![endif]-->

Заключение

Новые семантические элементы, добавленные в HTML5, обеспечивают стандартизацию описания структуры веб-документа. Они облегчают жизнь пользователям с ограниченными возможностями, просты в использовании, могут без особых проблем поддерживаться в старых браузерах и поэтому настоятельно рекомендуются к применению.

developer.mozilla.org


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.