Базовые теги

HTML состоит из тегов. Есть блочные теги (div, p) — они занимают всю ширину и начинают новую строку. Есть строчные теги (span, strong, em) — они работают внутри текста, не разрывая строку. Есть самозакрывающиеся теги (br, hr, img) — они не имеют закрывающей части.

Основные категории тегов:

Блочные теги (block) — занимают всю ширину, начинают новую строку:

• <div> — универсальный контейнер (без семантики)
• <p> — параграф
• <h1>-<h6> — заголовки

Строчные теги (inline) — работают внутри текста:

• <span> — универсальная обёртка (без семантики)
• <strong> — важный текст (жирный)
• <em> — выделенный текст (курсив)
• <a> — ссылка

Самозакрывающиеся теги:

• <br> — перенос строки
• <hr> — горизонтальная линия (разделитель)
• <img> — изображение

pre — предварительно форматированный текст:

• <pre> сохраняет пробелы, отступы и переносы строк
• Удобно для отображения кода

div vs span — «обёртки без семантики»:

• div — блочный контейнер (для группы элементов)
• span — строчный контейнер (для части текста)
• Они не говорят браузеру «что это» — только «группируй это»

Теги — как типы контейнеров при переезде. div — большая коробка (занимает место). span — маленький пакетик (помещается внутрь). br — стоп-кран (разрыв). strong — жирный маркер на коробке.

**Самый простой:**

<p>Это параграф.</p>
<p>Это второй параграф.</p>
<div>Это блочный контейнер.</div>
<span>Это строчный элемент.</span>

div и p — блочные (каждый на новой строке). span — строчный (внутри текста).

**Простой:**

<p>Текст с <strong>важным</strong> словом.</p>
<p>Текст с <em>выделенным</em> словом.</p>
<p>Первая строка<br>Вторая строка</p>
<hr>
<pre>
  for (let i = 0; i < 5; i++) {
    console.log(i);
  }
</pre>

strong/em — форматирование текста. br — перенос. hr — разделитель. pre — форматированный блок.

**Реальный пример:**

<article>
  <h2>Заголовок статьи</h2>
  <p>
    Это <em>важная</em> статья о <strong>веб-разработке</strong>.
    <br>
    Она предназначена для <span style="color: blue">начинающих</span>.
  </p>
  <hr>
  <pre><code>
function hello() {
  console.log('Привет!');
}
  </code></pre>
</article>

Реальный пример: статья с форматированием текста, разделителем и блоком кода.

**Неправильно:** Использовать div для всего

**Почему:** div не несёт семантической информации. Браузер и скринридеры не понимают, что внутри div.

**Правильно:** Используйте семантические теги (p, article, section) там, где они подходят. div — только когда нет подходящего тега.

**Неправильно:** Забывать закрывать теги

**Почему:** Незакрытый тег ломает структуру страницы. Браузер пытается «угадать», где закрытие.

**Правильно:** Всегда закрывайте теги. Используйте редактор с подсветкой парных тегов.

**Неправильно:** Путать strong и b, em и i

**Почему:** strong/em — семантические (важность, выделение). b/i — визуальные (жирный, курсив). Скринридеры понимают strong/em.

**Правильно:** Для важности используйте <strong>. Для выделения — <em>. b/i — только для визуального стиля.

• div — блочный контейнер, span — строчный
• strong — важный текст, em — выделенный текст
• br — перенос строки, hr — горизонтальная линия
• pre — сохраняет форматирование (пробелы, отступы)
• Предпочитайте семантические теги там, где они подходят

Назад: Вы знаете структуру HTML и комментарии (H2-H3) — теперь у вас есть базовые строительные блоки.

Вперёд: В следующем уроке (H5) вы подробно изучите заголовки и абзацы — основные элементы контента.