Новые структурные теги html5

Содержание:

Введение
- Что такое HTML?
Элемент head и метаданные веб-страницы
Различия между XHTML и HTML
Итак, что такое API?
Является обязательным
Более сложные примеры
Создание документа HTML5
Единый подход к десктопным и мобильным платформам
Статус данного документа
Алфавитный список
XHTML
Что такое HTML
- Поддержка браузерами
- Необходимые инструменты
Примеры семантического HTML5
Обновленная декларация doctype
- - - Таблица 1. Doctype-декларации и их возможности
Область Header
- - - Листинг 1. Пример тега <header>
    - Листинг 2. Пример тега <hgroup>

Введение

Люди, плохо знакомые со сферой веб-дизайна, часто слышат слово «разметка» и задаются вопросом, что оно означает и как отличается от более широко известного термина «код». В основном язык разметки предназначен для обработки, определения и представления информации о тексте; теги стилей и текстовые аннотации записываются в файлах стилей, чтобы упростить работу с текстом для компьютера. Исторически сложилось, что термин «разметка» произошел от английского marking-up, а сам процесс от manuscript marking-up — процесса разметки рукописи перед отдачей ее в печать. Здесь речь пойдет о наиболее часто используемом языке разметки — HTML. Несколько лет назад для этого языка было выпущено обновление под названием HTML5. В этом руководстве мы расскажем, что такое HTML5 и поведаем о различиях между HTML и HTML5.

Что такое HTML?

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

Стандарт HTML был разработан W3C или Консорциумом Всемирной Паутины в 1997 году. В HTML для определения структуры текста используются теги; теги и элементы выделяются с использованием символов < и >. Вот лишь некоторые из примеров для ранее упомянутых тегов — это заголовки, таблицы, абзацы и т. д. В свою очередь, браузеры отвечают за визуализацию содержимого страницы с помощью этих тегов. HTML не был единственным стандартом веб-разработки. В первые дни развития Интернета все теги контента и стили присутствовали на одном гигантском, громоздком (и довольно сложном) языке. Со временем W3C пришла к решению о необходимости разделения контента и стиля страницы; Это привело к созданию таблиц стилей или CSS. В настоящее время теги, которые используются для определения стиля текста (например FONT), нежелательны и почти не используются, на их место пришли таблицы стилей и только теги определения содержимого (например H1) по-прежнему составляют ядро HTML.

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

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

Элемент head и метаданные веб-страницы

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

Заголовок

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Элемент title</title>
	</head>
	<body>
		<p>Содержание документа HTML5</p>
	</body>
</html>

Элемент base

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

<!DOCTYPE html>
<html>
	<head>
		<base href="content/">
		<meta charset="utf-8">
		<title>Элемент base</title>
	</head>
	<body>
		<a href="newpage.html">Перейти</a>
	</body>
</html>

Хотя для ссылки в качестве адреса указана страница newpage.html, но фактически ее адресом будет content/newpage.html. То есть в
одной папке с текущей страницей должна быть подпапка content, в которой должен находится файл newpage.html

Можно также указывать полный адрес:

<base href="http://www.microsoft.com/">

В это случае ссылка будет вести по адресу http://www.microsoft.com/newpage.html

Элемент meta

Элемент meta определяет метаданные документа.

Чтобы документ корректно отображал текст, необходимо задать кодировку с помощью атрибута charset. Рекомендуемой
кодировкой является utf-8:

<meta charset="utf-8">

При этом надо помнить, что указанная элементе кодировка должна совпадать с кодировкой самого документа. Как правило, текстовый редактор позволяет
указать кодировку документа. Если мы хотим ориентироваться на utf-8, то в настройках текстового редактора надо выбирать UTF-8 w/o BOM.
Например, выбор кодировки в Notepad++:

Элемент также имеет два атрибута: и content. Атрибут содержит имя метаданных, а — их значение.

По умолчанию в HTML определены пять типов метаданных:

application name: название веб-приложения, частью которого является данный документ
author: автор документа
description: краткое описание документа
generator: название программы, которая сгенерировала данный документ
keywords: ключевые слова документа

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

Добавим в документ ряд элементов meta:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<base href="content/">
		<title>Элемент title</title>
		<meta name="description" content="Первый документ HTML5">
		<meta name="author" content="Bill Gates">
	</head>
	<body>
		<a href="newpage.html">Содержание документа HTML5</a>
	</body>
</html>

НазадВперед

Различия между XHTML и HTML

Согласно синтаксису XHTML:

