PrepBro
← Назад к вопросам

Приведи примеры блочных HTML-элементов

2.3 Middle🔥 162 комментариев
#HTML и CSS

Комментарии (2)

🐱
deepseek-v3.2PrepBro AI6 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Примеры блочных HTML-элементов

Блочные элементы (block-level elements) в HTML — это элементы, которые занимают всю доступную ширину родительского контейнера, создавая «блок» в потоке документа. Они всегда начинаются с новой строки и имеют отступы (margin) сверху и снизу по умолчанию. Их ширина и высота могут быть явно заданы через CSS. Вот классические и современные примеры блочных элементов с пояснениями и кодом.

Основные блочные элементы

1. Заголовки <h1>–<h6>

Используются для создания иерархии заголовков в документе. <h1> — заголовок самого высокого уровня, <h6> — самого низкого.

<h1>Главный заголовок страницы</h1>
<h2>Раздел: Введение</h2>
<h3>Подраздел: Основные понятия</h3>

2. Параграф <p>

Предназначен для текстовых абзацев. Браузер автоматически добавляет отступы сверху и снизу.

<p>Это первый абзац текста, который занимает всю ширину контейнера.</p>
<p>Это второй абзац, он начнётся с новой строки.</p>

3. Контейнеры <div>, <main>, <section>, <article>

Универсальные элементы для группировки контента. <div> — нейтральный контейнер, в то время как семантические элементы (<main>, <section>, <article>) придают смысловую структуру, что важно для доступности и SEO.

<main>
  <section>
    <h2>Новости</h2>
    <article>
      <h3>Заголовок новости</h3>
      <p>Текст новости...</p>
    </article>
  </section>
</main>

4. Списки <ul>, <ol>, <li>

<ul> (маркированный список) и <ol> (нумерованный список) являются блочными, как и их элементы <li>.

<ul>
  <li>Первый пункт списка</li>
  <li>Второй пункт списка</li>
</ul>

5. Элементы формы <form> и <fieldset>

<form> создаёт контейнер для элементов ввода, а <fieldset> группирует связанные элементы внутри формы.

<form action="/submit">
  <fieldset>
    <legend>Контактная информация</legend>
    <!-- Элементы ввода здесь -->
  </fieldset>
</form>

6. Цитаты <blockquote>

Используется для выделения длинных цитат, обычно с отступами.

<blockquote>
  <p>Это важная цитата, которая визуально отделяется от основного текста.</p>
</blockquote>

7. Горизонтальная линия <hr>

Создаёт тематический раздел между контентом в виде горизонтальной линии (по умолчанию).

<p>Текст до разделителя.</p>
<hr>
<p>Текст после разделителя.</p>

8. Элементы таблицы <table>, <tr>, <td>, <th>

Таблицы и их составные части (<tr>, <td>, <th>) являются блочными, но их отображение управляется табличной моделью CSS.

<table>
  <tr>
    <th>Заголовок 1</th>
    <th>Заголовок 2</th>
  </tr>
  <tr>
    <td>Данные 1</td>
    <td>Данные 2</td>
  </tr>
</table>

9. Адрес <address>

Содержит контактную информацию, обычно отображается курсивом с отступами.

<address>
  Контакты: example@mail.com
</address>

Важные особенности блочных элементов:

  • Ширина и высота: Можно задавать через CSS свойства width и height.
  • Блочная модель: Состоит из контента, padding, border и margin. Управляется свойством box-sizing.
  • Контекст форматирования: Создают блочный контекст форматирования (Block Formatting Context, BFC), что влияет на поток элементов и поведение отступов (например, предотвращает схлопывание margin).
  • Вложенность: Могут содержать другие блочные и строчные элементы (с ограничениями: например, <p> не должен содержать другие блочные элементы).

Пример вёрстки с несколькими блочными элементами:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Пример блочных элементов</title>
    <style>
        .container {
            width: 80%;
            margin: 0 auto;
            background: #f5f5f5;
            padding: 20px;
        }
        section {
            border: 1px solid #ccc;
            margin-bottom: 20px;
            padding: 15px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>Мой сайт</h1>
            <nav>
                <ul>
                    <li><a href="#home">Главная</a></li>
                    <li><a href="#about">О нас</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <section id="home">
                <h2>Добро пожаловать</h2>
                <p>Это пример использования блочных элементов для структурирования страницы.</p>
                <blockquote>
                    <p>Структура — основа хорошей вёрстки.</p>
                </blockquote>
            </section>
        </main>
        <footer>
            <address>Контакты: support@example.com</address>
        </footer>
    </div>
</body>
</html>

Итог: Блочные элементы — фундамент структуры HTML-документа. Их правильное использование, особенно с семантическими тегами (как <main>, <section>, <article>), улучшает читаемость кода, доступность для вспомогательных технологий и SEO-оптимизацию. При работе с ними важно понимать блочную модель CSS и контекст форматирования, чтобы избежать распространённых проблем вёрстки, таких как схлопывание отступов или неожиданное поведение размеров. В современной вёрстке часто комбинируют блочные элементы с Flexbox или CSS Grid для создания сложных адаптивных макетов.

Приведи примеры блочных HTML-элементов | PrepBro