Структура и семантика
Скелет документа и теги, которые описывают содержимое.
Обновлено
Что такое HTML
HTML (HyperText Markup Language) описывает структуру и смысл содержимого: «это заголовок», «это список», «это навигация». Это не язык программирования — в нём нет логики, он только размечает содержимое.
Элемент = открывающий тег + содержимое + закрывающий тег:
<a href="/blog" class="link">Blog</a>aимя тегаhref="/blog" class="link"атрибутыBlogсодержимое</a>закрывающий тег
- Атрибуты дают дополнительную информацию (
href,class,id,alt). - Некоторые элементы пустые (void) — у них нет содержимого и закрывающего тега:
<img>,<input>,<br>,<meta>. - Элементы вкладываются друг в друга и образуют дерево — из него браузер строит DOM.
Структура документа
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Заголовок страницы</title>
</head>
<body>...</body>
</html>| Часть | Роль |
|---|---|
<!doctype html> |
стандартный режим браузера (без него включается «quirks mode» со старыми правилами) |
lang="ru" |
язык — для скринридеров, автоперевода, SEO |
<head> |
невидимые метаданные: кодировка, заголовок, viewport, ссылки на CSS |
viewport |
без него на мобильном страница отображается уменьшенной, как на десктопе |
<body> |
всё, что видит пользователь |
В Next.js это не пишут вручную — app/layout.tsx генерирует <html>, <head> и <body>.
Что значит «семантический»
Семантический = тег говорит, что это за содержимое, а не как оно выглядит. <div> и <span> ничего не говорят; <nav> говорит «здесь навигация».
Почему это важно:
- Доступность — скринридеры сразу переходят к
<main>или показывают список заголовков. - SEO — поисковики понимают, что важно.
- Читаемый код — структура страницы видна с первого взгляда.
- Поведение бесплатно —
<button>получает фокус и работает с Enter;<div>— нет.
Виды элементов
Структурные элементы (landmarks)
| Тег | Что это | Когда использовать |
|---|---|---|
<header> |
шапка | вверху страницы или в начале article/section |
<nav> |
основная навигация | меню сайта, хлебные крошки — не любая группа ссылок |
<main> |
основное содержимое | один раз на странице |
<article> |
самостоятельный контент | имел бы смысл и вне страницы: пост, комментарий, карточка товара |
<section> |
тематическая группа | часть страницы со своим заголовком |
<aside> |
второстепенный контент | сайдбар, «похожие статьи» |
<footer> |
подвал | копирайт, второстепенные ссылки |
article или section: спросите себя «имело бы это смысл само по себе, в RSS-ленте?» Да → article. Нет, это просто часть страницы → section.
Блочные и строчные
| Блочные | Строчные | |
|---|---|---|
| Примеры | div, p, h1, ul, section |
span, a, strong, em, code |
| Занимают | всю ширину, начинаются с новой строки | только нужное место, внутри текста |
| Для | блоков содержимого | фрагментов текста |
<div> и <span> — бессмысленные варианты: используйте их только для стилизации, когда подходящего семантического тега нет.
Текст
| Тег | Смысл |
|---|---|
<h1>…<h6> |
заголовки, по иерархии |
<p> |
абзац |
<strong> |
важное (не просто «жирный») |
<em> |
акцент (не просто «курсив») |
<ul> / <ol> + <li> |
маркированный / нумерованный список |
<a href> |
ссылка — ведёт куда-то |
<button> |
кнопка — что-то делает |
<img alt> |
изображение |
<code>, <pre> |
код |
<time datetime> |
дата или время, понятные машине |
Заголовки
- Один
<h1>— тема страницы. - Не пропускайте уровни:
h1 → h2 → h3, а неh1 → h4. - Уровень выбирают по структуре, размер задаёт CSS.
Частые ошибки
<div onclick>вместо<button>или<a>.- Заголовки, выбранные по размеру (
<h4>, потому что «красиво смотрится»). - Несколько
<main>на странице. <br><br>для отступов — отступы задаёт CSS.
Коротко
- HTML = структура и смысл, а не внешний вид.
- Используйте тег, который описывает содержимое;
div/span— только если другого нет. - Один
h1, одинmain, заголовки по порядку.