Теги — строительные блоки любой 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 />— перенос строки внутри абзаца. Используйте редко: для стихов, адресов, лирических отступлений.
Блочные и строчные элементы
Это фундаментальное различие влияет на поток документа:
| Тип | Поведение | Примеры |
|---|---|---|
| Блочный | Занимает всю ширину, начинается с новой строки | <div>, <p>, <h1>–<h6>, <pre>, <hr> |
| Строчный | Встраивается в поток текста | <span>, <a>, <strong>, <em>, <code>, <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 превратит её в красивую карточку.
💬 Комментарии (0)
Комментариев пока нет
Станьте первым, кто поделится мнением об этой статье!