Блочные и строчные элементы HTML
Все элементы HTML делятся на две группы: блочные и строчные. Полный список блочных и строчных элементов с примерами.
Каждый видимый HTML-элемент отображается браузером либо как блочный, либо как строчный бокс. Блочные боксы располагаются вертикально один за другим и занимают всю доступную ширину; строчные боксы размещаются горизонтально в строке текста, подобно словам в предложении. Понимание этого различия необходимо для управления вёрсткой страницы.
Важно знать, что «блочный» и «строчный» — это не фиксированные категории HTML: они описывают то, как элемент отображается по умолчанию. В современном HTML5 элементы группируются по категориям контента (потоковый контент, фразовый контент и т. д.), тогда как разделение на блочные и строчные — это по сути концепция CSS, управляемая свойством display. Это означает, что поведение по умолчанию любого элемента можно изменить: <span> можно заставить вести себя как блок, а <div> — как строчный элемент.
См. также: CSS-свойство
display· тег<div>· тег<span>
На этой странице рассматриваются блочные и строчные элементы, полный список каждого из них, изменение поведения по умолчанию с помощью display, важное правило вложенности, а также когда использовать <div>, а когда <span>.
Блочные элементы
Блочный элемент — это HTML-элемент, который начинается с новой строки и занимает всю доступную ширину своего родительского элемента. Такие элементы создают блоки контента (абзацы, разделы страницы). Большинство HTML-элементов являются блочными.
Блочные элементы используются в теле HTML-документа и могут содержать строчные элементы или другие блочные элементы.
Пример блочного элемента:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div>This is a block-level element. It starts on a new line and takes up the full width.</div>
<p>This is another block-level element. It also starts on a new line.</p>
</body>
</html>| Блочные элементы: |
|---|
<address> |
<canvas> |
<dt> |
<footer> |
<hr> |
<noscript> |
<pre> |
<ul> |
Строчные элементы
В отличие от блочных, строчные элементы не начинаются с новой строки. Они располагаются внутри строки и занимают ровно столько ширины, сколько необходимо. Строчные элементы включаются в состав основного текста.
Строчные элементы, как правило, содержат другие строчные элементы или могут быть пустыми.
Пример строчного элемента:
Здесь <img> расположен рядом с абзацем, а строчный элемент <a> встроен в текст без переноса строки:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Heading </h1>
<p>This is Aleq's photo</p>
<img src="https://placehold.co/200x185?text=Photo" alt="Aleq" width="200" height="185"/>
</body>
</html>Чтобы наглядно увидеть строчный поток, поместите <span> в середину предложения. Поскольку <span> является строчным, текст продолжается на той же строке и затрагивается только содержимое span:
<p>The total price is
<span style="color: red; font-weight: bold;">$49.99</span>
including tax.</p>Стилизованное значение $49.99 остаётся в строке текста — ничего не переносится на новую строку.
| Строчные элементы: |
|---|
<a> |
<br> |
<data> |
<i> |
<kbd> |
<output> |
<script> |
<strong> |
<time> |
Изменение отображения с помощью CSS
Поскольку блочное и строчное — это режимы отображения, их можно переключать с помощью CSS-свойства display. Это одна из наиболее распространённых причин использования display.
В примере ниже элемент <span> принудительно отображается как блочный (начинается с новой строки и занимает всю ширину), а элемент <div> принудительно отображается как строчный (встраивается в поток текста):
<!DOCTYPE html>
<html>
<head>
<style>
span.as-block {
display: block;
background: #e0f7fa;
}
div.as-inline {
display: inline;
background: #ffecb3;
}
</style>
</head>
<body>
<span class="as-block">I am a span behaving like a block.</span>
<p>Text before <div class="as-inline">a div behaving inline</div> text after.</p>
</body>
</html>display: inline-block
Существует полезное третье значение — display: inline-block. Оно размещает элемент в потоке рядом с другим контентом как строчный, но при этом поддерживает width, height и вертикальные margin/padding, как блочный — лучшее из обоих миров.
Классический пример использования — горизонтальная панель навигации или ряд кнопок, которым нужна фиксированная ширина и отступы, но при этом они должны располагаться рядом друг с другом:
<!DOCTYPE html>
<html>
<head>
<style>
.btn {
display: inline-block;
width: 120px;
padding: 10px 0;
margin: 4px;
text-align: center;
background: #2196f3;
color: #fff;
}
</style>
</head>
<body>
<a class="btn" href="#">Home</a>
<a class="btn" href="#">About</a>
<a class="btn" href="#">Contact</a>
</body>
</html>Каждая ссылка сохраняет свои width и padding (поведение блока), при этом выравниваясь горизонтально (строчное поведение).
Правило вложенности: блок внутри строчного элемента запрещён
Ключевое правило HTML: блочный элемент не должен помещаться внутрь строчного. Например, <span> (строчный) не должен оборачивать <div> (блочный). Нарушение этого правила приводит к некорректному HTML, и браузеры могут «исправить» разметку непредсказуемым образом.
Неверно — блочный <div> внутри строчного <span>:
<!-- Invalid: do not put a block element inside an inline element -->
<span>
<div>This block must not be here.</div>
</span>Верно — строчный <span> внутри блочного <div>:
<!-- Valid: an inline element nested inside a block element -->
<div>
<span>This inline element belongs here.</span>
</div>Обратный порядок (строчный внутри блочного) всегда допустим. Если нужен блочный контейнер, используйте блочный элемент, например <div>, а не <span>. Примечание: ссылки являются особым случаем — начиная с HTML5, элемент <a> может оборачивать блочный контент.
div и span: универсальные контейнеры
Когда ни один существующий элемент не подходит, HTML предлагает два универсальных, семантически нейтральных элемента-«обёртки», к которым разработчики обращаются постоянно:
<div>— универсальный блочный контейнер. Используйте его для группировки крупных фрагментов контента в целях вёрстки или оформления (карточка, боковая панель, строка).<span>— универсальный строчный контейнер. Используйте его для выделения небольшого фрагмента текста внутри строки, например для окрашивания отдельного слова или добавления подсказки.
Простое правило: если вы группируете целые блоки страницы — выбирайте <div>; если выделяете фрагмент внутри текущего текста — выбирайте <span>.
<!-- div: groups a block section -->
<div class="card">
<h2>Welcome</h2>
<p>Hello, <span class="username">Aleq</span>!</p>
</div>Отдавайте предпочтение семантическим элементам (<section>, <article>, <nav>, <strong>, <em>, …), когда они подходят для описания контента; прибегайте к <div>/<span> только тогда, когда ничего более подходящего нет.