В новой версии HTML5 немало новых элементов. Большая часть их семантические. Старые элементы пересмотрены, другие признаны устаревшими. Многие были перенесены из предыдущей версии. Удалили презентационные элементы, добавили встроенные и элементы форм.
Селекционирующие элементы
Корневым является тег <body>. Элементы <address> заголовки от <h1> до <h6> были еще в четвертой версии. В пятой добавили:
- section;
- article;
- nav;
- aside;
- header;
- footer.
Есть поддержка старых секционирующих элементов:
- body;
- h1–h6;
- address.
Новые элементы заключают контент, формируют заголовки и колонтитулы. <footer>, <aside> и <nav> - это не замена<div>, а семантическая альтернатива.
У каждого секционирующего элемента есть потенциал для собственной структуры. В нем располагают запись блога с собственным заголовком и «подвалом».
<section>
Элемент используется для группирования контента по темам с помощью заголовка. <section> - раздел приложения или базовый документ. При этом он может быть базовым контейнерным элементом или иметь семантическое значение.
Если группировка нужна только для оформления, воспользуйтесь <div>.
<article>
Похож на предыдущий. Обладает самодостаточной композицией и предназначен для независимого распространения или многократного использования. Компонент стал заменой логическому атрибуту pubdate.
Если контент отличается самостоятельностью, следует применять именно <article>, а не <section>. Вся разница между кодами в том, что элемент <section> уместен, когда его содержимое четко вписывается в структуру как подраздел.
<nav>
Используют для создания больших навигационных блоков с гиперссылками на другие страницы сайта или разделы. Туда можно поместить навигационные панели и раскрывающиеся меню. Небольшие ссылки ставятся в нижнем колонтитуле страницы в элементе <footer>. Внутри мжно сделать вложение <nav>, которое подсказывает слабовидящим, что здесь есть оглавление.
<aside>
Содержит контент, относящийся к основной информации косвенно. Нужен для акцента на содержимом. Не считается частью основного контента. Ограничен довольно четко от основного контента. Применяется для типографских эффектов, цитат, рекламных блоков и группировки навигационных элементов.
<header>
В нем обычно группируют вспомогательную и вводную информацию. Содержит заголовок раздела.
Компонент применяют как составную часть любого обычного заголовка. На странице может быть несколько таких: основной для заголовка всего документа. Он венчает лого, название сайта, учетной записи и главную навигационную панель.
<header> может быть для каждого блока <article>, а не <section>.
<footer>
Включает второстепенную информацию о тех разделе или статье, к которым относится: имя автора, ссылки на связанные документы и т.д. В документе может быть несколько <footer>.
Один – общий нижний колонтитул, остальные заточены под блоки с <article>, а не <section>.
Каждый <footer> ассоциируется с ближайшим предком. Это <article>, <section> или <body>. Он заменяет распространенный ранее код <div id="footer">.