Ответ
HTML5 ввел множество семантических тегов для улучшения структуры и доступности документа:
Семантические теги:
<header>,<footer>- шапка и подвал<nav>- навигация<article>- независимый контент<section>- тематическая группа<aside>- боковая панель<main>- основное содержание<figure>,<figcaption>- медиа с подписью
Медиа теги:
<video>,<audio>- встроенное видео/аудио<canvas>- рисование<svg>- векторная графика
Формы:
<input>с новыми типами (date, email, range)<datalist>- автодополнение<progress>,<meter>- индикаторы
Пример структуры:
<header>
<nav>...</nav>
</header>
<main>
<article>
<section>...</section>
</article>
<aside>...</aside>
</main>
<footer>...</footer>Ответ 18+ 🔞
А, ну вот, HTML5 подъехал, понимаешь? Как будто старый HTML4 совсем охренел и решил: "Так, блядь, пора уже структуру навести, а то тут один сплошной <div> да <span>, нихуя не понятно, где что". И ввел эти ваши семантические теги, чтобы браузеры и поисковики не ебались в попытках понять, где у тебя навигация, а где основной контент.
Вот смотри, какие штуки появились, чтобы мозги не выносить:
Теги, которые наконец-то объясняют, что тут у нас:
<header>,<footer>— это типа шапка и подвал, не надо уже десять дивов с классомheaderгородить. Всё просто, как три копейки.<nav>— навигация, сука. Тыкаешь сюда менюшку, и все сразу понимают, что это не просто список ссылок, а именно навигация. Гениально, ёпта.<article>— для самостоятельной статьи, новости, поста в блоге. Независимый кусок контента, который можно выдернуть и он не потеряет смысла.<section>— это секция, тематическая группа. Раздел внутри статьи или просто логический блок на странице. Не путать с дивом, у него смысл есть!<aside>— боковая панель, сайдбар, дополнительная информация. Типа "кстати, а вот ещё".<main>— основное содержание страницы. Один на страницу, чтобы скринридеры не охуевали, где главное.<figure>с<figcaption>— картинка, диаграмма, код с подписью. Красота, а не жизнь. Раньше это всё в параграфы и дивы пихали, пиздец.
По медиа-части тоже не отстали:
<video>,<audio>— раньше надо было флеш впихивать, а теперь нативненько, прямо в браузере. Прогресс, блядь.<canvas>— холст для рисования всякой хуйни на JavaScript. Игры там, графики.<svg>— векторная графика прямо в разметке. Красота, масштабируется как хочешь, не как эти растровые картинки.
Формы стали умнее, наконец-то:
- У
<input>появились нормальные типы:date(календарик),email(сам проверяет почту),range(ползунок). Не надо велосипеды на JS городить для элементарщины. <datalist>— автодополнение для инпута. Удобно, ёбта.<progress>,<meter>— индикаторы прогресса загрузки или, например, уровня заряда. Раньше тоже дивами костыляли.
Вот смотри, как теперь нормальная страница выглядит, а не свалка дивов:
<header>
<nav>...менюшка тут...</nav>
</header>
<main>
<article>
<section>...первый раздел статьи...</section>
</article>
<aside>...реклама или что-то ещё...</aside>
</main>
<footer>...копирайты и контакты...</footer>Видишь? Чисто, понятно, структурно. И браузеру хорошо, и поисковику приятно, и ты сам через полгода, открыв свой же код, не будешь орать: "Какой мудак это писал? А, это я...". Вот за это HTML5 и уважаю, хоть мозги на место расставил в верстке.