Структура html5 страницы. Не используйте ненужный атрибут type. Не используйте как обёртку для оформления

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

Как изменилась структура

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

Например, шапка обычно обозначалась как div с идентификатором header, блок с основной информацией называли main или content, боковая колонка получила идентификатор sidebar.

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

В связи с этим, в html5 назревало появление новых элементов – семантических блоков, которые были призваны заменить обычные div, придать разметке больше смысла.

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

Новые семантические блоки в разметке

Стоит отметить, что подходящий тег придумали практически для любого элемента на веб-странице. Например, для шапки. По стандарту ее всегда делали так: div id = “header”. Теперь необходимость в этом отпала – появился контейнер header. Да, это парный тег и в него помещается все содержимое шапки.

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

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

Так вот, к чему это я? У статьи (новости, обзора и т.д.) тоже может быть своя шапка, своя заключительная часть и т.д. Соответственно, на странице может быть несколько header-ов, каждый со своим классом.

К слову, подвал сайта, самая нижняя его часть, формируется в html5 тегом footer. Для вас это будет очевидным, если вы сверстали хотя бы несколько типичных макетов – именно такой класс обычно дают этому блоку.

Теперь о меню. Раньше оно тоже не имело своего собственного, уникального контейнера, который мог бы его отличать. Оно тоже формировалось в помощью div. Естественно, для такого важного элемента на странице тоже придумали свой тег – nav (navigation). Он тоже не обязательно должен быть одним на странице – на некоторы веб-ресурсах можно наблюдать несколько разных меню и все же по своему смыслу в него рекомендуется заключать самые важные ссылки на странице.

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

Пример новой разметки

Хорошо, мы с вами уже узнали о некоторых новых элементах, давайте попробуем сделать разметку c их помощью.

Шапка Главное меню Сайдбар Заголовок Второстепенная информация о статье Сама статья Подвал

< header > Шапка< / header > < nav > Главноеменю< / nav > < section id = “sidebar ”> Сайдбар< / section > < section id = “content ”> < h1 > Заголовок< / h1 > < aside > Второстепеннаяинформацияостатье< / aside > < article > Самастатья< / article > < / section > < footer > Подвал< / footer >

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

Такие важные вещи, как дату публикации или количество комментариев, лучше вынести отдельно в блок aside. Он создан для того, чтобы помещать в него информацию, которая не является главной, имеет второстепенное значение, по сравнению с основной.

Конечно, дата публикации это важно, но она никак не связана с самой статьей по смыслу. Именно поэтому рекомендуется обрамлять ее в другой тег. Собственно, эти рекомендации не являются обязательными к выполнению. Например, если вы в тег article включите всю статью с датой, кол-вом просмотров и другой побочной информацией, ничего страшного не случится. Я бы даже сказал, что вообще ничего не случится, просто нужно стремиться делать более правильно.

Наконец, если говорить о времени (дате), то ее желательно заключать в новый тег time. Это позволит браузеру действительно считать это датой, а не просто каким-то случайным элементом на странице.

Конечно, представленный выше вариант разметки является лишь одним из примеров, на каждом реальном сайте по-разному. Например, в любой section можно добавить header и footer – они будут обозначать начало и конец секции, второстепенная информация может находиться ниже самой статьи, а не выше. Тут много разных вариантов, причем вы разбираем только структуру блога, на других типах веб-ресурсов все может быть совсем по-другому. Например, вот другой вариант разметки, и он тоже имеет право на жизнь:

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

С появлением новой версии HTML, стало возможным верстать страницы по-новому. А именно, в HTML5 появились новые семантические теги , которые четко выделяют части страницы и делают ее структуру полностью прозрачной. Что это за теги и почему важно использовать их при верстке?

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

Согласно спецификации HTML5 , каждый новый тег относится к определенной категории (0 или более) контента. Перечислим эти категории содержимого:

• Мета,
• Заголовочное,
• Текстовое,
• Потоковое,
• Секционное,
• Встроенное,
• Интерактивное.

Как видно, категорий совсем немного. Эти условные деления на категории необходимы для более четкого структурирования тегов. Перечислим сами теги: header, nav, article, section, aside, footer, address, main, figure, figcaption, time, mark, bdi, wbr . Кроме этих тегов, еще нужно не забывать про элементы для описания восточно-азиатских символов: ruby, rb, rt, rtc, rp . Ниже рассмотрим кратко новые теги, приводится название и категория содержимого в скобках.

Тег header (потоковое)

Данный тег позволяет группировать навигационные и вводные элементы. Можно размещать по желанию сколько нужно таких тегов или ни одного, в любой части страницы. Нельзя вкладывать в тег footer и address , а также в сам тег header .

