Теги логической компоновки документа
- <header>: Используется для верхнего колонтитула сайта.
- <footer>: Используется для нижнего колонтитула сайта.
- <nav>: Содержит навигационные функции страницы.
- <article>: Содержит автономный фрагмент контента, который будет иметь смысл, если используется как позиция RSS, например, новостное сообщение.
- <section>: Используется либо для объединения в группу различных статей с различной целью или по различным темам, или для определения различных разделов одной статьи.
- <time>: Используется для разметки времени и даты.
- <aside>: Определяет блок контента, который связан с основным контентом, но не входит в его основной поток.
- <hgroup>: Используется в качестве оболочки скрытия более одного заголовка, если требуется, чтобы учитывался только один заголовок в структуре заголовков страницы.
- <figure> и <figcaption>: Используется для инкапсуляции рисунка как единого элемента, и содержит, соответственно, подпись для рисунка.
Мета-различия
Создатели HTML5 выбрали самую короткую возможную строку doctype: <!DOCTYPE html>.
В действительности doctype присутствует только для того, чтобы задать для браузера стандартный режим (в противоположность необычному режиму).
По правилам XHTML нужно писать кавычки вокруг всех значений атрибутов, и писать все элементы строчными буквами. В HTML5 можно при желании игнорировать эти правила. Фактически не нужно даже беспокоиться о том, чтобы использовать элементы <head>, <body>, или <html>. Дело в том, что такие элементы подразумеваются браузером в любом случае. Если создать пример страницы HTML5 без этих элементов, загрузить ее в браузер и посмотреть исходный код загруженной страницы, то можно заметить, что они будут автоматически вставлены браузером.
Примечание: Это не так, если вы переключаетесь на использование XHTML (HTML работающий с doctype XHTML— application/xhtml+xml )
Спецификация HTML5 строго определяет, как обрабатывать плохосформированную разметку (например, неправильно вложенные элементы, или незакрытые элементы), впервые определяя алгоритм синтаксического разбора. Это означает, что даже если разметка выполнена неправильно, DOM будет согласован с поддерживающими HTML5 браузерами.
Вам необходимо объявить множество символов документа среди первых 512 байтов, чтобы защититься от серьезной угрозы безопасности.
<meta charset="utf-8" />
Если нет действительно серьезной причины не делать это, то рекомендуется использовать множество символов UTF-8.
Верхний колонтитул страницы
Назначение элемента <header> состоит в создании оболочки вокруг раздела контента, который формирует верхний колонтитул страницы, содержащий обычно логотип компании/графику, заголовок основной страницы, и т.д.<header> <hgroup> <!-- позволяет учитывать группу заголовков как один заголовок --> <h1>A history of Pop Will Eat Itself</h1> <!-- заголовок документа верхнего уровня --> <h2>Introducing the legendary Grebo Gurus!</h2> <!-- плюс подзаголовок/ключевая фраза --> </hgroup> </header>
Мне нужно, чтобы только заголовок верхнего уровня учитывался в иерархии заголовков документа, и именно это делает элемент <hgroup> - он позволяет учитывать группу заголовков как один заголовок в структуре документа.
Нижний колонтитул сайта
- уведомления об авторских правах
- контактная информация
- заявления о доступности, информации о лицензировании
- и множества других второстепенных ссылок
<footer> <h3 id="copyright">Copyright and attribution</h3> </footer>
Примечание: Не существует ограничения только на один верхний и нижний колонтитул на страницу — страница может содержать несколько статей, и иметь для каждой статьи верхний и нижний колонтитул.
<nav>
- разметка навигационных ссылок
- формы поиска
- другие конструкции, которые направляют вас на различные страницы текущего сайта, или различные области текущей страницы
- рекламные ссылки, не учитываются
- можно, конечно, включать заголовки и другие структурные элементы внутрь <nav>, но это не обязательно
<nav>
<h2>Contents</h2>
<ul>
<li><a href="#Intro">Introduction</a></li>
<li><a href="#History">History</a>
<!—другие навигационные ссылки ... -->
</ul>
</nav>
Разметка фрагментов контента, которые имеют отношение к основному контенту, но не вписываются явно в основной поток изложения
- пакет кратких интересных фактов и статистики
- списки ссылок на внешний связанный контент
- справочная информация
- цитаты
- боковые панели
<aside>
<table>
<!—- множество кратких фактов в этом месте -->
</table>
</aside>
Элемент <figure> хорошо подходит, чтобы объединить весь контент, из которого вы хотите составить один рисунок
- текст
- изображения
- SVG
- видео
- что-то другое
<figure>
<img src="pwei.png" alt="Old poppies logo" />
<figcaption> <!-- содержит описательный заголовок для этого рисунка -->
The old poppies logo, circa 1987.<br /> <a href="http://www.flickr.com/photos/bobcatrock/317261648/">
Original picture on Flickr</a>, taken by bobcatrock.
</figcaption>
</figure>
Элемент <time> позволяет определить точно выраженное значение даты и времени, которое одновременно понятно человеку и машине
<time datetime="1989-03-13">13th March 1989</time>
<time datetime="1989-03-13">March 13 1989</time>
<time datetime="1989-03-13">My nineteenth birthday</time> <!-- Текст между открывающим и закрывающим тегами может быть любым -->
Дата внутри атрибута datetime представлена в стандарте ISO.
<time datetime="1989-03-13T13:00">One o'clock in the afternoon, on the 13th of March 1989</time> <!-- время в конце стандартного представления ISO -->
<time datetime="1989-03-13T13:00Z-08:00">One o'clock in the afternoon, on the 13th of March 1989</time> <!-- настройка часового пояса, поэтому, например, чтобы представить последний пример в стандартном тихоокеанском времени -->
<article> и <section>
Элемент <article> предназначен для:
- независимых фрагментов контента, которые будут иметь смысл вне контекста текущей страницы, и могут хорошо объединяться
- публикации в блоге
- видео и его текстовая запись
- новостная история, или одна часть серийной истории
- разбиения контента страницы на различные функциональные или тематические области
- разбиения статьи или истории на различные части
<article>
<section id="Intro">
<h2>Introduction</h2>
</section>
<section id="History">
<h2>History</h2>
</section>
<section id="Discography">
<h2>Discography</h2>
</section>
</article>
Но можно также структурировать следующим образом:<section id="rock"> <h2>Rock bands</h2> <!--multiple article elements could go in here --> </section> <section id="jazz"> <h2>Jazz bands</h2> <!--multiple article elements could go in here --> </section> <section id="hip-hop"> <h2>Hip hop bands</h2> <!--multiple article elements could go in here --> </section>
Также полезно порекомендовать не использовать элементы HTML5 <section> в качестве оболочки на страницах HTML5 – это просто совершенно неверно!
Где остается <div>?
Его следует использовать, когда не существует другого более подходящего доступного элемента для объединения области контента, что часто происходит, когда вы используете элемент только для объединения контента в группу с целью стилевого или визуального оформления. Примером в моей истории PWEI является элемент <div id="wrapper">, который использован для создания оболочки вокруг всего контента.#wrapper {
background-color: #ffffff;
width: 800px;
margin: 0 auto;
}
<mark>
Элемент <mark> предназначен для:- выделения терминов, значимых в данный момент
- выделения частей контента, к которым вы просто хотите привлечь внимание, но не хотите изменять семантическое значение
- похоже на то, как при просмотре напечатанной статьи вы выделяете важные для вас строки с помощью цветного маркера
- для выделения строк в wiki, которые требуют редакторской правки
- выделения экземпляров термина поиска, который пользователь только что искал на странице, и задание затем для них подходящего оформления в CSS
Атрибут hidden
- применяется к любому элементу, скрывает его полностью от любых форм представления/медиа
- должен использоваться, если вы намерены показать контент позже (например, используя JavaScript для удаления этого атрибута), но не хотите, чтобы он отображался в данный момент
- не должен использоваться для скрытия такого контента, как скрытые вкладки интерфейса с вкладками, так как это совершенно другой способ представления контента в меньшем пространстве, а не скрытие контента вообще
Разбивка HTML5 и алгоритм заголовков HTML5
HTML5 создает иерархию заголовков на основе относительного вложения различных разделов документа. Новый раздел документа создается, когда вы используете так называемый разделяющий контент – элементы <article>, <section>, <nav>, и <aside>.
Возьмем следующий пример.
<h1>My title</h1> <div> <h2>My subtitle</h2> </div>
Посмотрите первый пример разбивки в действии (http://dev.opera.com/articles/view/new-structural-elements-in-html5/outlining1.html).
HTML 4 будет считать это заголовком первого уровня, за которым следует заголовок второго уровня, но HTML5 будет считать это как два заголовка первого уровня. Почему? Так как <div> не является разделяющим элементом, то новый раздел в иерархии не создается. Чтобы исправить это, необходимо заменить <div> на разделяющий элемент:
<h1>My title</h1> <section> <h2>My subtitle</h2> </section>
Посмотрите на второй пример разбивки в действии (http://dev.opera.com/articles/view/new-structural-elements-in-html5/outlining2.html).
Ни один из браузеров в настоящее время не реализовал алгоритм HTML5 для разбивки, но вы уже можете получить представление о том, как это работает, используя Расширение Opera HTML5 Outliner (https://addons.opera.com/addons/extensions/details/html5-outliner/1.0/?display=en), сетевой HTML5 outliner Джефри Шеддона (http://gsnedders.html5.org/outliner/), или Google HTML5 outliner (http://code.google.com/p/h5o/). Попробуйте пропустить приведенные выше примеры через один из этих инструментов, если вы мне не верите на слово. И в будущем в действительности не нужно будет беспокоиться об иерархии h1, h2, h3, и т.д., так как независимо от реально используемых элементов заголовков, алгоритм будет создавать одну и ту же иерархию на основе вложенности разделов документа. Но пока об этом необходимо волноваться, так как ни один браузер (или считыватель экрана) этого не поддерживает!
Поэтому возникает естественный вопрос – "Зачем вообще об этом беспокоиться"? На самом деле этот новый способ создания план-конспекта документа/иерархии заголовков имеет два основных преимущества по отношению к старому:
- Можно иметь любое количество уровней заголовков — количество не ограничивается шестью.
- Если контент переносится в какую-то другую CMS (Систему управления контентом), что приводит к тому, что уровни заголовков h1, h2, h3, и т.д.становятся неправильными, алгоритм будет по-прежнему создавать правильную иерархию несмотря ни на что.
Как заставить это работать в старых браузерах
Прежде всего, если вы помещаете неизвестный элемент на web-страницу, по умолчанию браузер будет интерпретировать его просто как <span>, т.е. анонимный встроенный элемент. Предполагается, что большинство рассмотренных в этой статье элементов HTML5, ведут себя как блочные элементы, поэтому простейший способ заставить их вести себя правильно в старых браузерах, состоит в задании для них display:block; в коде CSS:
article, section, aside, hgroup, nav, header, footer, figure, figcaption {
display: block;
}
Это решает все проблемы для всех браузеров, за исключением одного. Хотите угадать какого? … Удивительно, не правда ли, что IE оказался сложнее других браузеров, и отказывается оформлять элементы, которые не распознает? Исправление для IE кажется нелогичным, но к счастью достаточно простым. Для каждого используемого элемента HTML5 необходимо вставить строку JavaScript в заголовок документа следующим образом:
<script>
document.createElement('article');
document.createElement('section');
document.createElement('aside');
document.createElement('hgroup');
document.createElement('nav');
document.createElement('header');
document.createElement('footer');
document.createElement('figure');
document.createElement('figcaption');
</script>
Теперь IE будет магическим образом применять стили для этих элементов. Печально, что приходиться использовать JavaScript, чтобы заставить работать CSS, но, по крайней мере, мы продвинулись вперед. Почему это все-таки работает? Никто, с кем я говорил об этом, в действительности не знает. Существует также проблема с этими стилями, которые не выводятся на принтер при печати документов HTML5 из IE.
Примечание: Проблема с печатью в IE может быть решена с помощью библиотеки JavaScript HTML5 Shiv(http://code.google.com/p/html5shiv/), которая справляется также с добавлением строк document.createElement. Необходимо поместить ее в Условные комментарии (http://dev.opera.com/articles/view/supporting-ie-with-conditional-comments/) для IE меньше IE9, чтобы современные браузеры не выполняли JS, который им не нужен.
Ссылки
- Пример страницы HTML5 - история и дискография одной из музыкальных групп 80/90-х
- Pop Will Eat Itself - Wikipedia, the free encyclopedia