все элементы должны быть закрыты. Теги, которые не имеют закрывающего тега (например, или ), должны иметь на конце (например, );
логические атрибуты записываются в развёрнутой форме. Например, следует писать или ;
имена тегов и атрибутов должны быть записаны строчными буквами (например, вместо );
XHTML гораздо строже относится к ошибкам в коде; < и & везде, даже в URL, должны замещаться < и & соответственно. По рекомендации W3C браузеры, встретив ошибку в XHTML, должны сообщить о ней и не обрабатывать документ. Для HTML браузеры должны были попытаться понять, что хотел сказать автор;
кодировкой по умолчанию является UTF-8 (в отличие от HTML, где кодировкой по умолчанию является ISO 8859-1).

Для XHTML-страниц рекомендуется задавать MIME-тип — , но это не является обязательным, более того — браузер Internet Explorer 8 и младшие версии не смогут обрабатывать страницу, поэтому с XHTML 1.0 традиционно используется MIME-тип для HTML — .

Существует три типа документов XHTML: strict, transitional и frameset.
Наиболее употребительной и универсальной из версий XHTML является переходная (англ. transitional), поскольку она позволяет использовать (включение содержимого одной веб-страницы в другую) и атрибут у ссылок (для указания того, например, что ссылке необходимо открываться в новом окне). Фреймовая версия (англ. frameset) представляет собой расширенный вариант transitional и добавляет к нему, как следует из названия, возможность установки вместо . DTD ((англ. document type definition) определение типа документа) строгой версии XHTML (англ. strict) не содержит многих тегов и атрибутов, описанных в DTD transitional и признанных устаревшими.

Итак, что такое API?

API (application programming interface— интерфейс прикладного программирования) — это совокупность инструкций по программированию и стандартов, определяющих доступ к программному приложению. Это позволяет разработчику при проектировании своей продукции пользоваться мощными возможностями, предоставляемыми соответствующим API-интерфейсом.

Спецификация HTML5 предлагает несколько новых API-интерфейсов. Примеры:

API-интерфейс двухмерного рисования, применяющийся вместе с новым тегом Canvas для отображения графиков и других визуальных материалов.
API-интерфейс механизма кэширования для поддержки офлайновых Web-приложений
API-интерфейс для воспроизведения видео и аудио, применяющийся вместе с новыми тегами video и audio.
API-интерфейс для доступа к истории просмотров и для добавления страниц к этой истории.
API-интерфейс типа drag-and-drop для использования с атрибутом .
API-интерфейс редактирования для использования с атрибутом .
Хранилище на клиентской стороне с API-интерфейсами JavaScript для пар типа «ключ/значение», а также встроенные базы данных на основе SQL.

Данная статья посвящена двум API-интерфейсам: Geolocation и Web Worker. Сначала в статье рассматриваются сами API-интерфейсы, а затем создается страница, содержащая оба этих интерфейса.

Является обязательным

Документ XHTML должен иметь декларацию формата XHTML.

Полный список всех XHTML -файлов содержится в нашей ссылке на HTML-теги.

Элементы <HTML>, <head>, <Title> и <BODY> также должны присутствовать, а атрибут xmlns в <HTML> должен указывать пространство имен XML для документа.

В этом примере показан документ XHTML с минимально необходимыми тегами:

<!DOCTYPE html
PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN»
«http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml»>
<head>

<title>Title of document</title>
</head>
<body> some content
</body>
</html>

Более сложные примеры

Использование секций и <article>:

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

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

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

Так же примите во внимание, что тут мы добавили секцию навигации в подвал. Логически, как и в шапке, подвал содержит элементы навигации

Связанный Aside

Тут мы добавили две части связанного контента к главной <article> контента. Используя aside, мы определяем то, что связанный контента (aside) опционален. То есть основная секция контента может быть показана без aside и все равно будет понятна.

Косвенно связанный aside

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

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

Создание документа HTML5

Последнее обновление: 08.04.2016

Элементы являются кирпичиками, из которых складывается документ html5. Для создания документа нам надо создать простой текстовый файл, а в качестве расширения файла указать
*.html

Создадим текстовый файл, назовем его index и изменим его расширение на .html.

Затем откроем этот файл в любом текстовом редакторе, например, в Notepad++. Добавим в файл следующий текст:

<!DOCTYPE html>
<html>

</html>

Для создания документа HTML5 нам нужны в первую очередь два элемента: DOCTYPE и html. Элемент doctype или Document Type Declaration
сообщает веб-браузеру тип документа. указывает, что данный документ является документом html и что используется html5, а не html4 или какая-то другая версия языка разметки.

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

