Семантические элементы в HTML5 доступно описывают свой смысл и назначение как для браузеров так и для разработчиков. Ранее, до HTML5, вся разметка страницы строилась на элементе <div> с присвоенными ему классами и идентификаторами. Классы и идентификаторы присваивались для настройки отображения элемента на веб-странице. В HTML5 появились совершенно новые семантические элементы. Они позволяют более понятно структурировать контент, выполнить его группировку. А так же позволяют размечать текстовое содержимое страницы...
Раньше, до обновления HTML 5, разработчикам приходилось совмещать табличную верстку с «дивным кодом». Нужен раздел контента на вашей домашней странице? Завернуть в div! Создание боковой панели? Используйте div! Компоновка в три колонки? Див, див, див! Нет ничего функционально неправильного в написании HTML таким образом. Браузеры по-прежнему смогут отображать вашу разметку и отображать ваш контент для пользователей. Основная проблема с интенсивным использованием <div> тегов заключается в том, что им не хватает семантического значения...