HTML теги для оформления текста | Справочник HTML CSS

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

В данной статье перечислены только те теги, которые рекомендованы для использования актуальной спецификацией html5.

Структура

h2, h3, h4, h5, h5, h6 — блочные теги предназначены для указания заголовков. Заголовков в html есть 6 уровней, от h2 (первый уровень) до h6 (последний уровень), каждый визуально выделен жирным шрифтом и его соответствующим размером. Заголовки должны описывать содержание, это положительно влияет на оптимизацию сайта. Хорошей практикой считается указывать только один заголовок первого уровня h2, остальных может быть несколько. Заголовки должны указываться по иерархии, на первом уровне заголовок h2 дальше подзаголовок h3 и так далее

p — абзац. Блочный тег, разделяет текст на отдельные абзацы, в конце добавляется отступ

Примеры: https://codepen.io/Yury_P/pen/WNGLgdW

Форматирование

b — визуально выделяет текст жирным начертанием

strong — отображает текст жирным начертанием, логически указывает на важность текста. Может быть использован для выделения ключевых слов для оптимизации поиска

i — задает курсивное начертание текста

em — задает курсивное начертание текста, логически указывает на важность текста

u — подчеркивает текст снизу

pre — сохраняет форматирование текста (не удаляет пробелы и переносы строк)

sup — текст отображается как верхний индекс

sub — текст отображается как нижний индекс

small — уменьшает текст на условную единицу

address — внутри указывается адрес (физический адрес, телефон, почта), обычно отображается курсивным шрифтом

mark — отображает текст как выделенный

abbr — оборачивает аббревиатуру (сокращение), в атрибуте title указывается ее расшифровка, которая показывается при наведении

kbd — отображает название клавиш или текст набранный пользователем, обычно отображается моноширинным шрифтом

dfn — внутри пишется название нового термина, далее идет его пояснение, обычно отображается курсивным шрифтом

ins — выделяет новый текст, который был добавлен при обновлении содержания, обычно отображается как подчеркнутый текст

del — выделяет старый текст, который был удален при обновлении содержания, обычно отображается как зачеркнутый текст

s — зачеркивает текст

Примеры: https://codepen. io/dmitryvalak/pen/zYKXjaV

Цитаты

q — отображает текст как цитату, обрамляет его кавычками

blockquote — отображает текст как цитату. По сравнению с тегом используется для длинных цитат, оформляется отступами

cite — выделяет цитату на материал из другого источника, обычно отображается курсивным шрифтом

Примеры: https://codepen.io/dmitryvalak/pen/yLarjoq

Списки

ul — маркированный список. Каждый элемент списка оборачивается тегами li

ol — нумерованный список. Каждый элемент списка оборачивается тегами li

dl — список терминов. Внутри используются теги: dt — название термина, dd — описание термина

Примеры: https://codepen.io/Yury_P/pen/mdrgZQb

Отображение кода

code — оборачивает программный код, обычно отображается моноширинным шрифтом, не учитывает переносы строк и дополнительные пробелы

var — оборачивает переменную из программного кода, обычно отображается моноширинным шрифтом

samp — оборачивает текст, которые является результатом вывода скрипта или программы, обычно отображается моноширинным шрифтом

Примеры: https://codepen. io/Yury_P/pen/yLaGxPB

Другие теги

span — строчный тег. Сам по себе не имеет никакого логического или визуального смысла. Часто используется внутри абзаца (

) для выделения части текста. Если часть текста нужно стилизовать по другому, ее можно обернуть в span, указать класс и в css добавить нужные стили

br — переносит текст на новую строку

wbr — указывает где можно сделать перенос слова

hr — вставляет горизонтальную полосу

bdo — задает направление текста, в атрибуте dir указывается направление: rtl — справа на лево, ltr — слева направо

bdi — запрещает изменение направления текста, по аналогии с bdo направление указывается в атрибуте dir, по умолчанию значение auto

Примеры: https://codepen.io/Yury_P/pen/rNMoZrL

Теги форматирования текста в HTML

Рейтинг: 4 из 5, голосов 64

08 февраля 2018 г.

К тегам форматирования текста в HTML можно отнести теги изменяющие отображение выделенного фрагмента.

Список тегов форматирования текста

<strong> — важный фрагмент текста, жирный;
<em> — акцентирование внимания, курсив;
<mark> — подсвеченный участок текста;
<b> — жирный шрифт;
<i> — курсив, наклонный шрифт;
<s> — зачеркнутый текст;
<small> — текст меньшего размера;
<sup> — верхний индекс;
<sub> — нижний индекс;
<pre> — предварительно отформатированный текст;
<dfn> — термин;
<h2> — <h6> — заголовки;
<q> — короткая внутристрочная цитата;
<blockquote> — цитата;
<cite> — сноска на название материала;
<code> — программный код;
<samp> — результат вывода компьютерной программы;
<kbd> — клавиатурный ввод;
<var> — переменная компьютерной программы.;
<time> — дата и/или время.

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