Внутри элемента мы можем разместить два других элемента: head и body.
Элемент содержит метаданные веб-страницы — заголовок веб-страницы, тип кодировки и т.д., а также ссылки на внешние ресурсы — стили, скрипты, если они использутся.
Элемент собственно определяет содержимое html-страницы.

Теперь изменим содержимое файла index.html следующим образом:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Документ HTML5</title>
	</head>
	<body>
		<div>Содержание документа HTML5</div>
	</body>
</html>

В элементе head определено два элемента:

элемент представляет заголовок страницы
элемент определяет метаинформацию страницы. Для корректного отображения символов предпочтительно указывать кодировку.
В данном случае с помощью атрибута указываем кодировку utf-8.

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

Поскольку мы выбрали в качестве кодировки utf-8, то браузер будет отображать веб-страницу именно в этой кодировке. Однако необходимо чтобы сам текст
документа также соответствовал выбранной кодировке utf-8. Как правило, в различных текстовых редакторах есть соотвествующие настройки для установки кодировки.
Например, в Notepad++ надо зайти в меню Кодировки и в открывшемся списке выбрать пункт Преобразовать в UTF-8 без BOM:

После этого в статусной строке будет можно будет увидеть UTF-8 w/o BOM, что будет указывать, что нужная кодировка установлена.

Сохраним и откроем файл index.html в браузере:

Таким образом, мы создали первый документ HTML5. Так как мы указали в элементе заголовок «Документ HTML5», то именно такое название
будет иметь вкладка браузера.

Так как указана кодировка utf-8, то веб-браузер будет корректно отображать кириллические символы.

А весь текст, определенный внутри элемента мы увидим в основном поле браузера.

НазадВперед

Единый подход к десктопным и мобильным платформам

Поддержка нового стандарта HTML5 обеспечивается и практически на всех современных мобильных устройствах, включая iOS, Android и Windows Phone, в чём заключается ещё одно его важное достоинство. Веб-мастеру уже не нужно размещать несколько версий медиаконтента для «полноценных» компьютеров и мобильных устройств

Известно, что iOS полностью несовместима с Flash, а ОС Android совместима лишь частично. В случае с HTML5 эта проблема полностью снимается.

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

Статус данного документа

Данный документ просматривался членами W3C и другими заинтересованными лицами и организациями, и одобрен Директором в качестве Рекомендации W3C. Это постоянный документ; он может использоваться в качестве справочника или приводиться в других документах в качестве нормативного. Ролью W3C в этой рекомендации является привлечение внимания к этой спецификации и расширение сферы ее применения. Это расширяет функциональность и возможность взаимодействия в Web.

W3C рекомендует пользователям и авторам (в особенности средствам создания документов) использовать версию HTML 4.0 вместо HTML 3.2 (см. ).
Для обеспечения совместимости с предыдущими версиями W3C также рекомендует для средств интерпретации HTML 4.0 поддержку HTML 3.2 и HTML 2.0.

Список текущих Рекомендаций W3C и других технических документов можно найти по адресу http://www.w3.org/TR.

Дискуссия относительно функций HTML происходит по адресу .

Доступные форматы

Рекомендацию W3C HTML 4.0 можно также получить в следующих форматах:

Текстовый файл, на английском языке:: http://www.w3.org/TR/REC-html40-971218/html40.txt
(723 Кб),
Файл gzip tar, содержащий документы в формате HTML, на английском языке:: http://www.w3.org/TR/REC-html40-971218/html40.tgz
(339 Кб),
Файл zip, содержащий документы в формате HTML (это файл ‘.zip’, а не ‘.exe’, на английском языке):: http://www.w3.org/TR/REC-html40-971218/html40.zip
(372 Кб),
Файл zip, содержащий документы в формате HTML (это файл ‘.zip’, а не ‘.exe’, на русском языке):: http://www.stack.ru/~julia/download/html4.zip
(407 Кб),
Файл в формате Postscript, на английском языке:: http://www.w3.org/TR/REC-html40-971218/html40.ps
(4.4 Мб, 363 страницы),
Файл в формате PDF, на английском языке:: http://www.w3.org/TR/REC-html40-971218/html40.pdf
(2.1 Мб).

В случае расхождений электронной и печатной форм спецификации следует использовать электронную версию.

Языки

Единственной нормативной версией является английская версия данного документа. Однако переводы этого документа можно найти по адресу http://www.w3.org/MarkUp/html40-updates/translations.html.

Ошибки

Список обнаруженных в спецификации ошибок находится по адресу http://www.w3.org/MarkUp/html40-updates/html40-errata.html

Об ошибках, найденных в этом документе, сообщайте по адресу www-html-editor@w3.org.

Алфавитный список

XHTML

