3. Блочные и строчные элементы


Выделяют две основные категории HTML-элементов, которые соответствуют типам их содержимого и поведению в структуре веб-страницы — блочные и строчные элементы. С помощью блочных элементов можно создавать структуру веб-страницы, строчные элементы используются для форматирования текстовых фрагментов (за исключением элемента <img>).

Блочные элементы

Блочные элементы — элементы высшего уровня, которые форматируются визуально как блоки, располагаясь на странице в окне браузера вертикально.

<address>, <article>,
<blockquote>,
<dd>, <div>, <dl>, <dt>,
<fieldset>, <figcaption>, <footer>, <form>,
<h1>-<h6>, <header>, <hr>,
<li>,
<nav>,
<ol>,
<p>, <pre>,
<table>,
<ul>

Блочные элементы могут размещаться непосредственно внутри элемента <body>. Они создают разрыв строки перед элементом и после него, образуя прямоугольную область, по ширине занимающую всю ширину веб-страницы или блока-родителя.

Строчные элементы

Встроенные (строчные) элементы генерируют внутристрочные контейнеры. Они не формируют новые блоки контента.

<a>, <b>, <del>, <em>,
<i>, <img>, <ins>, <small>, <span>, <strong>, <sub>, <sup>,
<u>, <var>

Строчные элементы могут содержать только данные и другие строчные элементы. Исключение составляет элемент <a>, который согласно спецификации HTML5 может оборачивать целые абзацы, списки, таблицы, заголовки и целые разделы при условии, что они не содержат другие интерактивные элементы — другие ссылки и кнопки.