Теги выделения фрагментов текста

Тег <strong> используется для выделения важных участков текста. Браузеры обычно отображают текст внутри тега <strong> жирным шрифтом. <strong> — тег логического выделения. Используя его, вы указываете на важность текста в выделенной области.

<strong>Важный фрагмент текста</strong>

Тег <em> используется для акцентирования внимания, «подчеркивания» фрагмента текста. Браузеры обычно отображают текст внутри тега <em> курсивом. <em> — тег логического выделения.

<em>Акцентированный фрагмент</em>

Тег <mark> используется для подсветки фрагмента текста.

<mark>Подсвеченный фрагмент</mark>

Тег <b> используется для написания текста жирным шрифтом. Тег физического форматирования, не придает выделенным участком логический вес. Используйте тег <b> только если характер выделения не подходит под другой тег форматирования текста по смыслу.

<b>Текст жирным шрифтом</b>

Тег <i> используется для написания текста курсивом. Используйте тег <i> только если характер выделения не подходит под другой тег форматирования текста по смыслу.

<i>Текст курсивом</i>

Тег <s> используется для указания некорректности, неактуальности выделенного фрагмента. Текст внутри тега <s> выводится перечеркнутым.

<s>Перечеркнутый текст</s>

Тег <small> используется для написания текста шрифтом меньшего размера.

<small>Текст меньшего размера</small>

Тег <sub> используется для создания текста нижнего индекса.

<sub>Текст нижнего индекса</sub>

Тег <sup> используется для создания текста верхнего индекса.

<sup>Текст верхнего индекса</sup>

Тег <pre> указывает, что текст внутри должен быть выведен в том формате, в котором он был написан в редакторе: с учетом количества пробелов между словами и сохранением позиции строк.

<pre>Предварительно отформатированный текст</pre>

Теги устанавливающие суть содержимого

Теги <h2> — <h6> указывают, что содержимое является заголовком (подзаголовком). <h2> — заголовок наиболее высокого уровня, <h6> — наименьшего. Заголовки определяют структуру текста HTML документа. Браузера обычно выделяют заголовки размером шрифта, в зависимости от уровня заголовка.

<h2>Заголовок</h2>

Тег <dfn> указывает, что содержимое является термином. Браузеры обычно выводят содержимое тега <dfn> курсивом.

<dfn>Термин</dfn>

Тег <q> используется для указания на короткий процитированный участок внутри строки текста. Браузеры обычно выводят содержимое тега в кавычках.

<q>Короткая цитата</q>

Тег <blockquote> указывает, что содержимое является цитатой. Содержимое тега выводится в отдельном блоке.

<blockquote>Цитата</blockquote>

Тег <cite> указывает, что содержимое является названием материала. Браузеры обычно отображают текст внутри <cite> курсивом.

<cite>Название материала</cite>

Тег <code> указывает, что содержимое является кодом компьютерной программы. Браузеры обычно отображают текст внутри тега <code> моноширинным шрифтом.

<code>Код компьютерной программы</code>

Тег <samp> указывает, что содержимое является результатом вывода компьютерной программы. Браузеры обычно отображают текст внутри тега <samp> моноширинным шрифтом.

<samp>Результат вывода компьютерной программы</samp>

Тег <kbd> указывает, что содержимое является клавиатурным вводом. Браузеры обычно отображают текст внутри тега <kbd> моноширинным шрифтом.

<kbd>Клавиатурный ввод</kbd>

Тег <var> указывает, что содержимое является переменной компьютерной программы. Браузеры обычно отображают текст внутри тега <var> курсивом.

<var>Переменная компьютерной программы</var>

Тег <time> указывает, что содержимое является датой, временем, периодом времени или событием, относящемся к указаному в атрибуте datatime времени.

<time>Дата и/или время</time>

by Lebedev

— SVG: Масштабируемая векторная графика

Элемент SVG рисует графический элемент, состоящий из текста. К можно применить градиент, узор, обтравочный контур, маску или фильтр, как и к любому другому графическому элементу SVG.

Если текст включен в SVG не внутри элемента , он не отображается. Это отличается от скрытого по умолчанию, так как установка свойства display не будет отображать текст.

 html,
тело,
свг {
  высота: 100%;
}
 

х

Координата x начальной точки базовой линии текста.
Тип значения : <длина> | <процент> ; Значение по умолчанию : 0 ; Анимация : да

г

Координата Y начальной точки базовой линии текста.
Тип значения : <длина> | <процент> ; Значение по умолчанию : 0 ; Анимация : да

дх

Смещает положение текста по горизонтали относительно предыдущего текстового элемента.
Тип значения : <длина> | <процент> ; Значение по умолчанию : нет ; Анимация : да

день

Смещает положение текста по вертикали от предыдущего текстового элемента.
Тип значения : <длина> | <процент> ; Значение по умолчанию : нет ; Анимация : да

поворот

Изменяет ориентацию каждого отдельного глифа. Может вращать глифы по отдельности.
Тип значения : <список номеров> ; Значение по умолчанию : нет; Анимация : да

