Самоучитель HTML Справочник HTML Глобальные атрибуты События Типы элементов Таблица цветов Спецсимволы HTML Коды языков
Теги HTML

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

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

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

Обычно блочные элементы используются, чтобы разделить содержимое веб-страницы на логические блоки (например: верхний колонтитул (шапка сайта), меню, блок с контентом, нижний колонтитул (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.

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2024 © puzzleweb.ru | razumnikum.ru

Реклама на сайте | puzinfo@puzzleweb.ru | ruen