Классификация тегов в HTML. Чем отличаются блочные и строчные элементы?

классификация тегов в html. чем отличаются блочные и строчные элементы?

Классификация элементов

В прошлом уроке мы разобрали понятие тега и элемента применительно к HTML. Теперь необходимо понять основной принцип их классификации.

Стандартная модель поведения браузера заключается в том, что он выводит все элементы друг за другом, по порядку их следования в HTML-разметке. Есть правила, определяющие пространства, занимаемые элементами, иначе всё визуальное оформление было бы похоже на свалку из заголовков, обычных текстов, изображений и т.д.

Все доступные элементы по способу отображения разделяются на две группы: блочные и строчные. Каждая из них имеет свои особенности и позволяет управлять визуализацией контента на базовом уровне.

Важно
Функционалом одного лишь HTML невозможно добиться существенных дизайнерских решений. Как отмечалось в прошлых статьях, для этого существует специальная технология, именуемая Cascading Style Sheets (абр. CSS, рус. Каскадные таблицы стилей).

CSS вносит в стандартную модель поведения браузера большие изменения. С помощью него можно управлять потоком вывода элементов, задавать им отступы от окружающего и внутреннего содержимого, менять группу конкретного элемента на строчную или блочную.

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

Особенностью блочных элементов является то, что они занимают всё доступное пространство по ширине, даже если внутри находится всего один символ. Их высота определяется содержимым. Блочный элемент всегда отделяется от своего окружения переносами строк. Внутри них можно размещать как другие блочные, так и строчные элементы.

Схема, раскрывающая особенности поведения блочных элементов
Рис 1. Пример визуальной модели блочного элемента

Ниже приведена таблица блочных элементов, присутствующих в HTML. Все из них рассматриваются в последующих уроках. Справедливости ради отметим, что список не полный. Из него исключены элементы не нужные на начальном этапе обучения. Они будут описаны в курсе для продвинутых.

Элементы Описание
<div> Универсальный блочный контейнер.
<pre> Предварительно отформатированный текст.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> Текстовые заголовки.
<hr> Горизонтальная линия.
<p> Абзацы.
<form> Форма заполнения пользовательских данных.
<table>, <tr> Таблицы и их строки.
<dd>, <dl>, <dt> Составляющие списков определений.
<ol>, <ul>, <li> Составляющие нумерованных и маркированных списков.

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

Строчные элементы используются при разметке содержимого других элементов. Их существование как самостоятельных единиц не имеет никакого смысла. В основном с помощью них выделяют участки текста для придания особого форматирования. Внутри строчного элемента допускается размещать другие, но не относящиеся к блочным.

В HTML занимаемое пространство строчного элемента определяется его содержимым. Он не имеет собственной высоты и ширины. Если строчный элемент обрамляет текст, который при переносе разбивается на две строки, то и элемент ведет себя также.

Схема, демонстрирующая поведение строчных элементов
Рис 2. Пример визуальной модели строчного элемента

Ниже приведена таблица основных строчных элементов, присутствующих в HTML. Аналогично блочным, все из них будут рассмотрены в дальнейших уроках.

Элементы Описание
<span> Универсальный строчный контейнер.
<i> Задает курсивное начертание текста.
<b> Задает жирное начертание текста.
<s> Перечеркивает выделенный текст.
<u> Подчеркивает выделенный текст.
<a> Гиперссылка на другой документ.
<q> Короткая цитата. Обрамляется кавычками.
<sup> Верхний индекс. Поднимает текст выше основной линии.
<sub> Нижний индекс. Опускает текст ниже основной линии.
<em> Слабое логическое выделение.
<strong> Сильное логическое выделение.
<cite> Цитирование других источников.
<address> Указание контактной информации.
<audio> Элемент проигрывания аудиозаписей.
<video> Элемент воспроизведения видео.
<iframe> Встраиваемый объект общего назначения.
<embed> Встраиваемые объекты нераспространенных типов.
<button> Кнопки формы
<img> Вставка изображений.
<input> Основное поле ввода формы.
<select> Открывающийся список в форме.
<td> Обычная ячейка таблицы.
<textarea> Поле ввода многострочного текста.
<th> Заголовочная ячейка таблицы.

Последние публикации