HTML5 новые тэги header, footer, nav, aside, section, article, hgroup
Поговорим о новых тэгах в HTML5.
И для начала рассмотрим наиболее глобальные: section, article, header, footer, nav, aside и hgroup.
HTML5 во многом более семантически правильный стандарт.
Отдельные характерные части веб-сайта названы, наконец, своими унифицированными именами, дабы в дальнейшем не возникало никакой путаницы: header — верхняя секция сайта, footer — нижняя, nav — блок навигации и т.д. По сути, это избавляет от необходимости использовать нейтральный тэг DIV для обозначения данных частей сайта.
Можно, например, типичную запись:
<div id="header"> <h1><a href="http://www.examplesite.com/">Самый сайт</a></h1> </div>
переписать по-новому так:
<header> <h1><a href="http://www.examplesite.com/">Самый сайт</a></h1> </header>
И в файле стилей CSS соответственно прописать набор правил непосредственно для тэга header.
Однако в этом есть одна закавыка. Дело в том, что большинство браузеров пока еще не знают, что эти новые тэги являются блочными элементами и считают их строковыми, как те же тэги ссылок <a> или картинок <img>, например. Поэтому в файле стилей CSS для таких тэгов необходимо принудительно прописывать их блочный характер:
header, footer, nav, article {display: block;}
Если с семантикой тэгов header, footer все более менее понятно, то остальные тэги стоит рассмотреть более внимательно.
nav — служит для создания панели навигации. На странице этих элементов может быть несколько. Например, блок ссылок на основные страницы сайта и блок навигации по рубрикам.
aside — является объединяющим тэгом, более всего подходящим для выделения сайдбара. В него могут входить как блоки nav, так и другие элементы, не являющиеся по-сути навигационными (рекламные баннеры, фотография автора и информация о нем, кнопки социалок и пузомерки и т.д.).
section — также объединяющий тэг. Причем он может выступать в разных ролях: либо разделять страницу на несколько тематических областей (например, выделить и, тем самым, обособить от шапки и подвала центральную часть с контентом и сайдбаром), либо разделять на отдельные секции (читай параграфы) непосредственно статью на странице.
article — служит для разбивки страницы на отдельные статьи.
Оба тэга section и article обладают рядом интересных особенностей. Например, вы можете теперь смело использовать заголовок первого уровня H1 на одной странице несколько раз, что ранее было недопустимо. Кроме того, тэг section может быть как родительским элементом для article, так и разделять саму статью article на несколько секций. Т.е. вполне возможна такая конструкция:
<section> <article> <section></section> <section></section> </article> <article> <section></section> <section></section> </article> </section>
hgroup — тэг призван группировать заголовки страницы в одну логическую единицу. Например, главный заголовок всей страницы H1 и описание к ней, оформленное тэгом H3. На странице в дальнейшем еще несколько раз могут использоваться тэги H3 для других целей. Чтобы логически отделить описание страницы от других тэгов H3, мы его объединяем с главным тэгом H1 в группу, которая и обозначается тэгом hgroup:
<hgroup> <h1>Самый сайт</h1> <h3>Здесь описание Самого сайта</h3> </hgroup>
Created/Updated: 25.05.2018