регулировка длины

Как текст растягивается или сжимается, чтобы соответствовать ширине, определяемой атрибутом textLength .
Тип значения : интервал | spacingAndGlyphs ; Значение по умолчанию : интервал ; Анимация : да

длина текста

Ширина, по которой должен масштабироваться текст.
Тип значения : <длина> | <процент> ; Значение по умолчанию : нет ; Анимация : да

Глобальные атрибуты

Основные атрибуты

В частности: id , tabindex

Атрибуты стиля

Класс , Style , Font-Family , Font-Size , Font-Size-Adjust , Font-Streeth , Font-стиль , Font-Variant , Font- вес

Атрибуты условной обработки

В частности: requiredExtensions , systemLanguage

Атрибуты событий

Глобальные атрибуты событий, Графические атрибуты событий

Атрибуты презентации

наиболее примечательно: Clip-Path , -процесс формирования , Color , Color-Interpolation , Распространение цветового Рендрирования , Cursor , Дисплей , Dominant-Baseline , , , , Dominant-Baseline , , , , . заливка-непрозрачность , заливка-правило , фильтр , маска , непрозрачность , Pointer-EVENTS , Ренденринг формы , ход , ход-Dasharray , Husm-Dashoffset , Shuck-LineCap , , штрих-ширина , текст-привязка , преобразование , вектор-эффект , видимость

Атрибуты арии

ария-активный потомок , Aria-Atomic , Aria-Autocopplete , Aria-Busy , , проверенный арией , Aria-clecount , Aria-Colindex , -Claspan , , Aria-Controls , -Claspan , , , , . ARIA-Current , ARIA-Describedby , Aria-Details , Aria-Disablet. -схватил , Aria-Haspopup , Aria-Hidden , Aria-invalid , Aria-Keyshortcuts , Aria-Label , Aria-Labelledby , Aria-Level , 4, 4, Aria-Level , 4, 4, , -уровни , 4, 4, -уровни , 4, 4, -уровни , 4, 4, -уровни , , , , -уровни , , 4, -уровне. -Модал , Aria-Multiline , Aria-MultiSelectable , , ориентированная на арию , Aria-Unds , ARIA-Placeholder , Aria-позин , -Presested , 4. , ария-релевантная , aria-required , aria-roledescription , aria-rowcount , aria-rowindex , aria-rowspan , aria-selected , aria-setsize , aria-sort , aria-valuemax , aria-valuemin , aria-valuenow , aria-valuetext , роль

Таблицы BCD загружаются только в браузере

с включенным JavaScript. Включите JavaScript для просмотра данных.

• Другие элементы, связанные с текстом SVG: , ,

Обнаружили проблему с содержанием этой страницы?

• Отредактируйте страницу на GitHub.
• Сообщить о проблеме с содержимым.
• Просмотрите исходный код на GitHub.

Хотите принять больше участия?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена 6 марта 2023 г. участниками MDN.

текстовый тег

Редактировать на GitHub

Убедитесь, что вы прочитали документ "Синтаксис тегов" и понимаете, как работает синтаксис атрибутов тегов.

Описание

Отображение текстового сообщения I18n.

Сообщение должно находиться в пакете ресурсов с тем же именем, что и действие, с которым оно связано. На практике это
означает, что вы должны создать файл свойств в том же пакете, что и ваш класс Java, с тем же именем, что и ваш класс,
но с .свойства расширение.

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

Дополнительные сведения об использовании пакетов ресурсов со Struts 2 см. в руководстве по локализации.

Отображение текстового сообщения I18n

Атрибуты

Разрешены динамические атрибуты: ложь
escapeCsv	ложно	ложно	ложно	Булево значение	Нужно ли экранировать CSV (полезно для экранирования значения столбца)
escapeHtml	ложно	ложно	ложь	Булево значение	Нужно ли экранировать HTML
escapeJavaScript	ложно	ложно	ложно	Булево значение	Нужно ли экранировать Javascript
escapeXml	ложно	ложно	ложно	Булево значение	Нужно ли экранировать XML
имя	правда		ложно	Строка	Имя свойства ресурса для извлечения
выполнитьClearTagStateForTagPoolingServers	ложно	ложно	ложно	Булево значение	Очистить ли все состояние тега во время обработки doEndTag() (если применимо)
вар	ложно		ложно	Строка	Имя, используемое для ссылки на значение, помещенное в стек значений (область действия: действие).

ПРИМЕЧАНИЕ : Когда атрибут var используется с тегом text , сгенерированное значение тега не будет записано в
видимая страница (она будет помещена только в область действия).

Примеры

Доступ к сообщениям из заданного пакета (пример пакета i18n Shop в первом примере) и использование определенного пакета
через фреймворк во втором примере.

 
 
     
 
 
 
 
 
    Мистер Смит
 
 

Другой пример

, где в обычном файле свойств (возможно, зависящем от локали) находится следующее:

 format.
This entry was posted in Популярное