Тег nav (потоковое, секционное)

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

Тег article (потоковое, секционное)

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

Тег section (потоковое, секционное)

Тег предназначен для деления страницы на части и разделы, выделения определённых секций на странице. Например, можно сделать на одной странице секцию статей, секцию комментарий, секцию галереи и т.д.

Тег aside (потоковое, секционное)

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

Тег footer (потоковое)

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

Тег address (потоковое)

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

Тег main (потоковое)

Элемент можно использовать для определения основной части страницы, не может быть потомком тегов: article, aside, footer, header, nav .

Тег figure (потоковое, корневое)

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

Тег figcaption (-)

Тег является потомком тега figure и позволяет разместить описание или подпись, а также другую информацию к нужному элементу на странице.

Тег time (потоковое, текстовое)

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

Тег mark (потоковое, текстовое)

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

Тег bdi (потоковое, текстовое) Тег wbr (потоковое, текстовое)

Тег-одиночка, позволяет задать место, где браузеру можно разорвать длинную строку.

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

Лаклан Хант

Оригинал статьи на английском: http://www.alistapart.com/articles/previewofhtml5

Иллюстрации: Кевин Корнелл

Перевод: Влад Мержевич

Сеть постоянно развивается. Новые и инновационные сайты создаются каждый день, расширяя границы HTML в каждом направлении. HTML4 был вокруг нас в течение почти десяти лет, и издатели ищут новые методы, чтобы обеспечить расширенную функциональность, которая сдерживается ограничениями языка и браузеров.

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

Работа над HTML5 началась в 2004 году и в настоящее время осуществляется в рамках совместных усилий между W3C HTML WG и WHATWG . Многие ключевые игроки участвуют в работе W3C, в том числе представители четырех основных поставщиков браузеров: Apple, Mozilla, Opera и Microsoft, а также ряд других организаций и частных лиц со своими интересами и опытом.

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

Структура

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

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

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

Элементы могут быть заменены новыми элементами , , , и

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

... ... ... ... ...

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

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

Уровень 1 Уровень 2 Уровень 3

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

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

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

Предварительный обзор HTML5

Лаклан Хант

Блог Вставьте сюда слоган.

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

© 2011 Example Inc.

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

• Домой
• Продукция
• Услуги
• О нас

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

Архивы

• Сентябрь 2007
• Август 2007
• Июль 2007

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

Глава 1: То время

Это было лучшее изо всех времен, это было худшее изо всех времен; это был век мудрости, это был век глупости; это была эпоха веры, это была эпоха безверия; это были годы Света, это были годы Мрака; ...

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

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

Комментарий #2 Джек О"Нил

29 августа 2007 в 13:58

Вот это великолепная статья!

Видео и аудио

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

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

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

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

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

Дерево DOM включает элемент внутри , а также и

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

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

HTML-документ Пример

Это пример HTML-документа

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

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

HTML-документ Пример

Это пример HTML-документа

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

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

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

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

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

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

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

Как помочь

Работа над HTML5 быстро продвигается, но по-прежнему ожидается, что займет несколько лет. В связи с требованием провести ряд тестов и достигнуть совместимости реализаций, работа по текущим оценкам должна завершиться через 10–15 лет. В ходе этого процесса для успеха имеет большое значение обратная связь с широким кругом людей, включая веб-дизайнеров, разработчиков CMS и браузеров. Активно поощряется каждый вклад в HTML5.

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

• The Differences from HTML 4 описывает изменения, которые произошли со времени предыдущей версии HTML.
• The HTML Design Principles обсуждает принципы, используемые для принятия решений, и поможет понять обоснование многих текущих проектных решений.
• The Web Developer’s Guide to HTML 5 пишется, чтобы помочь веб-дизайнерам и разработчикам понять все, что нужно знать для написания соответствующих документов HTML5, и обеспечить эти принципы на практике.

Есть множество сообществ, через которые вы можете внести свой вклад. Можно присоединиться к W3C HTML и подписаться на список рассылки или вики . Вы также можете подписаться и посодействовать в любом из

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

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

Рисунок - Семантическая структура для HTML5 страницы.

DOCTYPE и meta теги в заголовке страницы

Начнем со стандартного шаблона HTML5 документа, и добавим теги meta в head:

Заголовок страницы

Я добавил тег который отвечает за ключевые слова. И тег который отвечает за описание страницы. Для SEO оптимизации эти теги обязательны. Также обязательно корректное заполнение тега . Title страницы должен быть уникальным для всего сайта, и содержать в названии всю суть страницы для которой он указан.

