Основные теги HTML

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

Заголовки h1–h6

Шесть уровней заголовков — от самого важного (<h1>) до наименее значимого (<h6>). На странице должен быть только один <h1> — это главный заголовок, который индексируют поисковики.

<h1>DevBlog</h1>
<h2>Статьи о Python</h2>
<h3>Асинхронное программирование</h3>
<h4>asyncio.gather</h4>

Правило: не пропускайте уровни ради стиля. <h4> после <h2> — логическая ошибка. Размер шрифта меняйте через CSS.

Абзацы и текстовые блоки

<p>
  Python появился в 1991 году. Его создал Гвидо ван Россум.
  Язык назван в честь комедийной группы Monty Python.
</p>

<p>
  <strong>Жирный текст</strong> выделяет важное.
  <em>Курсив</em> используют для акцента или технических терминов.
</p>

• <p> — абзац. Браузер добавляет отступ сверху и снизу автоматически.
• <strong> — семантически важный текст (визуально — жирный).
• <em> — акцент (визуально — курсив).

Код и предформатированный текст

Для блога о программировании эти теги используются постоянно:

<!-- Встроенный код в тексте -->
<p>Функция <code>print()</code> выводит текст в консоль.</p>

<!-- Блок кода с сохранением форматирования -->
<pre><code>def greet(name):
    return f"Привет, {name}!"

print(greet("мир"))
</code></pre>

<code> помечает фрагмент кода. <pre> сохраняет пробелы и переносы строк. Вместе они дают правильно отформатированный блок кода. Позже для подсветки синтаксиса подключим библиотеку highlight.js.

div и span

<div> и <span> — «нейтральные» контейнеры без семантического смысла. Используются для группировки и применения стилей.

<!-- div — блочный контейнер -->
<div class="post-card">
  <h2>Заголовок поста</h2>
  <p>Краткое описание.</p>
</div>

<!-- span — строчный контейнер -->
<p>Статус: <span class="badge">Python 3.12</span></p>

Предпочитайте семантические теги там, где они подходят по смыслу: <article> вместо <div> для поста, <nav> вместо <div> для навигации.

Разделители

<p>Первый раздел.</p>

<hr />  <!-- горизонтальная линия-разделитель -->

<p>Второй раздел.</p>

<p>Строка 1.<br />Строка 2 в том же абзаце.</p>

• <hr /> — тематический разрыв между секциями (не просто линия для красоты).
• <br /> — перенос строки внутри абзаца. Используйте редко: для стихов, адресов, лирических отступлений.

Блочные и строчные элементы

Это фундаментальное различие влияет на поток документа:

<!-- Блочные элементы идут один за другим -->
<p>Первый абзац</p>
<p>Второй абзац — на новой строке</p>

<!-- Строчные элементы — в потоке текста -->
<p>Читайте <a href="#">нашу статью</a> о <strong>FastAPI</strong>.</p>

Строчный элемент нельзя вкладывать вокруг блочного — это нарушает спецификацию:

<!-- Неправильно: <a> — строчный, <div> — блочный -->
<a href="#"><div>Весь блок — ссылка</div></a>

<!-- Правильно — обернуть в <div> -->
<div><a href="#">Ссылка</a></div>

Карточка поста в DevBlog

Объединим изученные теги в реальный блок:

<div class="post-card">
  <h2>Декораторы в Python: полное руководство</h2>
  <p>
    <span class="tag">Python</span>
    <span class="tag">Advanced</span>
  </p>
  <p>
    Декораторы позволяют изменять поведение функций без изменения их кода.
    В этой статье разберём <code>@wraps</code>, фабрики декораторов
    и практические примеры из реальных проектов.
  </p>
  <hr />
  <p><em>5 минут чтения</em> · <strong>15 марта 2025</strong></p>
</div>

Пока это просто HTML-структура без стилей. В следующих статьях CSS превратит её в красивую карточку.