XHTML (от англ. Extensible Hypertext Markup Language — модульный язык разметки гипертекста) — расширяемое семейство всех языков и модулей разметки страниц на основе XML, только с расширением и повторением возможностей HTML 4.

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

Спецификация XHTML

XHTML характеризуется спецификацией SGML, так как XML на самом деле является ее основным подмножеством. Из-за большого числа особенностей, касающихся обработки информации, HTML практически перестал относиться к разряду SGML. Эти сведения закреплены в черновике по спецификации HTML 5.

На основе заголовка content-type, браузером выбирается парсер, он же модуль для обработки документа, изъятого из разных серверов.

Версии XHTML

XHTML 1.0 одобрена консорциумом Всемирной паутины еще 26 января 2000 года. Уже 1 августа 2002 года была опубликована вторая измененная редакция спецификации.

XHTML 1.0 (аналогично HTML 4) состоит из трех типов документов:

XHTML-1.0-Strict — позволяет исключить полное использование элементов и атрибутов, которые задают графическое отображение в виде элементов font или атрибута bgcolor. Относится к самому предпочтительному типу документов.
XHTML-1.0-Transitional — допускает использование любых элементов и атрибутов с графическим отображением, но указанные элементы рекомендованы к использованию только в случае крайней необходимости. Как вариант — для максимального облегчения миграции документов из HTML 3.2 на XHTML.
XHTML-1.0-Frameset — добавляет к возможностям второго типа документа (XHTML-1.0-Transitional) еще использование фреймов.

XHTML 1.1 — версия, содержащая XHTML 1.1 Модульный, в котором авторам разрешено импортировать любые дополнительные свойства в разметку.

Для XHTML Basic и XHTML MP характерны:

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

XHTML 2.0

Последняя версия XHTML, которая так и не достигла полноценного статуса рекомендации. Деятельность разработчиков этой версии была остановлена в конце 2010 года, при этом все ресурсы скомбинировали в общую рабочую группу HTML 5. Результаты наработок в декабре 2010 года напечатаны в виде отчета работающей группы.

Недостатки XHTML

Обзор всех источников и опыта работы профессионалов дает возможность собрать все причины, по которым использование XHTML можно назвать нецелесообразным. Основной толчок к определению этих причин дал обзор XTML 5. Он позволил выделить 12 причин, из-за которых не рекомендуется пользоваться XHTML.
4. HTML — более оптимизированная разметка под любые поисковые системы, по сравнению с XHTML, ведь в нем пишется меньше кода.
5. Заинтересованным в актуальной защите авторских прав людям HTML намного тяжелее парсить — автоматически копировать, так как XHTML как раз и предназначен для максимальной простоты парсинга.
6. Гарантия надежности при автоматическом копировании XML-документа. Этому свидетельствует факт завершения работы в случае нахождения ошибки.
7. Internet Explorer версий 6 и 7 не поддерживают application/xhtml+xml.
8. Большинство HTML документов не индексируются многими поисковыми системами так, как XML.
9. Верстать HTML намного удобнее, легче, и проще.
10. Скрипты XHTML Document.write не работают, только простая переписка, использующая DOM-функции.
11. Используя DOM-функции, нужно опускать все названия элементов в нижний регистр. Такой же процедуры нужно придерживаться в отношении селекторов в стилях.
12. XHTML-формат не поддерживает функциональные программы document.body, document.images и document.forms.
13. Невозможность содержания всех элементов в прежнем виде, так как любой значок “>” может нарушить готовую структуру. А если его экранировать с помощью “>” или путем заключения в блоки CDATA, можно сломать HTML браузеры.
14. Не реальность автоматического распространения фоновых цветов body в XHTML на все окно.
15. Ожидание нового усовершенствованного и более популярного стандарта HTML 5, с помощью которого заменится изученный HTML 4-формат.

Что такое HTML

Последнее обновление: 08.04.2016

HTML (HyperText Markup Language) представляет язык разметки гипертекста, используемый преимущественно для создания документов в сети интернет.
HTML начал свой путь в начале 90-х годов как примитивный язык для создания веб-страниц, и в настоящий момент уже трудно представить себе интернет без HTML.
Подавляющее большинство сайтов так или иначе используют HTML.

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

Что именно привнес HTML5?

HTML5 определяет новый алгоритм парсинга для создания структуры DOM
добавление новых элементов и тегов, как например, элементы , и ряд других
переопределение правил и семантики уже существовавших элементов HTML

Фактически с добавлением новых функций HTML5 стал не просто новой версией языка разметки для создания веб-страниц, но и фактически платформой для создания
приложений, а область его использования вышла далеко за пределы веб-среды интернет: HTML5 применяется также для создания мобильных приложений
под Android, iOS, Windows Mobile и даже для создания десктопных приложений для обычных компьютеров (в частности, в ОС Windows 8/8.1/10).

