Заголовок статьи
Текст статьи...
Семантические теги
Семантические теги (от греч. σημαντικός — «обозначающий») помогают браузеру, поисковикам и разработчикам понять структуру страницы. Они не добавляют нового визуального оформления, но делают код понятным.
1. Зачем нужны семантические теги?
Раньше все блоки делали через <div> с классами. Это работало, но ни браузер, ни поисковик не понимали, где шапка, где меню, где основное содержание. Семантические теги решают эту проблему.
📌 Семантические теги не меняют внешний вид. Они нужны для структуры и доступности.
2. <header> — шапка страницы или раздела
Обычно содержит логотип, заголовок, навигацию.
<header>
<h1>Мой сайт</h1>
<p>Описание сайта</p>
</header>Как это выглядит в браузере:
Мой сайт
Описание сайта
3. <nav> — блок навигации
Содержит ссылки на другие страницы или разделы.
<nav>
<a href="/">Главная</a>
<a href="/about">О нас</a>
<a href="/contacts">Контакты</a>
</nav>Как это выглядит в браузере:
4. <main> — основное содержание страницы
Уникальный контент страницы (не повторяющийся на других страницах). Должен быть один на странице.
<main>
<h2>Последние новости</h2>
<p>Текст новости...</p>
</main>5. <article> — самостоятельная единица контента
Статья, пост блога, новость, комментарий. Такой контент можно переиспользовать на других сайтах.
<article>
<h3>Заголовок статьи</h3>
<p>Текст статьи...</p>
</article>Как это выглядит в браузере:
6. <section> — логический раздел страницы
Группирует связанный контент. Обычно имеет свой заголовок.
<section>
<h2>Наши услуги</h2>
<p>Описание услуг...</p>
</section>
📌 Разница между
<article> и <section>: <article> — самодостаточный контент, <section> — часть страницы. На практике их часто путают, но для начала это не критично.
7. <aside> — побочный контент
Боковая панель, реклама, виджеты, ссылки по теме — то, что не является основным.
<aside>
<h4>Реклама</h4>
<p>Купите наш курс</p>
</aside>8. <footer> — подвал страницы или раздела
Авторские права, контакты, ссылки на политику конфиденциальности.
<footer>
<p>© 2026 Мой сайт</p>
</footer>9. Пример полной семантической структуры
<body>
<header>Шапка сайта</header>
<nav>Навигация</nav>
<main>
<article>
<h1>Статья</h1>
<section>
<h2>Подраздел статьи</h2>
</section>
</article>
<aside>Боковая панель</aside>
</main>
<footer>Подвал</footer>
</body>10. Что нельзя делать с семантическими тегами
- Использовать
<main>больше одного раза на странице. - Вкладывать
<header>в<footer>или наоборот — это редко нужно. - Пропускать семантику, если она есть. Например, вместо
<nav>использовать<div class="menu">. - Путать
<article>и<section>— это не страшно, но лучше понимать разницу.
📓 Из тетради: «Семантические теги не видны глазу, но их видит поисковик и вспомогательные технологии. Не ленитесь использовать их. Это привычка профессиональной вёрстки».