Пойдем дальше. В HTML5 появились новые теги, которые используются для того чтобы делать семантическую разметку документа. Это теги header, nav, main, article, aside, footer и т.д. По отображению они работают также как и обычные теги, то есть это блочные элементы. Но если не имеет семантической нагрузки, то header, nav, main и другие — уже нужно использовать только осмысленно.

Заголовок страницы

Шапка страницы оформляется в тег header. Заметьте что заголовок страницы пишем тегом h1.

Site title

Если у нас есть еще и слоган рядом с заголовком, то помещаем его в p, div или span.

Site title

site slogan

Замечание по поводу тега H1

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

До появления HTML5 тегов семантика была несколько другой и отличалась. Так в HTML4 на странице мог быть только один заголовок H1! Как правило это был заголовок статьи или заголовок страницы (например если это страница рубрики на которой отображаются несколько статей.) H2 использовался для подзаголовков, или для разделов главной статьи. H3 для под разделов и так далее.

Навигация на странице

Оформление главной навигации по сайту должно заключаться в тег nav. Также следует помнить что хорошей практикой считается оформлять навигацию элементами списка.

• Home
• Portfolio
• Gallery
• Contacts

Контент на странице

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

...основной контент страницы...

Оформление статьи

Тег article — служит для обертки статей. В общем этот тег содержит в себе блок контента, который может быть вынут из контекста страницы, и использован отдельно в другом месте. Это может быть статья (полный тескт статьи или превью), пост на форуме, и т.п.

На примере ниже я показал оформление статьи в контексте, внутри тега main. У статьи задан блок header с заголовком статьи. Дата публикации статьи задана специальным тегом time, который отображается как обычный inline элемент. У тега time есть специальный аттрибут в котором время публикации должно быть задано в машинном формате. Это может быть только дата datetime="2015-09-30" или с указанием часов минут и секунд datetime="2015-09-30T15:25:55" . Параметр pubdate указывает что статья была и опубликована в то же время что и написана. Если это новость, то может быть такое что время новости одно, а время публикации другое, для этого необходимо указать два раза тег time, и поставить pubdate только в том теге где указано время публикации.

... Article title 30 Сентября Article sub-title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde?

Из примера выше видна что внутри статьи были использованы теги header и footer чтобы выделить заголовок и нижний колонтитул статьи.

Сайдбар или колонка с виджетами

Для каждого отдельного элемента сайдбара используем блок aside. Внутри него заголовок оформляем тегом h1. Так колонка с сайдбаром может выглядеть следующим образом:

Widget title ... Последние записи ... Популярные комментарии ...

Тег section

Тег section — используется для представления группы или секции тематически связанного контента.Его использование похоже на article с главным отличием в том что допускается отсутствие смысла содержимого внутри элемента вне контекста самой страницы. Рекомендуется использовать теги ( – ) для обозначения темы секции.

В качестве примера можно привести статью, которую вы сейчас читаете, можно было бы каждый параграф обернуть в тег . Например тегом section можно выделять блоки контента на лендинге. Звучит похоже на определение div элемента, который часто используется как контейнер для контента. Разница в том что div не имеет семантического значения, и он не говорит не о чем про контент находящийся внутри него. Тег section , наоборот используется чтобы четко показать что контент внутри него связан по смыслу. Вы можете заменить некоторые свои div теги на section , но всегда отвечайте себе на вопрос: «Этот контент связан между собой или нет?»

Пример использования тега section в списке с перечислением городов:

An Event Apart Cities

Join us in these cities in 2010.

Seattle

Follow the yellow brick road.

Boston

That"s Beantown to its friends.

Minneapolis

It"s so nice.

Accommodation not provided.

Подвал сайта — Footer

Подвал сайта оформляется тегом

© 2015 сайт Copyright

Заключение

Для проверки структуры страницы можно использовать инструмент HTML5 outliner . Он показывает структуру страницы блокам и заголовкам.

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

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

Важное замечание по использованию HTML5 тегов. В спецификации не указаны жесткие правила по использованию семантических тегов, указаны лишь рекомендации п их использованию. Если вы не понимаете или не знаете где и какой HTML5 тег использовать, лучше используйте div — чтобы не навредить и не нарушить структуру документа.

Статьи и материалы

Простой документ HTML5

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

Крошечный документ HTML5

Этот простой документ можно упростить еще больше. Например, конечный тег вообще-то не является обязательным в стандарте HTML5, т. к. браузеры знают, как закрывать все открытые элементы в конце документа (а стандарт HTML5 узаконивает это поведение). Но подобное срезание углов вместо упрощения делает разметку более сложной для понимания и может вызвать неожиданные ошибки.

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

Крошечный документ HTML5

Дадим встряску браузеру в стиле HTML5!

