Коли останнього разу ми отримували новий елемент? HTML5 представила лише дев'ять нових структурних тегів, і вони є стабільними вже протягом декількох років: section, article, aside, hgroup, header, footer, nav, figure і figcaption. Є ще близько 20 контентних елементів: video, audio, canvas, progress та інші.
Не так давно з'явився новий елемент для вивчення та використання: main. Зі W3C специфікації:
Елемент main використовується для виділення основного змісту тіла документа або додатку, тобто для визначення зони з контентом, який безпосередньо пов'язаний або доповнює центральну тему документу або основну функціональність додатку.
Автори повинні додавати не більше одного головного елемента в документі.
Автори не повинні включати main як дочірній елемент article, aside, footer, header або nav.
main маркує основний вміст сторінки. Ви, ймовірно, будете використовувати елемент там, де раніше ви використовували контентну обгортку. Тобто відбувається заміна таких тегів, як div id="main", div id="page"; або div id="wrapper". Якщо ви використовуєте ARIA, то ви можете використовувати main для елементів, визначених як role="main".
<meta charset="UTF-8">
<title>Using main</title>
<header>My page</header>
<nav>
<a href="#">Home</a>
</nav>
<main>
<article>
<h1>My article</h1>
<p>Content</p>
</article>
<aside>
<p>More information</p>
</aside>
</main>
<footer>Copyright 2013</footer>
Браузерна підтримка
Не дивлячись, що тег більш-менш новий, більшість браузерів підтримують його. Однак, вам потрібно буде застосувати display: block в CSS.
main
{
display: block
}
Проте, з часом це може стати непотрібним, так як браузери розвиваються (main підтримується в Chrome і Firefox). Елемент додано до html5shiv, так що він буде працювати в IE6, 7 і 8. Вам, можливо, буде потрібно завантажити нову версію, якщо ви використовуєте локальний файл.
Ще немає коментарів