Article

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 прописывать его свойства.
Проще ведь сверстать всё одними тегами, например дивами.
Собственно те же претензии к футерам с артиклями на мейнах.

Спасибо за вопрос! Подробный ответ здесь. Если одним словом, то это — семантика. Из-за того, что устройств для отображения стало больше, чем просто монитор настольного компа, то приходится учитывать это обстоятельство и как-то все упорядочивать. Вот семантика как раз для этого и предназначена.

Благодарю за помощь, ответ в статье найден.
«семантика помогает поисковым системам быстрее и точнее находить на сайте полезное содержимое» Поясню. Структура семантических тегов не годится для автоматического выравнивания частей сайта на разных экранах. Разные части страницы не путаются на маленьких экранах, проблема в их содержимом, которое имеет свойство искажаться на маленьком экране. От того что сайт будет открыт на маленьком экране шапка не уедет в подвал. Ни разу с таким не сталкивался. Зато текст на резиновой вёрстке в столбик превращался, жёстко заданные картинки фоны за границы экрана уезжали или обрезались. То есть надо создавать инфраструктуру свойств файла цсс, которые будут автоматически форматировать содержимое.
В результате ответ один, новые теги придумали для того, что бы легче автоматически собирать содержимое сайтов. Это плохо для всех сайтов. Для публичных интересно выдать в поисковик только положительные сведения о себе в правильном, с точки зрения рекламы, виде. То есть если поисковики жёстко заработают на этих тегах, то очень скоро отзывы будут иметь тег навигации, каждое ключевое слово в небольшом тексте будет выделено арткилем и прочие подобные ухищрения. Про частные сайты, для ограниченного круга лиц, вообще не должны иметь таких тегов, что бы не светиться в поисковой системе.

Источник

Article, Section, and Aside

HTML offers some semantic tags that help add meaning to our content. Whenever possible use these tags to help search engines and browsers understand the structure of your page. Let’s look at some of these semantic tags like article , section , aside , header , nav and footer .

Articles and Sections

They still make these, right?

You can think of an article as standalone content. Like in articles you might see in a newspaper, articles will ideally contain sections like introductions, the main content, and then perhaps a footer with some closing notes. You can also think of an article as a collection of sections. For example, you might have an article that contains a section for the introduction, a section for the main content, and a section for the closing notes.

      
Article heading 
Hello there!
 
 
This is the main content
 
 
Good-bye!
 
 
   

As you can probably tell, section tags are used to split up the article into smaller, more cohesive parts. section tags act like div tags in that they’re both blocks, but section tells the browser that whatever is inside is just a piece of the larger puzzle.

We used section tags for headers and footers, but there are actually tags made specifically for this.

Header and Footer tags

      
 
Article heading
 
Hello there!
 
 
This is the main content
 
  
   

The header tag defines the header of an article or section, while the footer tag defines the footer.

Asides

If you find yourself wanting to go into a bit of detail about the topic at hand, like for example a quick little snippet, use the aside tag. It’s a little bit like a section tag, but it’s not a block.

 
Article heading
 
Hello there!
  
This is the main content