Код для этого документа выглядит следующим образом.
Вот некоторые преимущества от применения этих элементов. Когда они используются в сочетании с элементами заголовков (от
Заметим, что для лучшей совместимости с существующими браузерами, также можно использовать другие элементы заголовка (от
Помечая целевые разделы страницы с помощью специальных тегов, вспомогательные технологии могут помочь пользователю легко перемещаться по странице. Например, они могут просто пропустить раздел навигации или быстро переходить от одной статьи к другой. Автору не придется обеспечивать механизм создания ссылок для этого. Также авторы получают преимущество, поскольку замена множества
на несколько различных элементов помогает сделать исходный код понятнее и проще.
Элемент
определяет заголовок раздела, который может содержать больше, чем просто название раздела. К примеру, имеет смысл для заголовка включить подзаголовок, информацию о версии истории или авторство.
Предварительный обзор HTML5
Лаклан Хант
Блог
Вставьте сюда слоган.
Элемент
определяет подвал раздела, в котором добавляется. Подвал обычно содержит такую информацию как: кто написал, ссылки на соответствующие документы, авторские права и тому подобное.
Элемент
представляет раздел навигационных ссылок, он подходит для навигации по сайту или оглавления.
Элемент
предназначен для содержания, которое имеет косвенное отношение к контенту рядом с ним, как правило, используется для обозначения сайдбара.
Элемент
определяет универсальный раздел документа или приложения, например, главу.
Глава 1: То время
Это было лучшее изо всех времен, это было худшее изо всех времен;
это был век мудрости, это был век глупости;
это была эпоха веры, это была эпоха безверия;
это были годы Света, это были годы Мрака;
...
(Отрывок из «Повесть о двух городах»)
Элемент
представляет собой самостоятельный раздел документа, страницы или сайта. Он подходит для содержания вроде новости, статьи блога, сообщения форума или отдельных комментариев.
Видео и аудио
В последние годы видео и аудио в Интернете становится все более жизнеспособным и сайты вроде 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, особенно замена оформительской обёртки на
. В XHTML или HTML4 я бы увидел что-нибудь такое:
Вместо этого я вижу следующее:
Честно говоря, это неправильно: - это не обёртка.
Элемент определяет смысловую секцию содержимого для создания структуры документа . Он должен содержать заголовок. Если вы ищете элемент для того чтобы обернуть в него всю страницу (в стиле HTML или XHTML), подумайте, не применить ли стили непосредственно к элементу , как описано у Крока Кеймена . Если же вам всё ещё нужна дополнительная обёртка, используйте . Раз уж Доктор Майк объясняет, что
не мёртв , а вам не удаётся найти ничего более удачного, пожалуй, этот элемент будет самым подходящим для создания оформительской обёртки.
Таким образом, корректной разметкой для упомянутого выше примера с использованием HTML5 и пары ролей ARIA будет следующий код. Обратите внимание, что вам, в зависимости от дизайна, всё ещё могут понадобится экстра-элементы
.
Если вы не уверены, какие элементы использовать, я рекомендую вам обратиться к нашей пошаговой схеме выбора HTML5-элементов для разметки содержимого.
Используйте
Элемент удалён из спецификации HTML5 и не рекомендован к использованию, прим. редактора.
Нет смысла писать разметку, если этого можно не делать, так ведь? К сожалению, я часто вижу элементы и там, где они совсем не нужны. Вы можете узнать все подробности в наших статьях, посвящённых элементу и элементу , но я коротко резюмирую:
Элемент представляет собой группу вводного содержимого или навигационных средств и обычно содержит структурный заголовок.
Элемент группирует набор элементов от до , представляя собой структурный заголовок в случае, когда заглавие имеет несколько уровней, вроде подзаголовков, альтернативных названий или слоганов.
Злоупотребление
Думаю, что вы в курсе, что можно использовать в документе несколько раз. Но эта возможность привела к следующим ошибкам:
Если ваш содержит единственный заголовок, избавьтесь от ненужного . Элемент в любом случае гарантирует, что заголовок войдёт в смысловую структуру документа. И поскольку не содержит нескольких элементов, как указано в его описании, зачем вам код, который, в общем-то, не нужен? Будьте проще:
Мой лучший пост
Неправильное использование
Раз уж зашла речь о заголовках - я часто вижу неправильное использование . Не следует использовать в сочетании с
дочерний заголовок всего один или
элемента будет достаточно и без
Первая проблема выглядит так:
Мой лучший пост
Ричард Кларк
В этом случае стоит избавиться от и оставить только заголовок:
Мой лучший пост
Ричард Кларк
Следующая проблема состоит в очередном использовании элементов там, где они необязательны:
Моя компания
Основана в 1893 году
Когда - это единственный дочерний элемент , то какой смысл в этом ? Если в нём нет дополнительных элементов, соседствующих с , смело избавляйтесь от
Моя компания
Основана в 1893 году
Больше примеров использования вы можете найти .
Не оборачивайте все списки ссылок в
На момент написания статьи существует более 30-ти новых элементов и неудивительно, что у нас разбегаются глаза, когда дело доходит до создания осмысленной структурной разметки. Поэтому не стоит злоупортреблять всеми доступными сейчас суперсемантическими элементами. Что, к сожалению, часто происходит с элементом . Спецификация определяет роль следующим образом:
Элемент представляет собой часть страницы, которая ссылается на другие страницы или части текущей, то есть раздел с навигационными ссылками.
Замечание: не все группы ссылок на странице должны быть обёрнуты в элемент - этот элемент, главным образом, предназначен для группировки главных навигационных блоков. В частности, в подвалах часто содержатся короткие списки ссылок на различные части сайта, вроде правил использования сервиса, домашней страницы и копирайтов. Элемента вполне достаточно для группировки такого рода ссылок; и несмотря на то, что элемент может быть использован в таких случаях, обычно в этом нет необходимости.
Ключевая фраза - «главных навигационных блоков». Мы можем дискутировать весь день о значении слова «главный», но для меня это значит:
И хотя здесь не может быть «правильного» или «неправильного» использования, поверхностный опрос вкупе с моей собственной интерпретацией говорят, что следующие случаи не подходят для использования :
Постраничная навигация;
Социальные ссылки , за исключением тех случаев, когда такие ссылки являются основной навигацией, к примеру, на сайтах About Me и Flavours ;
Тэги к записи в блоге;
Категории записи;
Навигация третьего уровня;
Подвалы, набитые ссылками.
Если вы не уверены, стоит ли оборачивать список ссылок в , просто спросите у себя: «главная ли это навигация?» Чтобы было легче ответить на этот вопрос, обратитесь к следующим правилам:
«Не используйте , если кажется, что в этом случае может подойти и с заголовком », - Ян Хиксон, IRC .
Добавите ли вы этот блок в список ссылок «перейти» для улучшения доступности?
Если ответ на оба эти вопроса «нет», то, скорее всего, это не .
Общие ошибки с элементом
Ах, . Правильным использованием этого элемента вместе с подельником не так-то просто овладеть. Рассмотрим некоторые общие проблемы , которые я вижу при использовании .
Не каждая картинка это
Ранее я советовал вам не писать лишний код там, где этого не требуется. Та же ошибка и здесь. Я видел сайты, где каждая картинка была обёрнута в . Нет никакой необходимости в добавлении экстра-разметки вокруг картинок только ради самого процесса. Вы просто делаете лишнюю работу и нисколько не улучшаете описание содержимого страницы.
Спецификация обозначает как «содержимое в потоке, с необязательным заглавием, самодостаточное, обычно упоминаемое в качестве смысловой единицы в основном тексте». Как раз в этом состоит вся красота элемента , который может быть перемещён из основного содержимого, скажем, в колонку, что никак не повлияет на основной поток документа.
Если это исключительно оформительская картинка, никаким образом не упомянутая в основном документе, то это точно не . Есть и другие варианты использования, но просто спросите себя: «Нужна ли эта картинка для лучшего понимания контекста?» Если нет, то это вероятно не , а, возможно, . Если да, спросите себя: «Можно ли переместить эту картинку в примечания к тексту?» Если ответ на оба вопроса «да», то это, вероятнее всего, .
Ваш логотип - это не
Плавно переходим к следующей проблеме, вышеупомянутые правила применимы и к ней. Вот пара регулярно встречающихся примеров:
Название компании
Добавить здесь нечего: это совсем неправильно. Мы можем спорить до посинения насчёт того, должно ли лого находиться внутри
, но мы здесь не за этим. Настоящая проблема - в неправильном употреблении . Этот элемент должен использоваться, только если он упоминается в документе или контексте общего структурного элемента. Будет честным признать, что ваш логотип вряд ли будет упомянут подобным образом. Просто не делайте так. Всё, что вам нужно, это:
Элемент - это не только картинки
Другое распространённое заблуждение насчёт - что он может быть использован только для картинок. Это не так. Элемент может быть видео, аудио, графиком (на SVG, к примеру), цитатой, таблицей, блоком кода, фрагментом текста или любой комбинацией этих и многих других элементов. Не ограничивайте использование только картинками. Наша работа, как энтузиастов от веб-стандартов, заключается в том, чтобы максимально точно описывать содержимое при помощи разметки.
Семантические элементы HTML5
доступно описывают свой смысл или назначение как для браузеров, так и для веб-разработчиков.
До появления стандарта HTML5 вся разметка страниц осуществлялась преимущественно с помощью элементов
, которым присваивали классы class или идентификаторы id для наглядности разметки (например,