Блочные и строчные элементы HTML
У каждого элемента HTML есть значение отображения по умолчанию, зависящее от типа элемента. Два самых распространённых значения отображения — block и inline.
Блочные элементы
Блочный элемент всегда начинается с новой строки, и браузер добавляет немного отступа (margin) до и после него. Он также занимает всю доступную ширину, растягиваясь настолько влево и вправо, насколько может. Два распространённых блочных элемента — <p> (абзац) и <div> (раздел).
К блочным элементам относятся: <address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> и <video>.
Пример
Абзац и div — оба блочные.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Блочные элементы</title>
</head>
<body>
<p>Привет, мир</p>
<div>Привет, мир</div>
</body>
</html>
Строчные элементы
Строчный элемент не начинается с новой строки и занимает только столько ширины, сколько ему нужно. Распространённый пример — <span>.
К строчным элементам относятся: <a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <output>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt> и <var>.
Примечание: Строчный элемент не может содержать блочный элемент.
Пример
Span — строчный элемент.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Строчный Span</title>
</head>
<body>
<span>Привет, мир</span>
</body>
</html>
Элемент <div>
Элемент <div> часто используется как контейнер для других элементов. У него нет обязательных атрибутов, но style, class и id распространены. С помощью CSS он может оформлять целые блоки содержимого.
Пример
Оформленный контейнер <div>.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Стилизованный Div</title>
</head>
<body>
<div style="background-color:black;color:white;padding:20px;">
<h2>Лондон</h2>
<p>Лондон является столицей Англии. Это самый населённый город Великобритании, с агломерацией более 13 миллионов жителей.</p>
</div>
</body>
</html>
Элемент <span>
Элемент <span> — строчный контейнер, используемый для выделения части текста или документа. У него нет обязательных атрибутов, но style, class и id распространены. С помощью CSS он может оформлять части текста.
Пример
<span>, используемый для раскраски слов внутри предложения.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Стилизованный Span</title>
</head>
<body>
<p>У моей мамы <span style="color:blue;font-weight:bold;">голубые</span> глаза, а у моего папы <span style="color:darkolivegreen;font-weight:bold;">тёмно-зелёные</span> глаза.</p>
</body>
</html>
Итоги главы
Подведём итог: блочный элемент начинается с новой строки и занимает всю ширину, тогда как строчный элемент не начинается с новой строки и занимает только необходимую ширину. Элемент <div> блочный и часто используется как контейнер, а элемент <span> — строчный контейнер для выделения части текста.