Представь, что ты строишь дом из конструктора LEGO. У тебя есть кирпичики разной формы и цвета — одни для стен, другие для дверей, третьи для окон. Ты же не поставишь дверь на крышу? Нет — всё должно быть на своём месте, чтобы дом был удобным и не рухнул.
Вот так же и с сайтом: браузер — это «строитель», а теги — это «кирпичики».
Современные сайты строятся не просто из <div> и <p>, а из смысловых блоков — чтобы компьютер понял, что к чему относится. Это помогает:
- Поисковым системам (Яндекс, Google) правильно проиндексировать сайт.
- Экранам для слабовидящих (скринридерам) — читать контент по смыслу, а не в каше.
- Тебе самому — не запутаться в коде через месяц.
Давай разберём четыре главных «кирпичика» — и для каждого — аналогия из жизни.
🏗️ <section> — это комната в доме
Представь квартиру. В ней есть кухня, спальня, ванная. Каждая комната — отдельное пространство с одной темой. На кухне — готовят, в спальне — спят.
Так и <section> — это блок, объединяющий связанный по смыслу контент. Например:
Не путай: <section> — не просто «кусок страницы». Это логическая часть, у которой обычно есть заголовок и собственная тема.
📰 <article> — это газетная статья или пост в блоге
Представь школьную стенгазету. На ней — три заметки:
- «Как мы выиграли олимпиаду»,
- «Рецепт пирога от шеф-повара столовой»,
- «Интервью с директором».
Каждая заметка — самодостаточна. Её можно вырезать, приклеить в дневник — и она всё равно будет понятна. В ней есть заголовок, текст, может — фото и подпись.
Вот <article> — это как раз такая «вырезка» на сайте:
💡 Отличие от <section>:
<article> — независимый контент (новость, пост, комментарий),
а <section> — просто часть чего-то большего.
📦 <aside> — это карманный справочник или заметка на полях
Представь, что ты читаешь учебник по истории. В тексте — про Куликовскую битву. А на полях — маленькая табличка:
«💡 Дидье де Керель — французский рыцарь, воевал на стороне Мамая».
Это дополнительно. Без неё основной текст понятен. Но с ней — интереснее и полезнее.
<aside> — это как раз такие «поля» на сайте:
Часто <aside> — это:
- Список "похожих статей",
- Блок "цитата дня",
- Реклама (но только если она не основной контент).
🧭 <nav> — это карта метро или навигатор в машине
Ты едешь в центр города. Что помогает не заблудиться?
→ Навигатор. Он не везёт тебя сам, но показывает, как добраться.
<nav> — это меню навигации. Только оно. Не кнопки «лайк», не поиск — только ссылки на другие страницы.
Важно:
- Один сайт может иметь несколько <nav>: главное меню + меню в подвале + меню в мобильной версии.
- Но не каждая группа ссылок — <nav>. Например, список «см. также» в конце статьи — это <aside> или просто <ul>.
🔚 Вывод: зачем всё это?
Эти теги — не для красоты. Они делают сайт:
✅ Умным — браузер и поисковик понимают структуру,
✅ Доступным — незрячие люди могут слушать страницу по смыслу,
✅ Читаемым — через год ты откроешь код и сразу поймёшь:
«А, вот тут — статьи, тут — меню, а это — боковая справка».
Это как подписать коробки с LEGO: «крыши», «двери», «колёса». Без подписей — хаос. С ними — строишь быстро и без ошибок.
📌 Проверь себя:
Сайт про котиков. Где что будет?
- Фото и история про Барсика → <article>
- Меню: «Породы», «Уход», «Игрушки» → <nav>
- Блок «Интересный факт: коты мурлычут на 25 Гц» → <aside>
- Раздел «Уход за шерстью» (с подзаголовками: расчёска, купание, стрижка) → <section>
Если ответил верно — ты уже семантический верстальщик. Поздравляю 🎉