Сьогодні поговоримо про нові тегах в HTML5. І для початку розглянемо найбільш глобальні: section, article, header, footer, nav, aside і hgroup.
Як вже зазначалося раніше, HTML5 багато в чому більш семантично правильний стандарт. Окремі характерні частини веб-сайту названі, нарешті, своїми уніфікованими іменами, щоб в подальшому не виникало ніякої плутанини: header - верхня секція сайту, footer - нижня, nav - блок навігації і т.д. По суті, це позбавляє від необхідності використовувати нейтральний тег DIV для позначення даних частин сайту.
Можна, наприклад, типову запис:
переписати по-новому так:
І в файлі стилів CSS відповідно прописати набір правил безпосередньо для тега header.
Однак в цьому є одна заковика. Справа в тому, що більшість браузерів поки ще не знають, що ці нові теги є блоковими елементами і вважають їх строковими, як ті ж теги посилань або картинок , наприклад. Тому в файлі стилів CSS для таких тегів необхідно примусово прописувати їх блоковий характер:
header, footer, nav, article
Окей! Якщо з семантикою тегів header, footer все більш менш зрозуміло, то інші теги варто розглянути більш уважно.
nav - служить для створення панелі навігації. На сторінці цих елементів може бути кілька. Наприклад, блок посилань на основні сторінки сайту і блок навігації по рубриках.
section - також об'єднує тег. Причому він може виступати в різних ролях: або розділяти сторінку на кілька тематичних областей (наприклад, виділити і, тим самим, відокремити від шапки і підвалу центральну частину з контентом і сайдбарі), або розділяти на окремі секції (читай параграфи) безпосередньо статтю на сторінці .
article - служить для розбиття сторінки на окремі статті.
Обидва тега section і article мають ряд цікавих особливостей. Наприклад, ви можете тепер сміливо використовувати заголовок першого рівня H1 на одній сторінці кілька разів, що раніше було неприпустимо. Крім того, тег section може бути як батьківським елементом для article, так і розділяти саму статтю article на кілька секцій. Тобто цілком можлива така конструкція:
hgroup - тег покликаний групувати заголовки сторінки в одну логічну одиницю. Наприклад, головний заголовок всієї сторінки H1 і опис до неї, оформлене тегом H3. На сторінці в подальшому ще кілька разів можуть використовуватися теги H3 для інших цілей. Щоб логічно відокремити опис сторінки від інших тегів H3, ми його об'єднуємо з головним тегом H1 в групу, яка і позначається тегом hgroup:
Тут опис Самого сайту
main - являє собою основний вміст документа, або інакше - основний контент. Відмінність цього тега від старого доброго body в тому, що body включає ВСЕ вміст сторінки, тоді як main - основне, тобто унікальне.
Верстальники сайтів і раніше використовували для виділення блоку з основним контентом тег div з ідентифікатором типу main або content. Мабуть творці HTML5 вирішили підтримати цю справу і придумали такий ось новий тег main. В силу того, що він повинен містити тільки унікальний контент, сюди не входять ні шапка сайту, ні сайдбар (и), ні підвал, ні взагалі що-небудь повторюється на сайті. Сказано - унікальний, значить унікальний!
Тег main не є структурним тегом і ніяк не впливає на розмітку сторінки. Він також не може входити до складу інших структурних тегів: article, aside, footer, header або nav в силу своєї унікальності. І так само, як і інші нові теги, він не сприймається браузерами, як блоковий елемент, тому це властивість йому потрібно задавати примусово в файлі CSS:
Приклад використання тега main:
Основне, унікальне вміст сторінки сайту.
Тег main був задуманий для всіляких програм-скрінрідеров, щоб люди з поганим зором могли знати, що на сторінці сайту є основним вмістом.
З унікальності тега main слід, що використовувати його на сайті досить складно. Ну, самі уявіть собі такий сайт, де на кожній сторінці потрібно виділити унікальну частину. Представили? Особисто я бачу лише простенький сайт-візитку на 5 - 6 сторінок, де вміст кожної сторінки унікально і не повторюється ніде більше на сайті.
А взяти, наприклад, будь-який блог на WordPress. Як виділити унікальне вміст, якщо на головної сторінки присутні анонси статей, в архіві теж є витримки? Яка вже тут унікальність! Хіба що на статичних сторінках типу «Про сайт» або «Контакти».
Так що не все, що з'являється нового в HTML5 насправді корисно, і не варто це відразу ж застосовувати необдумано.