Структура html5 страницы

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

Если вы посмотрите на сайт «HTML5 Herald », то увидите, что он разделен следующим образом:

• шапка сайта с логотипом и заголовком;
• панель навигации;
• содержимое тела разделено на три столбца;
• статьи и рекламные блоки в столбцах;
• подвал сайта, содержащий информацию об авторе и авторских правах.

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

Элемент header

Первым элементом структуры HTML , который мы рассмотрим, является элемент header . Спецификация описывает его кратко — «группа вводных или навигационных элементов ».

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

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

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

Элемент section

Спецификация дает для него такое определение :

Элемент section представляет собой общий раздел документа или приложения. Раздел в этом контексте представляет собой тематическую группу контента, как правило, с заголовком.

Далее поясняется, что section не должен использоваться в качестве универсального контейнера для добавления стилей или скриптов. Если мы не можем использовать section в качестве общего контейнера — например, чтобы получить желаемый макет через CSS – то, что для этого использовать? В этом нам поможет элемент div , который не имеет определенного семантического значения.

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

Некоторые примеры корректного использования элемента section в структуре HTML страницы :

• отдельные разделы интерфейса с вкладками;
• сегменты страницы «О нас » может включать разделы, посвященные истории компании;
• различные части длинной страницы «условий обслуживания »;
• различные разделы сайта онлайн-новостей — статьи могут быть сгруппированы в разделы, посвященные спорту, политике и экономическим новостям.

Корректное использование section

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

Вкратце :

• section является общим элементом, поэтому, если требуется более конкретный семантический элемент (например, article , aside или nav ), используйте их.
• section имеет семантическое значение. Это означает, что контент, который он содержит, связан. Если вы не можете кратко описать весь контент, который хотите добавить в раздел, используя всего несколько слов, то нужно использовать семантически нейтральный контейнер — скромный div .

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

В структуре сайта HTML разрешается вкладывать элементы section в существующие элементы section, если это необходимо. Например, для сайта новостей раздел «Мировые новости» можно разделить на разделы для каждого крупного региона.

Элемент article

Элемент article во многом аналогичен элементу section , но есть и существенные различия. Определение спецификации гласит:

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

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

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

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

Как и в случае с section , элементы article могут быть вложены в другие article . Также можно вложить элемент section внутрь article , и наоборот.

Элемент nav

Можно предположить, что элемент nav будет использоваться практически в каждой структуре HTML файла . Он представляет собой то, что подразумевается: группу навигационных ссылок. Хотя наиболее распространенное использование для nav будет заключаться в размещении маркированных списков ссылок. Есть и другие варианты. Например, можно обернуть в элемент nav абзац текста, содержащего основные ссылки навигации страницы или раздела.

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

Примечание: Пропуск ссылок навигации

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

При каждом переходе на новую страницу нет смысла слушать главное меню навигации сайта! Элемент nav может помочь в решении этого вопроса. Если экранный диктор видит элемент nav, он может позволить пропустить навигацию, не требуя дополнительной ссылки. В спецификации указано:

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

Примечание. Пользовательские агенты

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

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

Некоторые разработчики считают, что nav подходит для разбивки на страницы или ссылок «хлебных крошек ». А также для формы поиска, которая является основным средством навигации по сайту.

Данное решение в конечном итоге зависит от вас. Ян Хиксон , главный редактор спецификации HTML5 WHATWG , прямо ответил на этот вопрос: «Используйте [его] там, где бы вы использовали class = nav ».

Элемент aside

Представляет часть страницы, которая «связана с содержимым вокруг элемента aside и может рассматриваться отдельно от этого содержимого ».

Элемент aside можно использовать для обертывания части контента, которая имеет отношение к:

• Конкретному контенту (например, статья или раздел );
• Целой странице или документу, как это обычно делается при добавлении боковой панели на страницу или сайт.

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

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

