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

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

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

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

совет

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

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

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

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

The home page

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

a>

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

The home page

This paragraph also links to the home page

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

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

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

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

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

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

примечание

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

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

Элемент

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

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

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