HTML5 нові теги header, footer, nav, aside, section, article, hgroup

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>