Варианты использования элемента aside в структуре index html : боковая панель, дополнительный список ссылок или блок рекламы. Следует также отметить, что элемент aside (как и в случае с элементов header ) не определяется его позицией на странице. Он может располагаться сбоку или в другом месте.

Элемент footer

Как и в случае с элементом header , может быть несколько элементов footer на одной странице, и вы должны использовать footer вместо .

Элемент footer , согласно спецификации, представляет собой футер для раздела контента, являющегося его ближайшим предком. Разделом контента может быть весь документ или элемент section , article , aside .

Здесь мы рассмотрим частые ошибки в HTML5 разметке с точки зрения семантики, и как их избежать.

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

Не используйте тег в качестве обёртки для оформления Одна из наиболее общих проблем, замеченных мною, - банальная замена "ов на структурные элементы HTML5, особенно на "ы. Т.е. когда то, что в XHTML или HTML4 выглядит так:
My super duper page Переписывают так:
Это просто неправильно: не обёртка. Этот элемент означает семантический блок Вашего контента, использующийся для построения «структуры документа» (document outline), и должен содержать заголовок. Если Вам нужен элемент для обёртки, попробуйте обойтись (Kroc Camen может предложить кое-что). Если это не решает проблему необходимости дополнительных обёрток, используйте старые добрые "ы. С приходом HTML5 "ы не умерли , и именно они отлично подходят в этом случае.

Принимая во внимание все вышесказанное, было бы хорошо разметить пример выше с использованием HTML5 так:
My super duper page

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

Используйте и только при необходимости Нет смысла писать код, если в этом нет необходимости, правда? Увы, но я часто наблюдаю, как и там, где они не нужны. Вы можете почитать об элементах и подробнее, я же коротко обозначу ключевые моменты:

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

Избыток элементов Я уверен, Вы прекрасно знаете, что элемент можно использовать несколько раз в документе. Поэтому часто встречается такое:
My best blog post

Если Ваш содержит только один заголовочный элемент, то он не нужен. В данном случае элемент уже гарантирует, что заголовок будет включен в «структуру документа» (document outline), и раз не содержит нескольких элементов (согласно определению), его можно безопасно удалить. Достаточно просто этого:
My best blog post

Неправильное использование И снова о заголовках: я часто вижу некорректное использование элемента . Не следует использовать вместе с , если:

• Присутствует только один заголовок
• хорош сам по себе (т.е., без ).

Первый случай:
My best blog post

by Rich Clark

В этом случае просто уберите hgroup.
My best blog post

by Rich Clark

Второй случай - это еще один пример использования элемента без необходимости.
My company Established 1893

Если единственный ребёнок "а это , зачем нужен ? Если у Вас нет дополнительных элементов в "е (т.е. сестринских по отношению к ), просто уберите .
My company Established 1893

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

Примечание: Не все группы ссылок следует помещать в элемент nav. Его следует использовать для основной навигации . Часто в футерах размещают небольшой список ссылок на различные страницы сайта (Главная, Помощь, соглашение об использовании, etc ). В этом случае одного footer"а должно быть достаточно. Хотя ничто не мешает использовать nav, в этом нет необходимости.

WHATWG HTML spec

Ключевая фраза - «основная навигация». Можно долго спорить о том, что понимать под основной, но для меня это:

• Первичная навигация
• Поиск по сайту
• Вторичная навигация (спорно)
• Внутристраничная навигация (внутри длинной статьи, например)

Хотя в этом случае сложно судить, что есть правильно, а что - нет, я считаю, что не стоит заключать в :

• Переключатели страниц
• Социальные ссылки (хотя возможны исключения в случаях, когда социальные ссылки являются основной навигацией. Например, сайты вроде about.me или flavours.me)
• Теги поста
• Категории поста
• Третичная навигация
• Объемные футеры

Если Вы не уверены, обрамлять ли список ссылок в , задайте себе вопрос: «Это основная навигация?». Примите во внимание следующее:

