Давным-давно, создавая разметку для очередного HTML-документа, я получал весьма замысловатые структуры, которые более опытные разработчики называли не иначе, как “div суп”.

Нужен раздел с контентом? Оберни его в div!

Сайдбар? Конечно div!

Вывести текст в три колонки? div, div, div!

И в таком подходе нет никакой функциональной ошибки с точки зрения HTML. Браузеры будут корректно воспринимать такую верстку и выводить контент пользователям. Главная проблема частого использования div - отсутствие семантического значения. Семантический подход к верстке означает создание верстки, имеющей смысловое значение. Зачем это нужно? Например, для того, чтобы оптимизировать SEO, и упростить отладку.

Мнение W3C

Элемент div не имеет никакого смыслового значения. Поэтому рекомендуется использовать div, как элемент последней инстанции, в случаях, когда отсутствуют другие подходящие элементы. Использование вместо div семантически верных элементов повышает доступность контента для пользователей и упрощает поддержку ресурсов для разработчиков.

О каких “подходящих элементах” говорит W3C. После релиза HTML5 в 2014 году, было объявлено несколько новых тегов для групп и разделов, улучшающих смысловое значение разметки.

Давайт рассмотрим некоторые из них.

Элемент MAIN

Элемент main является оберткой для основного контента страницы. Присутствует на странице всегда в единственном числе. Облечает доступ к контенту с помощью “горячих” клавиш, обеспечивает корректный зум на мобильных устройствах.

<!-- контент -->

<main>
    <h1>Заголовок</h1>
    <p>Основной текст</p>
</main>

<!-- контент -->

Элемент SECTION

Элемент section нужен для группировки контента по теме, может иметь собственный header и footer. На одной странице может быть неколько элементов section.

<!-- контент -->

<main>

    <section>
        <h1>Заголовок 1</h1>
        <p>Текст первого раздела</p>    
    </section>
    
    <section>
        <h1>Заголовок 2</h1>
        <p>Текст второго раздела</p>
    </section>

</main>

<!-- контент -->

Элемент ASIDE

Элемент aside представляет собой раздел, содержимое которого имеет только косвенное отношение к основному контенту. Обычно aside используется для боковой панели (сайдбара).

<!-- контент -->

<main>

    <section>
        <h1>Заголовок 1</h1>
        <p>Текст первого раздела</p>    
    </section>
    
    <section>
        <h1>Заголовок 2</h1>
        <p>Текст второго раздела</p>

        <aside>
            <p>Косвенный текст 1</p>
            <p>Косвенный текст 2</p>
            <p>Косвенный текст 3</p>
        </aside>
    </section>    

</main>

<!-- контент -->

Элемент ARTICLE

Элемент article используется для контента, который может существовать самостоятельно. Например, пост, статья, комментарий.

<!-- контент -->

<main>

    <section>
        <h1>Заголовок 1</h1>
        <p>Текст первого раздела</p>    
    </section>
    
    <section>
        <h1>Заголовок 2</h1>
        <p>Текст второго раздела</p>

        <aside>
            <p>Косвенный текст 1</p>
            <p>Косвенный текст 2</p>
            <p>Косвенный текст 3</p>
        </aside>
    </section>
    
    <article>
        <h1>Заголовок статьи</h1>
        <p>Текст статьи</p>
    </article>

</main>

<!-- контент -->

Элемент BLOCKQUOTE

Элемент blockquote нужен для цитирования текста из внешних источников. Часто используется в сочетании с элементом cite, указывающим на источник цитирования.

<!-- контент -->

<main>

    <section>
        <h1>Заголовок 1</h1>
        <p>Текст первого раздела</p>    
    </section>
    
    <section>
        <h1>Заголовок 2</h1>
        <p>Текст второго раздела</p>

        <aside>
            <p>Косвенный текст 1</p>
            <p>Косвенный текст 2</p>
            <p>Косвенный текст 3</p>
        </aside>
    </section>
    
    <article>
        <h1>Заголовок статьи</h1>
        <p>Текст статьи</p>
    </article>

    <blockquote>"Внешняя цитата"</blockquote>
    <cite>Автор цитаты</cite>

</main>

<!-- контент -->

Элемент NAV

Исходя из названия, элемент nav представляет раздел навигации - главное меню для страницы, приложения.

<!-- контент -->

<nav>
    <ul>
        <li>Пункт меню 1</li>
        <li>Пункт меню 2</li>
    </ul>
</nav> 

<main>

    <section>
        <h1>Заголовок 1</h1>
        <p>Текст первого раздела</p>    
    </section>
    
    <section>
        <h1>Заголовок 2</h1>
        <p>Текст второго раздела</p>

        <aside>
            <p>Косвенный текст 1</p>
            <p>Косвенный текст 2</p>
            <p>Косвенный текст 3</p>
        </aside>
    </section>
    
    <article>
        <h1>Заголовок статьи</h1>
        <p>Текст статьи</p>
    </article>

    <blockquote>"Внешняя цитата"</blockquote>
    <cite>Автор цитаты</cite>

</main>

<!-- контент -->

Элемент footer

Элемент footer определяет подвал страницы. Для большинства сайтов этот элемент содержит контактную информацию, копирайт, ссылки на социальные сети, дублирующее меню.

<!-- контент -->

<nav>
    <ul>
        <li>Пункт меню 1</li>
        <li>Пункт меню 2</li>
    </ul>
</nav> 

<main>

    <section>
        <h1>Заголовок 1</h1>
        <p>Текст первого раздела</p>    
    </section>
    
    <section>
        <h1>Заголовок 2</h1>
        <p>Текст второго раздела</p>

        <aside>
            <p>Косвенный текст 1</p>
            <p>Косвенный текст 2</p>
            <p>Косвенный текст 3</p>
        </aside>
    </section>
    
    <article>
        <h1>Заголовок статьи</h1>
        <p>Текст статьи</p>
    </article>

    <blockquote>"Внешняя цитата"</blockquote>
    <cite>Автор цитаты</cite>

</main>

<footer>
    <p>Копирайт</p>
    <a href="https://facebook.com/somename">Ссылка на facebook</a>
    <a href="https://vk.com/somename">Ссылка на vk</a>
</footer>

<!-- контент -->

На этом все, мы освежили знания о неккоторых альтернативах элемента div в соответствии с требованиями семантической верстки, исползуемой в HTML5.

Спасибо за внимание.