В сети существует множество гайдов, которые описывают назначение HTML-элементов. Но сколько я не проводил собеседований или не проверял код, я вижу одну картину. Разработчики используют ограниченный набор элементов.
Для исправления этой ситуации я взял следующие элементы: header, nav, main, section, article, aside, address, и покажу, как их использовать.
На любой странице мы можем найти основной контент. Он будет отличаться от страницы к странице, но точно не будет повторяться. Например, как на сайте Smashing Magazine.
![Выделена область со списком статей](https://habrastorage.org/r/w1560/webt/au/p2/7m/aup27mmcfnzfwez255vuw9lir64.png)
![Выделена область с содержимом статьи](https://habrastorage.org/r/w1560/webt/pz/3a/mz/pz3amzlg6opjum5zpqasyjbt5l4.png)
На странице «Our Enchanting Smashing Articles» отображается список статей, а на странице «Growing UX Maturity: Finding A UX Champion And Demonstrating ROI (Part 1)» мы уже видим содержимое статьи.
На изображениях выделена одна область. Она называется основное содержимое или основной контент. Для ее разметки следует с помощью элемента main.
Кроме основного контента на странице могут существовать области, которые тематически связаны с ним. Они дополняют его. Их можно удалить со страницы, и понятность контента не пострадает.
Например, на сайте Lenta.ru на странице с новостью «Непобежденный Джошуа
научится хранить молодость у Роналду» есть блок «Материалы по теме».
![Блок материалы по теме вставлен в основной текст новости](https://habrastorage.org/r/w1560/webt/2i/6n/du/2i6nduento4aotw_5tn3ozaoik4.png)
Блок содержит статью о Криштиану Роналду, который упоминался в тексте основного контента. Так создается тематическая связь. Для такого блока лучше подойдет элемент aside.
Еще один пример для использования элемента aside — блок «Ссылки по теме». Почему? Потому что все ссылки тематически связаны с контентом.
![Список ссылок на другие новости](https://habrastorage.org/r/w1560/webt/mj/fm/fi/mjfmfife9xezt84u08fboxrm4rc.png)
Элемент section помогает нам выделить разделы страницы. Раздел в этом контексте — это тематически сгруппированная информация. Ее смысл определяется заголовком или другими словами «именем».
Лучше объясню на примерах. Рассмотрим блок «News» на сайте BBC.
![Блок с 3 новостями и заголовком](https://habrastorage.org/r/w1560/webt/xu/4z/gg/xu4zggcj-zxhmevv4emj-ij_d1o.png)
В первую очередь важно найти заголовок. Блок содержит текст «News». Он «дает имя» «News» для 3 новостей, находящихся рядом. Следовательно перед нами заголовок, а вся область — это раздел.
Следующий пример, блоки с информацией о тарифах на сайте Patreon.
![Блок описывающий три тарифа](https://habrastorage.org/r/w1560/webt/c8/jz/fa/c8jzfaczvei1lbzkyhdeeh2ckba.png)
Найду заголовок. В этом примере элементы «Lite», «Pro» и «Premium» являются заголовками. Почему?
Представим, что я с кем-то обсуждаю тарифы и скажу: «тариф Pro». Мой собеседник сразу поймет, о каком блоке я говорю, и какую информацию он содержит. Получается, что «тариф Pro» это «имя».
У нас есть заголовок и информация, как и в предыдущем примере. Размечаем их элементом section.
Последним пример мы рассмотрим на сайте PiterCSS. Здесь находится блок с информацией о докладе.
![Выделена краткая информация о докладе и докладчике](https://habrastorage.org/r/w1560/webt/2z/lz/5s/2zlz5ssyu-forfkksxvdn5_qmai.png)
Снова находим заголовок. Здесь это название доклада. Оно объединяет информацию о докладе и докладчике. Далее сгруппирую ее и заголовок элементом section.
Элементом article следует выделять на странице независимые области, которые можно вынести из своего логического окружения. Этот элемент часто путают с элементом section, поэтому я на примерах покажу разницу.
На сайте BBC Sport существует блок с турнирной таблицей второй лиги чемпионата Англии.
![Страница с новостями футбола. Таблица чемпионата Англии отображена сбоку](https://habrastorage.org/r/w780q1/webt/h8/vp/ds/h8vpds3q5gftjaxpryvvdjqkkiy.jpeg)
Теперь удалю всю окружающую информацию, кроме таблицы.
![На пустой странице отображается таблица](https://habrastorage.org/r/w780q1/webt/xz/tt/os/xzttosuxqqvgozxa3ph3zp5e_ou.jpeg)
Не смотря на то, что я удалил все на странице, я по-прежнему понимаю смысл блока. Это турнирная таблица второй лиги чемпионата Англии.
Таким способом я вынес элемент «турнирная таблица второй лиги чемпионата Англии» из своего логического окружения. И это никак не повлияло на него.
Теперь возьму блок с информацией о тарифе «Pro» на сайте Patreon и удалю все оставшиеся элементы.
![На пустой странице отображается блок с тарифом](https://habrastorage.org/r/w1560/webt/mw/ev/sz/mwevszqmm5wmdeepv7-9rc_c5-o.png)
Я понимаю, что это блок с информацией о тарифе «Pro». Отлично. Но это тариф какого продукта? Непонятно.
Получается, удаление блока из своего логического окружения повлияло на него. Я, как пользователь, перестал понимать, что мне делать с этим блоком. Если встроить его на другой сайт, то он будет выглядеть «чужеродным».
В этом кроется существенная разница между элементами section и article. Если элемент не «теряется» при удалении окружающего контекста, то его следует разметить элементом article. А если теряется, то перед нами элемент section.
Для выделения навигации на странице, нам следует использовать элемент nav. Но этого недостаточно. Часто нам требуется сгруппировать пункты с помощью списка. Для этой задачи подходят элементы ol и ul. Но как сделать выбор между ними?
Исходя из этого вопроса, я рассмотрю два типа навигации, а именно: навигацию со строгим порядком пунктов и нестрогим.
Популярным примером навигации, где порядок элементов строгий — это хлебные крошки на сайте Мвидео.
![Выделены пункты](https://habrastorage.org/r/w1560/webt/zz/no/sd/zznosdkx_oe2ppuqgafou2erd3k.png)
Почему я называю эту навигацию со строгим порядком пунктов? Если поменять пункты местами, то навигация перестает соответствовать структуре сайта.
Например, поменяю местами пункты «Главная» и «Смартфоны и связь».
Получилась ошибка. Мы должны перейти на главную страницу со страницы «Смартфоны и связь», а это невозможно. Основываясь на этом, я делаю вывод, что порядок пунктов важен. Для списка, содержащий строгий порядок элементов, нам следует использовать элемент ol.
Кроме хлебных крошек, к данному типу навигации можно отнести пагинацию.
![Выделены пункты один, два, три.](https://habrastorage.org/r/w1560/webt/gx/sr/4o/gxsr4osgjy_ovlvjjfxx2b7ldzk.png)
Примером такой навигации является меню на сайте Мвидео.
![Меню с пунктами](https://habrastorage.org/r/w1560/webt/9v/md/fw/9vmdfwobhh6odcu2khqzswdfqf8.png)
Снова поменяю пункты местами. Например, пункты «Все акции» и «Скидки до 80%» добавлю в конец списка:
Хорошо, пункты отображаются в другом порядке, и что? Навигация работает, как прежде. Получается, что изменение порядка пунктов не повлияло на работу навигации. Следовательно, здесь подходит элемент ul.
В интернете существует мнение, что элемент header следует использовать для разметки «шапки» сайта. Мне это определение совсем не нравится, потому что оно не отражает полностью картину.
Да, мы можем использовать элемент header для разметки «верхней» части сайта. Но также его разрешено добавлять внутрь элементов section, article, main, aside.
Когда мы вкладываем элемент header в элементы main, aside, section и article, то он начинает описывать вступительную информацию этого элемента.
Например, на сайте Smashing Magazine элемент header описывает введение для основного содержимого страницы, которое размечено элементом main.
![Выделен заголовок и вступление](https://habrastorage.org/r/w1560/webt/ro/ba/sg/robasgfbp3qagskjqvuwvdeqqmw.png)
Элемент группирует заголовок «Our Enchanting Smashing Articles» и вводный текст. Таким образом мы получаем введение к статьям, которые идут дальше.
В разделе с последними публикациями на главной странице Smashing Magazine элементом header можно объединить дату публикации, заголовок и имя автора публикации. В этом случае элемент header находится внутри элемента article.
![Блок с тремя статьями. Каждая содержит дату публикации, заголовок и имя автора](https://habrastorage.org/r/w1560/webt/bp/rf/nv/bprfnvudptmt3bp7f-geqyef_oc.png)
На сайте конференции PiterCSS элементом header можно объединить заголовок и текст с призывом стать спонсором, которые находятся внутри элемента section.
![Отображается заголовок раздела спонсоры и инструкция как стать спонсором](https://habrastorage.org/r/w1560/webt/u2/om/zr/u2omzryir2vnl5virkoftqnwnxc.png)
Кроме вступления к отдельным элементам, мы можем разметить его и для всего сайта в целом. Для этого нам требуется вложить элемент header в элемент body.
Например, как на сайте Smashing Magazine, где элементы header объединены логотип, навигация и поиск.
![Перед контентом страницы отображается блок с логотипом сайта, навигацией и поиском](https://habrastorage.org/r/w1560/webt/jk/tg/tv/jktgtvbfmwtcqwclg9ocxslrr1s.png)
В общем случае, мы спокойно можем использовать элемент header, когда нам требуется разметить «введение» к контенту либо элемента body, либо элементов main, aside, section и article.
Мне кажется, что элемент footer собрат по несчастью элемента header. Если второй советуют использовать для «шапки», то первый для «подвала».
Элемент footer подходит для разметки второстепенной информации, которая относится к связанному с ним контенту. Обычно он следует после контента блока, но это не обязательное условие. Его можно добавить перед контентом.
Как в случае с элементом header, элемент footer можно использовать в нескольких вариантах.
На сайте tutsPlus элементом footer группируют информацию об авторе, дату и категорию публикации. В этом случае элемент footer находится внутри элемента article.
![Раздел с тремя публикациями. Каждая содержит заголовок, описание, имя автора, дату публикацию и категорию](https://habrastorage.org/r/w1560/webt/yy/-i/ze/yy-izel0xgitvfsrsy_gj05g72i.png)
Как я сказал выше, второстепенная информация существует также и для сайта в целом. В этом случае данная область должна повторяться на всех страницах.
Например, на сайте Smashing Magazine в элементе footer отображаются хештеги, второстепенная навигация.
![После основного контента страница идет блок с хештегами и навигацией](https://habrastorage.org/r/w1560/webt/aa/yc/9h/aayc9hcpagw3r6rfhf65t4yfjyq.png)
По моим наблюдениям данный элемент является одним из наиболее неиспользуемых. Хотя контактная информация есть на каждом сайте. С помощью элемента address можно разметить адрес, телефон, ссылки на соц. сети, итп.
Например, на сайте Мвидео элементом address следует разметить блок с телефоном и соц.сетями.
![](https://habrastorage.org/r/w1560/webt/pe/en/pq/peenpqodczsy_ixlvwtylwahbru.png)
Я надеюсь, что мне удалось хотя немного показать разнообразие случаев, когда мы можем использовать различные HTML-элементы. Надеюсь, вы попробуйте использовать этот набор элементов в своих проектах.
Если вам понравилось, то, пожалуйста, используйте элемент address. Мне кажется, он незаслуженно забыт. Также для тех, кто хочет спросить «Зачем это надо?», у меня один ответ — просто прикольно.
Обновление от 18.03.2021: А если хочется серьезного ответа, то Вадим Макеев рассказал его в докладе «Семантика для циников»
Для исправления этой ситуации я взял следующие элементы: header, nav, main, section, article, aside, address, и покажу, как их использовать.
Основной контент страницы и элемент main
На любой странице мы можем найти основной контент. Он будет отличаться от страницы к странице, но точно не будет повторяться. Например, как на сайте Smashing Magazine.
![Выделена область со списком статей](https://habrastorage.org/webt/au/p2/7m/aup27mmcfnzfwez255vuw9lir64.png)
![Выделена область с содержимом статьи](https://habrastorage.org/webt/pz/3a/mz/pz3amzlg6opjum5zpqasyjbt5l4.png)
На странице «Our Enchanting Smashing Articles» отображается список статей, а на странице «Growing UX Maturity: Finding A UX Champion And Demonstrating ROI (Part 1)» мы уже видим содержимое статьи.
На изображениях выделена одна область. Она называется основное содержимое или основной контент. Для ее разметки следует с помощью элемента main.
Дополнительный контент к основному и элемент aside
Кроме основного контента на странице могут существовать области, которые тематически связаны с ним. Они дополняют его. Их можно удалить со страницы, и понятность контента не пострадает.
Например, на сайте Lenta.ru на странице с новостью «Непобежденный Джошуа
научится хранить молодость у Роналду» есть блок «Материалы по теме».
![Блок материалы по теме вставлен в основной текст новости](https://habrastorage.org/webt/2i/6n/du/2i6nduento4aotw_5tn3ozaoik4.png)
Блок содержит статью о Криштиану Роналду, который упоминался в тексте основного контента. Так создается тематическая связь. Для такого блока лучше подойдет элемент aside.
Еще один пример для использования элемента aside — блок «Ссылки по теме». Почему? Потому что все ссылки тематически связаны с контентом.
![Список ссылок на другие новости](https://habrastorage.org/webt/mj/fm/fi/mjfmfife9xezt84u08fboxrm4rc.png)
Тематически сгруппированный контент и элемент section
Элемент section помогает нам выделить разделы страницы. Раздел в этом контексте — это тематически сгруппированная информация. Ее смысл определяется заголовком или другими словами «именем».
Лучше объясню на примерах. Рассмотрим блок «News» на сайте BBC.
![Блок с 3 новостями и заголовком](https://habrastorage.org/webt/xu/4z/gg/xu4zggcj-zxhmevv4emj-ij_d1o.png)
В первую очередь важно найти заголовок. Блок содержит текст «News». Он «дает имя» «News» для 3 новостей, находящихся рядом. Следовательно перед нами заголовок, а вся область — это раздел.
Следующий пример, блоки с информацией о тарифах на сайте Patreon.
![Блок описывающий три тарифа](https://habrastorage.org/webt/c8/jz/fa/c8jzfaczvei1lbzkyhdeeh2ckba.png)
Найду заголовок. В этом примере элементы «Lite», «Pro» и «Premium» являются заголовками. Почему?
Представим, что я с кем-то обсуждаю тарифы и скажу: «тариф Pro». Мой собеседник сразу поймет, о каком блоке я говорю, и какую информацию он содержит. Получается, что «тариф Pro» это «имя».
У нас есть заголовок и информация, как и в предыдущем примере. Размечаем их элементом section.
Последним пример мы рассмотрим на сайте PiterCSS. Здесь находится блок с информацией о докладе.
![Выделена краткая информация о докладе и докладчике](https://habrastorage.org/webt/2z/lz/5s/2zlz5ssyu-forfkksxvdn5_qmai.png)
Снова находим заголовок. Здесь это название доклада. Оно объединяет информацию о докладе и докладчике. Далее сгруппирую ее и заголовок элементом section.
Независимые области страницы и элемент article
Элементом article следует выделять на странице независимые области, которые можно вынести из своего логического окружения. Этот элемент часто путают с элементом section, поэтому я на примерах покажу разницу.
На сайте BBC Sport существует блок с турнирной таблицей второй лиги чемпионата Англии.
![Страница с новостями футбола. Таблица чемпионата Англии отображена сбоку](https://habrastorage.org/webt/h8/vp/ds/h8vpds3q5gftjaxpryvvdjqkkiy.jpeg)
Теперь удалю всю окружающую информацию, кроме таблицы.
![На пустой странице отображается таблица](https://habrastorage.org/webt/xz/tt/os/xzttosuxqqvgozxa3ph3zp5e_ou.jpeg)
Не смотря на то, что я удалил все на странице, я по-прежнему понимаю смысл блока. Это турнирная таблица второй лиги чемпионата Англии.
Таким способом я вынес элемент «турнирная таблица второй лиги чемпионата Англии» из своего логического окружения. И это никак не повлияло на него.
Теперь возьму блок с информацией о тарифе «Pro» на сайте Patreon и удалю все оставшиеся элементы.
![На пустой странице отображается блок с тарифом](https://habrastorage.org/webt/mw/ev/sz/mwevszqmm5wmdeepv7-9rc_c5-o.png)
Я понимаю, что это блок с информацией о тарифе «Pro». Отлично. Но это тариф какого продукта? Непонятно.
Получается, удаление блока из своего логического окружения повлияло на него. Я, как пользователь, перестал понимать, что мне делать с этим блоком. Если встроить его на другой сайт, то он будет выглядеть «чужеродным».
В этом кроется существенная разница между элементами section и article. Если элемент не «теряется» при удалении окружающего контекста, то его следует разметить элементом article. А если теряется, то перед нами элемент section.
Навигация и элемент nav вместе с элементами ol и ul
Для выделения навигации на странице, нам следует использовать элемент nav. Но этого недостаточно. Часто нам требуется сгруппировать пункты с помощью списка. Для этой задачи подходят элементы ol и ul. Но как сделать выбор между ними?
Исходя из этого вопроса, я рассмотрю два типа навигации, а именно: навигацию со строгим порядком пунктов и нестрогим.
Строгий порядок пунктов и элемент nav вместе с ol
Популярным примером навигации, где порядок элементов строгий — это хлебные крошки на сайте Мвидео.
![Выделены пункты](https://habrastorage.org/webt/zz/no/sd/zznosdkx_oe2ppuqgafou2erd3k.png)
Почему я называю эту навигацию со строгим порядком пунктов? Если поменять пункты местами, то навигация перестает соответствовать структуре сайта.
Например, поменяю местами пункты «Главная» и «Смартфоны и связь».
- Смартфоны и связь
- Главная
- Смартфоны
- iPhone
Получилась ошибка. Мы должны перейти на главную страницу со страницы «Смартфоны и связь», а это невозможно. Основываясь на этом, я делаю вывод, что порядок пунктов важен. Для списка, содержащий строгий порядок элементов, нам следует использовать элемент ol.
Кроме хлебных крошек, к данному типу навигации можно отнести пагинацию.
![Выделены пункты один, два, три.](https://habrastorage.org/webt/gx/sr/4o/gxsr4osgjy_ovlvjjfxx2b7ldzk.png)
Нестрогий порядок пунктов и элемент nav вместе с ul
Примером такой навигации является меню на сайте Мвидео.
![Меню с пунктами](https://habrastorage.org/webt/9v/md/fw/9vmdfwobhh6odcu2khqzswdfqf8.png)
Снова поменяю пункты местами. Например, пункты «Все акции» и «Скидки до 80%» добавлю в конец списка:
- Смартфоны
- Телевизоры
- Ноутбуки
- Холодильники
- Стиральные машины
- Умные решения
- Apple
- Все акции
- Скидки до 80%
Хорошо, пункты отображаются в другом порядке, и что? Навигация работает, как прежде. Получается, что изменение порядка пунктов не повлияло на работу навигации. Следовательно, здесь подходит элемент ul.
Введение к контенту и элемент header
В интернете существует мнение, что элемент header следует использовать для разметки «шапки» сайта. Мне это определение совсем не нравится, потому что оно не отражает полностью картину.
Да, мы можем использовать элемент header для разметки «верхней» части сайта. Но также его разрешено добавлять внутрь элементов section, article, main, aside.
Элемент header внутри элементов main, aside, section и article
Когда мы вкладываем элемент header в элементы main, aside, section и article, то он начинает описывать вступительную информацию этого элемента.
Например, на сайте Smashing Magazine элемент header описывает введение для основного содержимого страницы, которое размечено элементом main.
![Выделен заголовок и вступление](https://habrastorage.org/webt/ro/ba/sg/robasgfbp3qagskjqvuwvdeqqmw.png)
Элемент группирует заголовок «Our Enchanting Smashing Articles» и вводный текст. Таким образом мы получаем введение к статьям, которые идут дальше.
В разделе с последними публикациями на главной странице Smashing Magazine элементом header можно объединить дату публикации, заголовок и имя автора публикации. В этом случае элемент header находится внутри элемента article.
![Блок с тремя статьями. Каждая содержит дату публикации, заголовок и имя автора](https://habrastorage.org/webt/bp/rf/nv/bprfnvudptmt3bp7f-geqyef_oc.png)
На сайте конференции PiterCSS элементом header можно объединить заголовок и текст с призывом стать спонсором, которые находятся внутри элемента section.
![Отображается заголовок раздела спонсоры и инструкция как стать спонсором](https://habrastorage.org/webt/u2/om/zr/u2omzryir2vnl5virkoftqnwnxc.png)
Элемент header внутри элемента body
Кроме вступления к отдельным элементам, мы можем разметить его и для всего сайта в целом. Для этого нам требуется вложить элемент header в элемент body.
Например, как на сайте Smashing Magazine, где элементы header объединены логотип, навигация и поиск.
![Перед контентом страницы отображается блок с логотипом сайта, навигацией и поиском](https://habrastorage.org/webt/jk/tg/tv/jktgtvbfmwtcqwclg9ocxslrr1s.png)
В общем случае, мы спокойно можем использовать элемент header, когда нам требуется разметить «введение» к контенту либо элемента body, либо элементов main, aside, section и article.
Второстепенная информация и элемент footer
Мне кажется, что элемент footer собрат по несчастью элемента header. Если второй советуют использовать для «шапки», то первый для «подвала».
Элемент footer подходит для разметки второстепенной информации, которая относится к связанному с ним контенту. Обычно он следует после контента блока, но это не обязательное условие. Его можно добавить перед контентом.
Как в случае с элементом header, элемент footer можно использовать в нескольких вариантах.
Элемент footer внутри элементов article, aside и section
На сайте tutsPlus элементом footer группируют информацию об авторе, дату и категорию публикации. В этом случае элемент footer находится внутри элемента article.
![Раздел с тремя публикациями. Каждая содержит заголовок, описание, имя автора, дату публикацию и категорию](https://habrastorage.org/webt/yy/-i/ze/yy-izel0xgitvfsrsy_gj05g72i.png)
Элемент footer внутри элемента body
Как я сказал выше, второстепенная информация существует также и для сайта в целом. В этом случае данная область должна повторяться на всех страницах.
Например, на сайте Smashing Magazine в элементе footer отображаются хештеги, второстепенная навигация.
![После основного контента страница идет блок с хештегами и навигацией](https://habrastorage.org/webt/aa/yc/9h/aayc9hcpagw3r6rfhf65t4yfjyq.png)
Контактная информация и элемент address
По моим наблюдениям данный элемент является одним из наиболее неиспользуемых. Хотя контактная информация есть на каждом сайте. С помощью элемента address можно разметить адрес, телефон, ссылки на соц. сети, итп.
Например, на сайте Мвидео элементом address следует разметить блок с телефоном и соц.сетями.
![](https://habrastorage.org/webt/pe/en/pq/peenpqodczsy_ixlvwtylwahbru.png)
Заключение
Я надеюсь, что мне удалось хотя немного показать разнообразие случаев, когда мы можем использовать различные HTML-элементы. Надеюсь, вы попробуйте использовать этот набор элементов в своих проектах.
Если вам понравилось, то, пожалуйста, используйте элемент address. Мне кажется, он незаслуженно забыт. Также для тех, кто хочет спросить «Зачем это надо?», у меня один ответ — просто прикольно.
Обновление от 18.03.2021: А если хочется серьезного ответа, то Вадим Макеев рассказал его в докладе «Семантика для циников»