• “Не используйте , если Вы считаете, что с заголовком тоже подойдёт” - Hixie в IRC
• Возможно стоит добавить «Перейти к» для удобства?

Если ответ на эти вопросы - «Нет», это, видимо, не место для .Общие ошибки в использовании элемента Ах, . Разобраться с правильным использованием этого элемента, как и его собрата , непросто. Давайте взглянем на некоторые общие ошибки, касающиеся этого элемента.Не каждое изображение Ранее, я советовал не писать больше кода, чем необходимо. Здесь похожая ситуация. Я встречал сайты, где каждая картинка была обрамлена в . Не нужно использовать больше разметки только для того, чтобы использовать больше разметки. Вы просто создаете себе больше работы, но никак не улучшаете описание своего контента.

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

Вышеупомянутая блок-схема выбора элемента поможет Вам справиться с .

Если изображение несет только презентационную нагрузку, и на него нигде в документе не ссылаются, это определенно не . Иначе, задайте себе вопрос: «Необходимо ли это изображение в текущем контексте для понимания?». Если нет, это, видимо, не (возможно, ). Если да, спросите себя, «Могу ли я переместить это в приложение?». Если ответ на оба вопроса Да, то, возможно, подойдёт.

Ваш логотип - не Тоже самое касается и логотипа. Часто я вижу такое применение:
My company name
Тут нечего добавить. Это просто неверно. Можно долго спорить о том, должен ли логотип быть в , но мы сейчас не об этом. Настоящая ошибка - злоупотребление элементом . следует использовать только когда Вы ссылаетесь на него в документе. Вряд ли Вы где-нибудь будете ссылаться на свой логотип. Достаточно этого:
My company name может быть не только изображением Другой частый случай недопонимания элемента заключается в предположении, что его можно применять только для картинок. Но это не так. В может быть заключено видео, аудио, графики (в SVG, например), цитата, таблица, блок кода, стихотворение или любая комбинация перечисленного. Не ограничивайте себя в использовании одними картинками. Наша задача как приверженцев веб-стандартов - описать контент нашей разметки.

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

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

В HTML5 нет необходимости указывать атрибут type для элементов и . Хотя от них может быть непросто избавиться, если они автоматически добавляются Вашей CMS, нет смысла включать их в код, если Вы пишете его самостоятельно или можете управлять шаблонами. Т.к. все браузеры по-умолчанию считают, что все скрипты написаны на JavaScript, а стили - это CSS, такая разметка становится избыточной:

Вместо этого Вы можете просто написать:

Помимо прочего, Вы также можете сократить количество кода, расходующегося на указание кодировки. Глава Марка Пилгрима о семантике в книге Dive into HTML5 описывает все такие практики.

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

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

• autofocus
• autocomplete
• required

Я редко встречаю их, но в случае с required я видел такое:

В конечном счете, это ничем плохим не грозит. Клиентский HTML парсер встретит атрибут required в разметке и применит соответствующие правила. Но что если сделать по-другому и написать required=«false»?

Парсер по-прежнему увидит атрибут required и применит соответствующее поведение, несмотря на то, что Вы указали ему не делать этого. Очевидно, это не то, чего Вы хотели.

Логическое значение возможно применить тремя способами: (Второе и третье характерны для XHTML)

• required
• required=""
• required=«required=»

Применительно к нашему примеру выше, мы могли бы написать так (в HTML):

Теги:

• html5
• верстка
• семантика

Добавить метки

Лаклан Хант

Оригинал статьи на английском: 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. Он начинается с указания типа документа с помощью специального кода описания типа документа (значение этого кода объясняется в следующем разделе), после чего задается кодировка и название документа, а потом идет его содержимое. В данном случае содержимое состоит из одного абзаца текста:

Крошечный документ 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.

С появлением новой версии 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 (потоковое, текстовое)

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

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