Наконец, весь документ (за исключением строки doctype) можно облачить в традиционный элемент , как показано в следующем листинге:

Крошечный документ HTML5

Дадим встряску браузеру в стиле HTML5!

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

Использование элементов , и является просто вопросом стиля. Страница без этих элементов будет работать отличнейшим образом даже на старых браузерах, которые и слыхом не слыхивали ни о каком HTML5. Фактически, браузер автоматически предполагает наличие этих элементов. Поэтому, если посмотреть на модель DOM (набор программных объектов, представляющих страницу) страницы с помощью сценария JavaScript, она будет содержать объекты для элементов , и , даже если разработчик и не использовал их.

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

Описание типа документа HTML5

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

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

Даже профессиональные веб-разработчики были вынуждены вставлять описание типа документа XHTML методом копирования и вставки из другого документа. А описание типа документа HTML5 короткое, четкое и легко вводится вручную.

Описание типа документа HTML5 также примечательно тем, что оно не содержит номера официальной версии HTML (5 для HTML5). В нем просто указывается, что страница является HTML-страницей. Это соответствует новой концепции HTML5 как живого языка. Добавленные в HTML новые возможности автоматически доступны для размещения на странице, не требуя для этого изменений в описании типа документа.

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

Ответ на этот вопрос таков: описание типа документа продолжает использоваться по историческим причинам. При обработке страницы с отсутствующим описанием типа документа большинство браузеров (включая Internet Explorer и Firefox) переходят в режим совместимости (quirks mode) . В этом режиме они пытаются отобразить страницу с учетом ошибок в правилах, которые использовались в более ранних версиях. Проблема с этим состоит в том, что режим совместимости одного браузера может отличаться от режима совместимости другого браузера, вследствие чего страницы, разработанные для одного браузера, на другом браузере будут, скорее всего, отображаться с ошибками, такими как неправильный размер шрифта, нарушенная структура оформления и т.п.

А обнаружив на странице описание типа документа, браузер знает, что обработку этой страницы требуется выполнять, следуя более строгим правилам режима стандартов (standards mode) , который обеспечивает единообразное форматирование и структуру страницы при ее отображении любым современным браузером. За некоторыми исключениями, браузеру совершенно безразлично, какой именно тип документа указан в описании. Он просто проверяет, что страница имеет какое-либо описание типа документа. Описание типа документа HTML5 просто самое короткое действительное описание типа документа, которое задействует режим стандартов браузера.

Кодировка символов

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

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

HTML5 делает эту задачу легкой. Для этого нужно лишь вставить элемент в самом начале блока (или, если элемент не используется, сразу же после кода описания типа документа):

Крошечный документ HTML5

Инструменты для веб-разработки, такие как Dreamweaver или Expression Web, вставляют этот элемент автоматически при создании страницы. Эти инструменты также обеспечивают сохранение файлов в кодировке UTF. Но при создании веб-страницы с помощью обычного текстового редактора, чтобы обеспечить сохранение файлов в правильной кодировке, может потребоваться выполнить дополнительные шаги.

Язык

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

Вставить в веб-страницу информацию о языке легче всего через элемент :

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

Добавление таблицы стилей

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

Крошечный документ HTML5

Этот способ похож на указание таблиц стилей в традиционных HTML-документах, но немного проще. Так как существует единственный язык каскадных таблиц стилей - CSS, то в добавлении атрибута type="text/css", который требовался ранее, больше нет надобности.

Добавление JavaScript-кода

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

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

Крошечный документ HTML5

Атрибут language="JavaScript" не является обязательным, т. к. если не указан какой-либо другой язык сценариев (а поскольку JavaScript - единственный широко-поддерживаемый язык сценариев для HTML, то вероятность такого развития ничтожно мала), браузеры автоматически предполагают, что используется JavaScript. Но даже ссылаясь на внешний файл с кодом JavaScript, все равно нужно помнить о закрывающем теге . Если упустить этот тег по недосмотру или при попытке укоротить код, используя синтаксис пустых элементов, то страница не будет работать должным образом.

Если вы уделяете много времени тестированию своих страниц с JavaScript в Internet Explorer, может быть полезным добавление метки MOTW (Mark of the Web - метка особенности сети) в блок сразу же после строки кодировки. Делается это таким образом:

Крошечный документ HTML5

Эта строка кода указывает Internet Explorer обрабатывать страницу таким образом, как будто бы она была загружена с удаленного веб-сайта. В противном случае IE переключается в особый режим блокировки, выводит предупреждение безопасности в строке сообщений и отказывается исполнять любой код JavaScript до тех пор, пока вы не нажмете кнопку "Разрешить заблокированное содержимое".

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