Читаем без скачивания HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. - Фрэйн .

совет

Хотите сократить код до норм, допустимых в HTML5? Присмотритесь к набору HTML5 Boilerplate (http://html5boilerplate.com/). Это готовый файл HTML5, выдержанный в лучших традициях этого языка, включающий свойственные ему стили, полифиллы и такие дополнительные инструментальные средства, как Modernizr. Просматривая код, можно почерпнуть множество полезных подсказок, кроме того, можно получить заказную сборку шаблона, соответству­ющую именно вашим потребностям. Настоятельно рекомендую!

Разумный подход к разметке на HTML5

Лично мне нравится записывать разметку в стиле языка XHTML. Это означает использование закрывающих тегов, заключение значений атрибутов в кавычки и приверженность к постоянному использованию одного и того же регистра символов. Можно утверждать, что избавление от подобной практики позволит сэкономить несколько байтов данных, но для экономии существует ряд инструментальных средств (при необходимости с их помощью могут быть убраны все ненужные символы и данные). Я же хочу, чтобы моя разметка была как можно разборчивее, и призываю всех поступать точно так же. Я считаю, что нельзя стремиться к крат­кости кода в ущерб его ясности.

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

<link href="CSS/main.css" rel="stylesheet"/>

Я сохранил слеш, закрывающий тег и кавычки, но обошелся без атрибута type. В данном случае нужно выдерживать ту меру, которая для вас наиболее комфортна. HTML5 не станет на вас кричать, размахивать вашей разметкой перед всем классом и ставить вас в угол, как нерадивого ученика, не справившегося с заданием (неужели все это было только в моей школе?). Но вам хочется написать свою разметку на отлично.

Думаете, я шучу? Хочу, чтобы вы именно сейчас узнали, что если станете записывать код без кавычек вокруг значений атрибутов и не закрывать теги, то заслужите мое молчаливое осуждение.

совет

Несмотря на свободный синтаксис HTML5, никогда не помешает проверить допустимость разметки. Правильная разметка обладает большей доступностью. Для этих целей был создан механизм проверки на соответствие стандартам W3C, который можно найти на сайте http://validator.w3.org/.

Ну хватит, наверное, мне уже осуждать новаторов разметки. Посмотрим на те преимущества, которые дает нам HTML5.

Приветствую могучий тег <a>

В HTML5 теперь можно сильно сэкономить, заключив в тег <a> сразу несколько элементов (и давно пора было именно так и сделать). Раньше, чтобы соблюсти правила разметки, необходимо было заключать каждый элемент в собственный тег <a>. Рассмотрим, к примеру, следующий код HTML 4.01:

<h2><a href="index.html">The home page</a></h2>

<p><a href="index.html">This paragraph also links to the home page</

a></p>

<a href="index.html"><img src="home-image.png" alt="home-slice" /></a>

В HTML5 можно избавиться от всех индивидуальных тегов <a> и заключить всю группу в один такой тег:

<a href="index.html">

<h2>The home page</h2>

<p>This paragraph also links to the home page</p>

<img src="home-image.png" alt="home-slice" />

</a>

Но следует помнить об одном вполне понятном ограничении: нельзя заключать один тег <a> в другой такой же тег (просто потому, что это глупо) или в другой интерактивный элемент, например в кнопку button (поскольку это глупо вдвойне!), нельзя также заключать в тег <a> форму (почему — догадайтесь сами).

Новые семантические элементы в HTML5

Если посмотреть, как определяется слово «семантика» в словаре OS X, мы увидим следующее:

«Раздел лингвистики и логики, занимающийся определением смысла».

Для нас семантика — это придание смысла разметке. Почему так важен этот процесс? Буду рад, если именно это вы и собирались спросить.

Большинство сайтов придерживаются довольно стандартных структурных соглашений, при которых типичными областями являются заголовок (header), подвал (footer), боковая панель (sidebar), панель навигации (navigation bar) и т. д. Мы, как разработчики веб-приложений, зачастую называем используемые div-контейнеры так, чтобы конкретнее обозначить эти области (например, class="Header"). Но что касается использования самого кода, любой пользовательский агент (браузер, программа для чтения содержимого экрана, поисковая машина и т. д.), просматривающий этот код, не может с уверенностью определить предназначение каждого из этих div-элементов. Пользователям вспомогательных технологий также было бы трудно отличить один div-контейнер от другого. В HTML5 для решения этой задачи имеются новые семантические элементы.

примечание

Полный перечень HTML5-элементов можно получить абсолютно свободно, если указать в браузере адрес http://www.w3.org/TR/html5/semantics.html#semantics.

Я не стану рассматривать здесь абсолютно все новые элементы, ограничусь только теми из них, которые, на мой взгляд, наиболее полезны или интересны в повсе­дневной работе с использованием адаптивного веб-дизайна. Перейдем к их изучению.

Элемент <main>

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

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

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

«Область основного содержимого документа включает уникальную для этого документа информацию и исключает содержимое, повторяющееся в наборе документов, такое как име­ющиеся на сайте навигационные ссылки, информация об авторском праве, логотипы и баннеры сайта и формы для поиска данных (если только основной функцией документа или приложения не является именно поиск данных)».

Стоит также отметить, что на странице не может быть более одной основной области (в конечном счете у вас же не может быть двух частей основного содержимого) и она не может быть использована в качестве потомка некоторых других семантических элементов HTML5, таких как article, aside, header, footer, nav или header. А вот они могут находиться внутри элемента main.

примечание

Официальные положения, касающиеся элемента main, можно найти на сайте http://www.w3.org/TR/html5/grouping-content.html#the-main-element.

Элемент <section>

Элемент <section> используется для определения универсального раздела документа или приложения. Например, можно создавать разделы, включающие содержимое: один раздел для контактной информации, еще один раздел для канала новостей и т. д. Важно понимать, что этот элемент не предназначен для придания стилевого оформления. Если нужно поместить элемент в контейнер просто для его стилевой настройки, можно, как и прежде, использовать div-элемент.

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

Для себя можно также решить, будет ли элемент section использоваться там, где разделяемое содержимое имеет внутри себя естественный заголовок (например, h1). Если такого заголовка нет, то лучше, наверное, будет воспользоваться div-контейнером.

примечание

Чтобы посмотреть, что об элементе <section> говорится в спецификации W3C HTML5, обратитесь по адресу http://www.w3.org/TR/html5/sections.html#the-section-element.

Элемент <nav>

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

Если вы обычно размечаете свои элементы навигации в виде неупорядоченного списка (<ul>) и набора списочных тегов (li), то вместо этого вам могут больше подойти элемент nav и несколько вложенных тегов <a>.

примечание

Чтобы посмотреть, что об элементе <nav> говорится в спецификации W3C HTML5, перейдите в браузере по адресу http://www.w3.org/TR/html5/sections.html#the-nav-element.

Элемент <article>

Элемент <article> вполне можно перепутать с элементом <section>. Прежде чем понять разницу между ними, мне пришлось несколько раз перечитать спецификацию. Переложение спецификации в моем исполнении звучит следующим образом: элемент <article> используется в качестве контейнера для законченных фрагментов содержимого. При структурировании страницы нужно задаться вопросом: можно ли содержимое, которое вы собираетесь использовать внутри элемента <article>, переместить на другой сайт в виде цельного фрагмента, без потери завершенности? Можно ли также представить содержимое, рассматриваемое для помещения внутрь элемента <article>, как отдельную статью для RSS-канала? Вполне очевидными примерами содержимого, пригодного для помещения в элемент <article>, могли бы стать публикации в блогах или новостные сообщения. Нужно понимать, что вложенные элементы <article> прежде всего имеют отношение к внешним элементам <article>.