HTML5 новые тэги header, footer, nav, aside, section, article, hgroup, main
Продолжаем рассматривать новый язык разметки веб-сайтов — HTML5. Если вы еще ничего не слышали о нем, то вэлкам во Введение в HTML5 и первые шаги в HTML5.
Сегодня поговорим о новых тэгах в HTML5. И для начала рассмотрим наиболее глобальные: section, article, header, footer, nav, aside, main и hgroup.
Тэги header и footer
Как уже отмечалось ранее, HTML5 во многом более семантически правильный стандарт. Отдельные характерные части веб-сайта названы, наконец, своими унифицированными именами, дабы в дальнейшем не возникало никакой путаницы: header — верхняя секция сайта, footer — нижняя, nav — блок навигации и т.д.
По сути, это избавляет от необходимости использовать нейтральный тэг DIV для обозначения данных частей сайта.
Можно, например, типичную запись:
Самый сайт
Самый сайт
И в файле стилей CSS соответственно прописать набор правил непосредственно для тэга header.
Однако в этом есть одна закавыка. Дело в том, что большинство браузеров пока еще не знают, что эти новые тэги являются блочными элементами и считают их строковыми, как те же тэги ссылок или картинок , например. Поэтому в файле стилей CSS для таких тэгов необходимо принудительно прописывать их блочный характер:
header, footer, nav, article
Окей! Если с семантикой тэгов header, footer все более менее понятно, то остальные тэги стоит рассмотреть более внимательно.
Тэг nav
nav — служит для создания панели навигации. На странице этих элементов может быть несколько. Например, блок ссылок на основные страницы сайта и блок навигации по рубрикам.
Тэг aside
aside — является объединяющим тэгом, более всего подходящим для выделения сайдбара. В него могут входить как блоки nav, так и другие элементы, не являющиеся по-сути навигационными (рекламные баннеры, фотография автора и информация о нем, кнопки социалок и пузомерки и т.д.).
Тэг section
section — также объединяющий тэг. Причем он может выступать в разных ролях: либо разделять страницу на несколько тематических областей (например, выделить и, тем самым, обособить от шапки и подвала центральную часть с контентом и сайдбаром), либо разделять на отдельные секции (читай параграфы) непосредственно статью на странице.
Тэг article
article — служит для разбивки страницы на отдельные статьи.
Оба тэга section и article обладают рядом интересных особенностей.
Например, вы можете теперь смело использовать заголовок первого уровня h1 на одной странице несколько раз, что ранее было недопустимо.
Кроме того, тэг section может быть как родительским элементом для article, так и разделять саму статью article на несколько секций. Т.е. вполне возможна такая конструкция:
Тэг hgroup
hgroup — тэг призван группировать заголовки страницы в одну логическую единицу.
Например, главный заголовок всей страницы h1 и описание к ней, оформленное тэгом h3. На странице в дальнейшем еще несколько раз могут использоваться тэги h3 для других целей. Чтобы логически отделить описание страницы от других тэгов h3, мы его объединяем с главным тэгом h1 в группу, которая и обозначается тэгом hgroup:
Название сайта
Здесь описание сайта
UPD 24.02.2017: Значительно позже написания данной статьи появился еще один тег — main. Сначала дадим его общее определение, а потом расскажу подробнее, зачем он нужен и нужен ли вообще.
Тэг main
main — представляет собой основное содержимое документа, или иначе — основной контент. Отличие этого тэга от старого доброго body в том, что body включает ВСЕ содержимое страницы, тогда как main — основное, то есть уникальное.
Верстальщики сайтов и раньше использовали для выделения блока с основным контентом тэг div с идентификатором типа main или content. Видимо создатели HTML5 решили поддержать это дело и придумали такой вот новый тэг main.
В силу того, что он должен содержать только уникальный контент, сюда не входят ни шапка сайта, ни сайдбар(ы), ни подвал, ни вообще что-либо повторяющееся на сайте. Сказано — уникальный, значит уникальный!
Тэг main не является структурным тэгом и никак не влияет на разметку страницы!
Он также не может входить в состав других структурных тэгов: article, aside, footer, header или nav в силу своей уникальности.
И так же, как и другие новые тэги, он не воспринимается браузерами, как блочный элемент, поэтому это свойство ему нужно задавать принудительно в файле CSS:
Пример использования тэга main:
Тэг main был задуман для всевозможных программ-скринридеров, чтобы люди с плохим зрением могли знать, что на странице сайта является основным содержимым.
Из уникальности тэга main следует, что использовать его на сайте достаточно сложно. Ну, сами представьте себе такой сайт, где на каждой странице нужно выделить уникальную часть. Представили? Лично я вижу лишь простенький сайт-визитку на 5 – 6 страниц, где содержимое каждой страницы уникально и не повторяется нигде больше на сайте.
А взять, к примеру, любой блог на WordPress. Как выделить уникальное содержимое, если на главной страницы присутствуют анонсы статей, в архиве тоже есть выдержки? Какая уж тут уникальность! Разве что на статичных страницах типа «О сайте» или «Контакты».
Так что не все, что появляется нового в HTML5 на самом деле полезно, и не стоит это сразу же применять необдуманно.
Рекомендую почитать статью Избегаем распространенных ошибок в HTML5 разметке, где наглядно показано, что не стоит необдуманно менять старые добрые div-ы на новые теги. Ключевая фраза оттуда:
Не нужно использовать больше разметки только для того, чтобы использовать больше разметки. Вы просто создаете себе больше работы, но никак не улучшаете описание своего контента.
Такова правда жизни веб-мастера приходится постоянно зависать между одной технологией и другой, поскольку старые браузеры не поддерживают новшеств. С одной стороны жизнь веб-мастера становится приятнее за счет нововведений, я например, помню времена, когда круглые уголки верстали таблицами с картинками, а для ие6 делали отдельный файл стилей, а теперь всего одна строчка кода решает проблему круглых уголков, а с другой стороны в те древние времена не надо было делать адаптивную верстку.
Это дааа… Хотя, полагаю, до сих пор существуют махровые верстальщики, тайком пописывающие таблицы и втюхивающие их наивному обывателю 🙂 Но время бежит. Скоро и адаптивная верстка станет вчерашним днем. То-то еще будет!
hgroup — бестолковый тег, исключен из спецификации. Если честно, я не могу представить реальной ситуации, где бы он мог пригодиться.
Александр, тэг main появился значительно позже написания данной статьи. Но я добавил его описание, хотя и не вижу в нем особого смысла. В статье я указал причину такого моего отношения. Вэлкам! 🙂
Приветствую.
Прошу ответить на вопрос.
Зачем всё это нужно?
Тег header ни чем не отличается по функционалу от div, кроме того что он глючный и приходится явно в css прописывать его свойства.
Проще ведь сверстать всё одними тегами, например дивами.
Собственно те же претензии к футерам с артиклями на мейнах.
Спасибо за вопрос! Подробный ответ здесь. Если одним словом, то это — семантика. Из-за того, что устройств для отображения стало больше, чем просто монитор настольного компа, то приходится учитывать это обстоятельство и как-то все упорядочивать. Вот семантика как раз для этого и предназначена.
Благодарю за помощь, ответ в статье найден.
«семантика помогает поисковым системам быстрее и точнее находить на сайте полезное содержимое» Поясню. Структура семантических тегов не годится для автоматического выравнивания частей сайта на разных экранах. Разные части страницы не путаются на маленьких экранах, проблема в их содержимом, которое имеет свойство искажаться на маленьком экране. От того что сайт будет открыт на маленьком экране шапка не уедет в подвал. Ни разу с таким не сталкивался. Зато текст на резиновой вёрстке в столбик превращался, жёстко заданные картинки фоны за границы экрана уезжали или обрезались. То есть надо создавать инфраструктуру свойств файла цсс, которые будут автоматически форматировать содержимое.
В результате ответ один, новые теги придумали для того, что бы легче автоматически собирать содержимое сайтов. Это плохо для всех сайтов. Для публичных интересно выдать в поисковик только положительные сведения о себе в правильном, с точки зрения рекламы, виде. То есть если поисковики жёстко заработают на этих тегах, то очень скоро отзывы будут иметь тег навигации, каждое ключевое слово в небольшом тексте будет выделено арткилем и прочие подобные ухищрения. Про частные сайты, для ограниченного круга лиц, вообще не должны иметь таких тегов, что бы не светиться в поисковой системе.
Элемент
Элемент определяет универсальный типовой раздел веб-страницы. В большинстве случаях, когда надо добавить раздел, но есть сомнения, какой элемент для этого использовать, подходит именно .
позволяет сгруппировать разное содержимое, связанное друг с другом общим смыслом, и задать ему заголовок. Для заголовков обычно применяется элемент , и ниже, а для сложных случаев, когда кроме заголовка есть картинка, форма или что-то ещё, можно воспользоваться элементом .
подходит для одностраничных сайтов, чтобы отделить один раздел от другого, а также для содержимого вкладок.
Каждая вкладка представляет собой раздел
Общая структура раздела показана в примере 1. Заголовок позволяет идентифицировать раздел и дать ему название.
Заголовок
Содержимое раздела
Если в шапке раздела предполагается не один только заголовок, то имеет смысл воспользоваться элементом (пример 2).
Заголовок
Слоган
Содержимое раздела
Здесь кроме элемента в вставлен абзац
с предполагаемым слоганом.
Аналогично мы можем добавить и элемент , если в нём есть необходимость (пример 3).
Заголовок
Содержимое раздела
Хотя представляет собой универсальный раздел, элементы , и в некоторых случаях подходят больше. К примеру, для раздела с навигацией лучше использовать , как более подходящий по смыслу. В подобных ситуациях от надо отказываться в пользу других элементов.
В примере 4 показано создание нескольких разделов с заголовками и текстом внутри.