Как использовать секционные элементы HTML5
Один славный малый Matt West c туманного альбиона, промышляющий фрилансом и предпринимательством, предложил нашему вниманию пост: «Как использовать секционные элементы HTML5».
Ниже приводится его перевод.
HTML5 предлагает набор секционных элементов, используя которые в своей разметке вы добавляете смысловую или семантическую нагрузку своим страницам, тем самым позволяя компьютерным программам лучше понимать их содержание.
Прочитав этот пост, вы научитесь применять секционные элементы на ваших веб-сайтах. Я постараюсь объяснить, в каких случаях лучше использовать тот или иной элемент и когда лучше прибегнуть к старому доброму
.
Давайте начнем.
Элемент main
Элемент должен содержать главный контент вашей вебстраницы. Причем, все содержимое должно быть уникально на странице и не должно отображаться где-либо еще на сайте.
Повторяющийся на нескольких страницах контент (логотип, окно поиска, ссылки в футере и т.д.) не следует помещать внутри элемента .
Ниже приводится пример представления главного содержимого страницы.
Журнал Rocking Stone Гитары
Величайшие гитары современности
Gibson SG
.
Fender Telecaster
.
Примечание: Мы использовали атрибут роли ARIA role=”main”, здесь он указывает на важность этого элемента тем программам, которые еще не поддерживают элемент (например, некоторые скринридеры).
Можно использовать только один элемент
на странице, который нельзя помещать внутри элементов , , , или .
Элемент article
Элемент должен содержать часть самодостаточной информации, которая может быть вырвана из контекста всей страницы без потери смысла. Это могут быть: новость, статья в блоге, комментарии пользователя.
Название статьи
Опубликовано: 13 февраля 2014
.
один в другой. Это будет означать, что вложенные элементы связаны с внешним элементом .
Название статьи
Опубликовано: 13 февраля 2014
.
.
.
Комментарии
Это была интересная статья
Как ты связываешь это с мировым превосходством?
.
Элемент aside
Элемент используется для выделения содержания, непосредственно связанного с окружающим контентом, но которое может рассматриваться и отдельно. Это могут быть боковые сноски (как в книгах), группы элементов , цифры или цитаты.
Компания Google покупает Nest
Опубликовано: 13 января 2014
.
.
, чтобы выделить информацию о компании Google в новостной статье. Эта информация может быть полезна читателю, но не связана напрямую с новостью.
Элемент header
Элемент используется для представления вводной части к статье или веб-странице. Обычно он содержит заглавие или какие-либо метаданные, относящиеся к данному контенту, например, дата публикации статьи или оглавление (внутри элемента ) для более длинного документа.
Элемент будет связан с ближайшим секционным элементом, обычно это прямой родитель в структуре страницы.
Компания Google покупает Nest
Опубликовано: 13 января 2014
содержит заголовок и дату публикации новостной статьи.
Элемент footer
Элемент используется для представления такой информации о разделе, как автор, авторские права, ссылки на связанные веб-страницы.
, элемент связан с ближайшим секционным элементом.
Элемент address
Элемент один из самых неправильно используемых элементов в HTML. Этот элемент предназначен не для разметки почтового адреса, а для представления контактной информации по статье или веб-странице. Это могут быть ссылки на сайт автора или его электронный адрес.
Контакты Matt West
, который в свою очередь располагается внутри элемента .
Компания Google покупает Nest
Опубликовано: 13 января 2014
.
.
Заключение
В этом посте вы узнали как использовать секционные элементы HTML5 для разметки веб-страниц. Использование таких элементов имеет ряд преимуществ.
Одно из самых больших – это придание семантического значения определенным областям вашей веб-страницы, позволяющего компьютерным программам (скринридерам) идентифицировать ключевые элементы содержания и навигации.
Примечание: Пока еще не все скринридеры имеют поддержку семантических элементов. Чтобы обезопасить себя, вы можете продолжать использовать роли ARIA. Использование секционных элементов также помогает разработчикам больше задумываться о структуре своих веб-страниц.
Хотя выбор секционного элемента и очевиден, но он порождает важные вопросы о назначении и цели контента, а также, помогает понять, а относится ли вообще содержимое к этой странице?
Это пример того, как веб-стандарты помогают не только улучшить качество разметки, но и качество веб-страницы в целом.
Новые теги
В HTML5 для структуры кода введено несколько новых тегов: , , , , , которые заменяют в некоторых случаях привычный . Хотя кажется, что особой разницы между тегами и нет, между ними лежит огромная пропасть. Теги ориентированы не на людей, которым нет смысла заглядывать в исходный код страницы, а на машины, интерпретирующих код. Машины или роботы не понимают , для них это типовой тег разметки — замени его на и смысл не поменяется. Другое дело , робот, обнаружив этот тег, воспринимает его именно как шапку сайта или раздела.
Что это даёт в итоге? Поисковые системы начинают лучше индексировать сайт, потому что чётко отделяют контент страницы от вспомогательных элементов. Речевые браузеры, предназначенные для слепых людей, пропускают заголовок и переходят непосредственно к содержимому. Сайты могут автоматически обмениваться контентом и другой информацией между собой. Все эти возможности называются семантикой и позволяют представить данные в удобном для роботов виде.
Давайте для начала сделаем шапку сайта с помощью тега (пример 6.2).
Попытка добавить в стилях фон к тегу ни к чему не привела, фон в некоторых браузерах отображаться не желает. Все новые теги следует сделать вначале блочными через свойство display , тогда они начнут корректно выводиться (пример 6.3).
HTML5 CSS 2.1 IE 7+ IE 9+ Cr Op Sa Fx
Данный пример будет работать во всех браузерах, кроме IE7 и IE8. Internet Explorer не добавляет стиль к элементам, которые не понимает. Это недоразумение можно исправить, если создать фиктивный элемент с помощью JavaScript. Для этого включим в такой код.
Если на странице встречается один тег, этот скрипт вполне подойдёт для работы. Но не хочется повторять строку десять раз для десяти разных тегов, поэтому автоматизируем этот процесс через цикл. Сами теги указываются списком, разделяясь запятой (пример 6.4).