HTML 5 потихонечку вливается в жизнь верстальщиков, но многие продолжают пользоваться привычными тегами и классами. Пора забыть о разметке страниц тегами <div class= «header» >, <div class= «footer» > и начать использовать новые теги, появившиеся в HTML5.
Зачем использовать теги HTML 5 для верстки основных блоков
1. Это уменьшает общее количество кода;
2. Это упрощает работу с CSS, облегчает классификацию элементов и их свойств;
3. Это улучшает понимание кода поисковыми роботами;
4. Это хороший тон в современной верстке.
Какие HTML5-теги можно использовать для разметки основных блоков страницы
<header> — шапка сайта, а также заголовок страницы, статей и других материалов сайта. Таких блоков на странице может быть несколько.
<nav> — навигация по сайту. Обязательно заключать в этот тег главное меню, желательно — любую другую навигацию на сайте.
<aside> — сайдбар, список рубрик, облако тегов.
<section> — раздел документа. Этот тег может использоваться несколько раз внутри одной статьи представляя её разделы. Также <section> может и должен содержать заголовки <H2> или <H3>
<article> — обозначение новости, статьи, поста.
<time> — помечает текст внутри себя, как дату. Данный тег обязателен для новостных ресурсов и желателен для тех материалов, актуальность которых привязана к конкретному времени.
<figure> — блок, содержащий изображение, его заголовок, подпись и др.
<figcaption> — тег описывающий изображение, комментарий к картинке. Располагается внутри тега <figure>, должен быть первым или последним элементов в блоке.
<footer> — подвал сайта, самый низ страницы, обычно включается в себя: имя автора, дату создания ресурса, контактную и правовую информацию.