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

Каждый элемент HTML имеет отображаемое значение по умолчанию, в зависимости от типа элемента.

Существует два отображаемых значения: блочное и строчное.

Элементы уровня блока

Блочный элемент всегда начинается с новой строки, и браузеры автоматически добавляют некоторое пространство (поле) до и после элемента.

Блочный элемент всегда занимает всю доступную ширину (растягивается влево и вправо, насколько это возможно).

Два часто используемых блочных элемента: <p> и <div>.

• Элемент <p> определяет абзац в документе HTML.
• Элемент <div> определяет раздел или блок в HTML-документе.

<p>Привет, Мир!</p>
<div>Привет, Мир!</div>

Список элементов блочного уровня в HTML:

<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>.

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

• Строчный элемент не начинается с новой строки;
• Строчный элемент занимает столько ширины, сколько необходимо.

Это строчный элемент span Привет, Мир! внутри абзаца:

<p>Это строчный элемент span <span style="border: 1px solid white">Привет, Мир!</span> внутри абзаца.</p>

Список строчных элементов в HTML:

<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>.

Элемент <div>

• Элемент <div> часто используется как контейнер для других элементов HTML;
• Элемент <div> не имеет обязательных атрибутов, но стиль, класс и идентификатор являются общими.

При использовании вместе с CSS элемент <div> можно использовать для стилизации блоков содержимого:

<div style="background-color:white;color:black;padding:20px;">
  <h2>Москва</h2>
  <p>Москва́ — столица России, крупнейший по численности населения город РФ и её субъект — 13 097 539 человек (2023г.), самый населённый из городов, полностью расположенных в Европе.</p>
</div>

Элемент <span>

• Элемент <span> — это встроенный (строчный) контейнер, используемый для разметки части текста или части документа.
• Элемент <span> не имеет обязательных атрибутов, но style, class и id являются общими.

При использовании вместе с CSS элемент <span> можно использовать для стилизации частей текста:

<p>Летом у деревьев листья <span style="color:green;font-weight:bold;">зеленые</span> а осенью <span style="color:yellow;font-weight:bold;"> желтые</span>.</p>

Летом у деревьев листья зеленые а осенью желтые.

Краткое содержание главы

• Есть два отображаемых значения: блочное и строчное;
• Блочный элемент всегда начинается с новой строки и занимает всю доступную ширину;
• Строчный элемент не начинается с новой строки и занимает столько ширины, сколько необходимо;
• <div> HTML элемент -  является блочным и часто используется в качестве контейнера для других элементов HTML;
• <span> HTML элемент - это встроенный (строчный) контейнер, используемый для разметки части текста или части документа.

Справочник по тегам HTML

Справочник по тегам содержит дополнительную информацию об этих тегах и их атрибутах.

Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.

☛ Атрибут class HTML

Списки описаний HTML ☚