Теория: Текст, заголовки, списки и ссылки

Кратко

HTML-текст строится из заголовков (h1–h6), абзацев (p), смысловых выделений (strong, em), переноса строки (br), списков (ul, ol, li) и ссылок (a).

  • Заголовок выбирают по смыслу (уровень в структуре), а не по размеру шрифта.
  • <a href="..."> — ссылка. Путь бывает абсолютный (https://...), относительный (about.html) или якорь (#contacts).
  • target="_blank" открывает новую вкладку и требует rel="noopener noreferrer" для безопасности.

Главная идея

Текстовые теги описывают смысл содержимого, а не его внешний вид. Браузер, поисковик и программа чтения с экрана читают эту разметку, чтобы понять: где главный заголовок, где абзац, где важное слово, а где список шагов. Внешний вид (размер, цвет, отступы) — задача CSS, а не HTML.

Представь оглавление книги. h1 — название книги (одно на страницу). h2 — названия глав, h3 — параграфы внутри главы. Нельзя перепрыгнуть с главы (h2) сразу на под-под-пункт (h4) — читатель потеряет нить. Заголовки — это «оглавление» страницы, по которому и человек, и скринридер строят навигацию.

Иерархия заголовков h1–h6

Шесть уровней заголовков задают «дерево» документа. На странице обычно один h1, под ним — h2, внутри них — h3 и так далее. Уровни не пропускают: после h2 идёт h3, а не сразу h5.

h1 — заголовок страницы h2 — раздел h3 — подраздел h4 — пункт Каждый уровень вложен в предыдущий — уровни не пропускают.
Заголовки образуют дерево структуры: от h1 (корень) к более глубоким уровням.

Абзацы, выделения и перенос строки

p отделяет абзацы текста. strong помечает важность (скринридер усилит интонацию), em — смысловое ударение. Не путай их с чисто визуальными b/i: strong и em несут смысл. Тег br делает принудительный перенос строки внутри одного абзаца — он одиночный (<br>) и нужен там, где перенос — часть содержимого (адрес, строки стиха), а не для создания отступов.

Списки

ul — неупорядоченный список (порядок не важен), ol — упорядоченный (шаги, рейтинг — браузер сам нумерует), dl — список определений из пар dt (термин) и dd (описание). Прямыми детьми ul и ol должны быть только элементы li.

Как устроена ссылка <a>

Ссылка — это якорь (anchor): атрибут href задаёт назначение, текст между тегами — то, что видит и кликает пользователь, target управляет, где откроется. Разбор по частям:

<a href= "about.html" target="_blank" > текст </a> href — куда ведёт target — где откроется видимый текст
href — назначение, target — окно/вкладка, текст между тегами — то, что кликает пользователь.

Три вида пути в href

  • Абсолютный — полный адрес чужого сайта: https://developer.mozilla.org.
  • Относительный — путь от текущего файла: about.html, ../index.html.
  • Якорь — переход к элементу с нужным id на этой же странице: href="#contacts" прыгнет к <section id="contacts">.

Текст ссылки должен ясно говорить, куда ведёт: «открыть расписание курса» лучше, чем «нажмите здесь» — особенно для скринридеров, которые читают ссылки списком в отрыве от текста.

Зачем это нужно: правильная текстовая разметка даёт бесплатно доступность, лучшее SEO и предсказуемую навигацию — ещё до единой строки CSS.