Главная мысль
Семантические теги описывают смысл блока, а не только внешний вид. Это помогает браузерам, поисковикам и вспомогательным технологиям понять структуру страницы.
Примеры
Тег Смысл headerшапка страницы/секции navосновная навигация mainглавный контент (обычно один) articleсамостоятельный материал sectionтематический раздел asideпобочный контент footerподвал страницы/секции
<body >
<header > ...</header >
<nav > ...</nav >
<main >
<article >
<h1 > Заголовок</h1 >
<section > ...</section >
</article >
</main >
<footer > ...</footer >
</body > Итог
Семантика улучшает a11y, SEO и поддерживаемость. div/span оставляют там, где смысла нет или он уже задан ARIA/родителем.
HTML · junior · сложность 3