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

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

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

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

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

Мнение W3C

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

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

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

Элемент MAIN

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

    
Заголовок
    
Основной текст

Элемент SECTION

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

    

        
Заголовок 1
        
Текст первого раздела
    
    

        
Заголовок 2
        
Текст второго раздела
    

Элемент ASIDE

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

    

        
Заголовок 1
        
Текст первого раздела
    
    

        
Заголовок 2
        
Текст второго раздела
        
    

Элемент ARTICLE

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

    

        
Заголовок 1
        
Текст первого раздела
    
    

        
Заголовок 2
        
Текст второго раздела
        
    
    

        
Заголовок статьи
        
Текст статьи
    

Элемент BLOCKQUOTE

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

    

        
Заголовок 1
        
Текст первого раздела
    
    

        
Заголовок 2
        
Текст второго раздела
        
    
    

        
Заголовок статьи
        
Текст статьи
    
    
"Внешняя цитата"
    Автор цитаты

Элемент NAV

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

    

        
Заголовок 1
        
Текст первого раздела
    
    

        
Заголовок 2
        
Текст второго раздела
        
    
    

        
Заголовок статьи
        
Текст статьи
    
    
"Внешняя цитата"
    Автор цитаты

Элемент footer

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

    

        
Заголовок 1
        
Текст первого раздела
    
    

        
Заголовок 2
        
Текст второго раздела
        
    
    

        
Заголовок статьи
        
Текст статьи
    
    
"Внешняя цитата"
    Автор цитаты

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

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