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

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

Заголовки

Заголовков шесть уровней: от <h1> (главный) до <h6>.

<h1>Рецепты выпечки</h1>
<h2>Пироги</h2>
<h3>Яблочный пирог</h3>
<h3>Пирог с вишней</h3>
<h2>Печенье</h2>

Правила простые:

• <h1> на странице один — это её главная тема. Поисковики и программы чтения с экрана опираются на него.
• Уровни идут по порядку, как пункты оглавления: после <h2> — <h3>, а не сразу <h5>.
• Заголовок выбирают по смыслу, а не по размеру. Нужен крупный текст — это задача CSS.

Абзацы и переносы

Каждый абзац — свой элемент <p>. Между абзацами браузер сам ставит отступ.

<p>Первый абзац текста.</p>
<p>Второй абзац. Пустые строки и лишние пробелы в коде на странице не видны.</p>
<p>Адрес:<br>г. Минск,<br>ул. Примерная, 1</p>

<br> переносит строку внутри абзаца — для адресов и стихов. Делать отступы между абзацами с помощью нескольких <br> не нужно: для этого есть <p> и CSS. Тег <hr> рисует горизонтальную черту — смену темы в тексте.

Выделение в тексте

<p><strong>Внимание:</strong> занятие переносится на <em>пятницу</em>.</p>
<p>Площадь — 20 м<sup>2</sup>, формула воды — H<sub>2</sub>O.</p>

Есть ещё <b> и <i> — жирный и курсив без особого смысла, например для названий. Если слово действительно важное, лучше <strong>.

Спецсимволы

Знаки < и > браузер принимает за начало и конец тега. Чтобы показать их как текст, пишут мнемоники:

Неразрывный пробел не даёт разорвать строку в этом месте: 10 кг не разъедется на две строки. Остальные символы (©, —, «ёлочки») в файле UTF-8 можно набирать прямо.

Списки

Маркированный список — <ul> (unordered list), нумерованный — <ol> (ordered list). Каждый пункт — <li>.

<ul>
  <li>Мука</li>
  <li>Сахар</li>
  <li>Яйца</li>
</ul>

<ol>
  <li>Разогрейте духовку.</li>
  <li>Смешайте продукты.</li>
  <li>Выпекайте 40 минут.</li>
</ol>

Внутри <ul> и <ol> могут стоять только <li>. Вложенный список кладут внутрь пункта:

<ul>
  <li>Фрукты
    <ul>
      <li>Яблоки</li>
      <li>Груши</li>
    </ul>
  </li>
  <li>Овощи</li>
</ul>

У <ol> есть атрибуты: start="5" — начать счёт с пяти, reversed — считать в обратную сторону, type="A" — буквы вместо цифр.

Ссылки

Ссылка — элемент <a> с атрибутом href (адрес, куда ведёт). Текст между тегами — то, на чём щёлкают.

<a href="https://developer.mozilla.org/ru/">Справочник MDN</a>
<a href="about.html">О сайте</a>
<a href="https://developer.mozilla.org/ru/" target="_blank">Справочник в новой вкладке</a>
<a href="mailto:info@example.com">Написать письмо</a>
<a href="tel:+375291234567">Позвонить</a>

• Полный адрес с https:// ведёт на другой сайт.
• Просто имя файла (about.html) ведёт на страницу вашего сайта в той же папке. О путях к файлам в других папках — в следующем уроке.
• target="_blank" открывает ссылку в новой вкладке.
• mailto: открывает почтовую программу с готовым адресом, tel: на телефоне предлагает позвонить. Номер в tel: пишут без пробелов, с кодом страны.

Ссылка может вести и на место внутри страницы. Дайте элементу атрибут id, а в ссылке укажите его после #:

<a href="#contacts">Перейти к контактам</a>

<h2 id="contacts">Контакты</h2>

id на странице должен быть единственным: два элемента с одним id — ошибка.

Текст ссылки должен объяснять, куда она ведёт: «Расписание занятий», а не «здесь» или «нажмите тут». Так удобнее и посетителям, и поисковикам.

Разметка страницы по смыслу

Крупные части страницы тоже размечают тегами. Они ничего не меняют во внешнем виде, но помогают поисковикам и программам чтения с экрана понять страницу:

<body>
  <header>
    <p>Кулинарный кружок</p>
    <nav>
      <a href="index.html">Главная</a>
      <a href="recipes.html">Рецепты</a>
    </nav>
  </header>
  <main>
    <h1>Рецепты выпечки</h1>
    <p>Простые рецепты для начинающих.</p>
  </main>
  <footer>
    <p>&copy; 2026 Кулинарный кружок</p>
  </footer>
</body>

• <header> — шапка: название, логотип, меню;
• <nav> — главное меню, навигация по сайту;
• <main> — основное содержимое, на странице один;
• <footer> — подвал: контакты, авторские права;
• <section> — раздел страницы со своим заголовком, <article> — законченная статья или новость, <aside> — побочный блок, например боковая колонка.

Коротко

• Заголовки <h1>–<h6> — по смыслу и по порядку, <h1> один.
• Абзац — <p>, перенос строки — <br>, важное — <strong>, ударение — <em>.
• < и > как текст — < и >, неразрывный пробел —  .
• Списки — <ul> и <ol>, пункты — <li>, вложенный список — внутри <li>.
• Ссылка — <a href="адрес">текст</a>; новая вкладка — target="_blank", место на странице — #id, почта и телефон — mailto: и tel:.
• Части страницы — <header>, <nav>, <main>, <footer>.

Проверьте себя