Урок 06. Текст, заголовки, списки и ссылки

Раздел: Основы HTML Время изучения: ~35 мин Сложность: Начальная
#h1 #p #strong #br #ul #dl #a #href #target #rel

Кратко: суть урока

HTML-текст строится из заголовков, абзацев, списков, смысловых выделений и ссылок. Хорошая текстовая разметка помогает пользователю быстро понять структуру страницы, а браузеру и ассистивным технологиям — правильно прочитать документ.

  • Один h1 задаёт главный заголовок страницы.
  • p, strong, em, ul, ol, li, dl, dt, dd описывают текст и списки.
  • a href создаёт ссылки; target=_blank нужно сочетать с rel=noopener noreferrer.

О чём этот урок

HTML-текст строится из заголовков, абзацев, списков, смысловых выделений и ссылок. Хорошая текстовая разметка помогает пользователю быстро понять структуру страницы, а браузеру и ассистивным технологиям — правильно прочитать документ.

Проверить по документации: детали поведения HTML-элементов и ARIA-атрибутов лучше сверять с MDN и WHATWG, если нужна точная формулировка стандарта.

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

Заголовки h1–h6 задают структуру текста. Не выбирайте номер заголовка из-за размера шрифта: внешний вид настраивается CSS, а HTML должен описывать смысл.

Абзацы и смысловые выделения

p отделяет абзацы, strong подчёркивает важность, em меняет интонацию. span не несёт смысла сам по себе и нужен как нейтральная обёртка для стилей или скриптов.

Списки

ul подходит для неупорядоченных наборов, ol — для шагов или рейтингов, dl — для пар термин-описание. Внутри ul и ol должны быть элементы li.

Ссылки

Ссылка <a href="..."> должна ясно говорить, куда ведёт. Текст вроде «нажмите здесь» хуже, чем «открыть расписание курса». Путь в href бывает абсолютным, относительным или якорем (#id). Для новой вкладки (target="_blank") добавляйте rel="noopener noreferrer", чтобы страница-источник была защищена.

<a href="examples.html">Относительная ссылка</a>
<a href="https://developer.mozilla.org"
   target="_blank" rel="noopener noreferrer">Абсолютная ссылка</a>

Практика

  • Соберите страницу с h1, двумя h2, абзацами и списком навыков.
  • Добавьте ссылку на e-mail через mailto: и внешнюю ссылку на портфолио.
  • Проверьте, что текст ссылки понятен без соседнего предложения.

Домашнее задание

Соберите текстовую страницу-резюме без CSS: имя, короткое описание, контакты, навыки, опыт и ссылки на e-mail/GitHub. Важно: структура должна читаться без оформления.

Что дальше