В итоге, как правило, HTML 5 применяется преимущественно в двух значениях:

HTML 5 как обновленный язык разметки гипертекста, некоторое развитие предыдущей версии HTML 4
HTML 5 как мощная платформа для создания веб-приложений, которая включает не только непосредственно язык разметки гипертекста, обновленный HTML,
но и язык программирования JavaScript и каскадные таблицы стилей CSS 3.

Поддержка браузерами

Надо отметить, что между спецификацией HTML5 и использованием этой технологии в веб-браузерах всегда был разрыв. Большинство браузеров стало внедрять стандарты HTML5
еще до их официальной публикации. И к текущему моменту большинство последних версий браузеров поддерживают большинство функциональностей HTML5
(Google Chrome, Firefox, Opera, Internet Explorer 11, Microsoft Edge). В то же время многие старые браузеры, как например, Internet Explorer 8
и более младшие версии, не поддерживают стандарты, а IE 9, 10 поддерживает лишь частично.

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

Необходимые инструменты

И также потребуется веб-браузер для запуска и проверки написанных веб-страничек. В качестве веб-браузера можно взять последнюю версию любого из
распространенных браузеров — Google Chrome, Mozilla Firefox, Microsoft Edge, Opera.

Вперед

Примеры семантического HTML5

Супер простой семантический HTML5 пример:

Тут мы довольно просто определяем, какую роль играет каждая часть страницы. Когда вы начинаете разметку HTML5, то вот как безопаснее всего это начать — header, nav, main, footer.

Лучше иметь супер простое исполнение, которое на 100% верное, чем сложное, но неверное.

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

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

Обновленная декларация doctype

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

Декларация сообщает браузеру, на какой версии языка разметки написана текущая страница. Она делает это с помощью шаблона DTD (Document Type Definition — определение типа документа). DTD специфицирует правила, используемые языком разметки, благодаря чему браузеры корректно отображают контент.

Концепция doctype-деклараций вполне может сбить с толку. В нынешней спецификации HTML имеется множество деклараций doctype, различия между которыми не вполне очевидны. В таблице 1 показаны доступные на данный момент декларации doctype и их возможности.

Таблица 1. Doctype-декларации и их возможности

Doctype-декларация	Возможности	Пример
HTML 4.01 strict	Разрешает использовать все элементы и атрибуты HTML, однако не допускает презентационных тегов, таких как font. Элементы frameset не разрешены.	<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
HTML 4.01 transitional	Аналогична декларации HTML strict, но допускает использование таких тегов, как font. Элементы frameset не разрешены.	<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
HTML 4.01 frameset	Аналогична декларации HTML transitional, но разрешает использование элементов frameset.	<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN» «http://www.w3.org/TR/html4/frameset.dtd»>
XHTML 1.0 strict	Аналогична декларации HTML strict, однако весь контент должен быть представлен в формате XML. Например, каждый открывающий элемент должен иметь соответствующий ему закрывающий элемент. Элементы frameset не разрешены.	<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>
XHTML 1.0 transitional	Аналогична декларации HTML transitional, однако весь контент должен быть представлен в формате XML. Элементы frameset не разрешены.	<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
XHTML 1.0 frameset	Аналогична декларации XHTML transitional, однако разрешает элементы frameset.	<DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Frameset//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd»>
XHTML 1.1	Аналогична декларации XHTML strict, плюс предоставляет такие возможности для модулей, как поддержка Ruby для восточно-азиатских языков.	<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1//EN» «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»>

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

Область Header

В рассматриваемом примере область Header содержит заголовок страницы и подзаголовок. Тег используется с целью создания контента для области данной страницы. Тег может содержать открывающую информацию о теге и о теге
в дополнение к самой Web-странице. Создаваемая нами Web-страница имеет область , показанную на высокоуровневом представлении ее дизайна, а также область внутри области и области . В листинге 1 показан пример разметки тега .

Листинг 1. Пример тега <header>

<header>
    <h1>Heading Text</h1>
    <p> Text or images can be included here</p>
    <p> Logos are frequently placed here too</p>
</header>

Тег также может содержать тег
(листинг 2). Тег группирует заголовки вместе, используя показанные уровни заголовков с по
с главным заголовком и подзаголовком.

Листинг 2. Пример тега <hgroup>

<header>
    <hgroup>
          <h1>Main Heading</h1>
          <h2>Sub-heading </h2>
    </hgroup>
    <p> Text or images can be included here</p>
</header>