Меню

Блочные и строчные html теги

Все HTML элементы делятся на две группы:

  • блочные (block)
  • строчные (inline)

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

Обычно блочные элементы используются, чтобы разделить содержимое веб-страницы на логические блоки (например: верхний колонтитул (шапка сайта), меню, блок с контентом, нижний колонтитул (footer) и др.). Блочные элементы нельзя вкладывать в строчные, исключением являются только ссылки и ячейки таблиц, внутри которых по стандарту HTML5 могут быть расположены блочные элементы.

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

блочные и строчные html теги

Строчные теги

Тег Краткое описание
<a> Создает гиперссылку.
<abbr> Определяет текст как аббревиатуру.
<audio> Определяет звуковое содержимое.
<b> Выделяет текст жирным шрифтом.
<bdo> Определяет направление отображения текста.
<button> Создает кнопку.
<canvas> Определяет область для рисования графики.
<cite> Определяет заголовок для работы - преобразует текст в курсивный.
<code> Определяет кусок программного кода - преобразует текст в моноширинный.
<del> Определяет текст, который был удален из документа - отображается перечеркнутым текстом.
<dfn> Выделяет определения термина - преобразует шрифт в наклонный.
<em> Определяет выделенный текст - преобразует текст в курсивный.
<i> Преобразует текст в курсивный.
<iframe> Определяет встроенный frame.
<img> Определяет изображение.
<input> Создаeт поле для ввода данных.
<ins> Определяет текст, который был добавлен в документ - отображает текст подчеркнутым.
<kbd> Определяет текст вводимый с клавиатуры - преобразует текст в моноширинный.
<mark> Определяет важную часть текста.
<meter> Определяет скалярное измерение в пределах известного диапазона.
<q> Определяет короткую цитату.
<rp> Определяет, что показывать браузеру, который не поддерживает тег <ruby>.
<rt> Добавляет аннотацию сверху или снизу от символов, заключенных в элементе <ruby>.
<s> Определяет текст, который больше не является правильным - отображает текст перечеркнутым.
<samp> Определяет текст, который является результатом вывода компьютерной программы.
<small> Определяет текст маленького размера.
<select> Создает выпадающий список.
<span> Определяет строчный элемент документа.
<strong> Определяет важный текст - преобразует шрифт в полужирный.
<sub> Определяет текст в нижнем индексе.
<sup> Определяет текст в верхнем индексе.
<td> Создает ячейку таблицы.
<textarea> Создает многострочное текстовое поле.
<th> Создает заголовочную ячейку в таблице.
<var> Определяет переменную - выделяет текст курсивом.
<video> Добавляет на страницу видео файл.

Блочные теги

Тег Краткое описание
<address> Определяет контактную информацию автора документа/статьи.
<artical> Определяет текст как статью, новость и др.
<aside> Определяет контент в стороне от содержимого страницы.
<blockquote> Выделяет текст с другого источника, как блочную цитату.
<dd> Cоздает описание элемента в списке определений.
<div> Определяет раздел документа.
<dl> Создает список определений.
<dt> Oпределяет термин в списке определений.
<figure> Группирует элементы страницы.
<footer> Нижняя часть документа.
<form> Определяет HTML форму.
<h1> - <h6> Определяют HTML заголовки.
<header> Задает "шапку" сайта или раздела.
<hr> Создает горизонтальную линию.
<li> Определяет элемент списка.
<nav> Определяет группу ссылок для навигации.
<ol> Создает нумерованный(упорядоченный) список.
<p> Определяет абзац.
<pre> Оставляет содержимое в первоначальном виде.
<ruby> Определяет небольшую аннотацию (для типографии Восточной Азии).
<section> Определяет разделы документа.
<table> Создает таблицу.
<tr> Создает строку в таблице.
<ul> Определяет маркированный(неупорядоченный) список.

Примечание: для переопределения типа элемента с блочного на строчный или со строчного на блочный используется CSS свойство display.