Теги форматирования текста в HTML
Рейтинг: 4 из 5, голосов 77
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
HTML теги оформления текста | Vaden Pro
Вы здесь
Главная → Блог → HTML → HTML теги для оформления текста
Раздел:
Для разметки текста в html используется набор тегов позволяющий разделять текст на логические части, акцентировать внимание читателя на отдельных его частях, а также оптимизировать содержание для более удобного понимания поисковыми роботами, что приводит к улучшению ранжирования страницы текста в поисковой выдаче по ключевым запросам.
Сразу отмечу, что все элементы для форматирования текста рассмотренные в данной статье (кроме br) являются парными. Тоесть для обрамления содержимого тегом должен присутствовать как открывающий тег , так и закрывающий ваш_тег>. Пример:
<h4>Правильно написанный заголовок текста</h4> <p>Абзац с переносом строки посреди абзаца.<br> Пример использования непарного тега внутри парного.</p>
Формирование структуры текста (блочные элементы).
Теги заголовков и абзацев.Теги h2-h6 отвечают за выделение текста в виде заголовков. Более подробно о их семантичеком влиянии и важности для построения логической структуры страницы для поисковиков написано тут.
Если говорить о них вкратце, то заголовки страницы имеют ключевую роль во внутренней оптимизации страницы для поисковиков. В связи с этим формулировки заголовков на странице должны быть максимально приближены к ключевым запросам по которым Вы собираетесь продвигать статью в поисковой выдаче.
Визуально заголовки выделяются жирным начертанием и большим размером шрифта относительно остального текста.
Тег p отвечает за выделение абзацев. Вместе с тегами заголовков тег p является блочным элементом оформления текста, потому при его использовании каждый последующий абзац начинается с новой строки, чего не происходит при использовании строчных элементов.
HTML теги для разметки текста (строчные элементы)
- span — схож по своему смыслу с тегом p, но является строчным элементом.
Обычно используется для обозначения части текста внутри абзаца. Зачем это нужно? Все достаточно просто- обозначенному тексту в дальнейшем через CSS можно задать оформление отличающееся от оформления остального текста. - br -делает перенос строки. ТЕГ НЕ ПАРНЫЙ (тобишь закрывающего тега у него нет). Примерно то же самое, что если бы Вы нажали Enter в Верде. В отличие от переноса, создаваемого блочными элементами, не несет на себе никакой логической нагрузки. Используется исключительно для более красивого оформления текста. Рекомендуется избегать его использования без крайней необходимости, поскольку по-сути он просто засоряет код, а для переносов в тексте нужно его просто разбивать на абзацы.
- strong — выделяет шрифт жирным. Служит для расстановки логических ударений в тексте для поисковых роботов. Широко используется для внутренней оптимизации текста. Ключевые фразы в тексте рекомендуется обрамлять в этот тег, чтобы робот лучше понимал о чем статья. ВНИМАНИЕ! Важно не переборщить — если схожие ключи в тексте попадаются больше 3-5 раз, то это может быть расценено как переоптимизация текста и страница с текстом будет занижена в поисковой выдаче.
- b — визуально ничем не отличается от стронга, но не несет в себе никакой смысловой нагрузки для поисковика. Используется для выделения частей текста исключительно для тех, кто будет его читать. К примеру, если необходимо выделить фразу не содержащую ключевых слов, но способную облегчить понимание структуры текста пользователю.
- em — делает текст внутри тега курсивом. Также как и стронг используется для внутренней оптимизации текста под поисковое продвижение, только обладает меньшим весом в сравнении с ним.
- i — визуально ничем не отличается от <em>. Не несет смысловой нагрузки для роботов, используется для увеличения удобства прочтения текста пользователями. Аналог тега <b>, только для курсива.
- ins— используется для подчеркивания текста. Выделяет текст как для пользователя, так и для поисковика.
- u — визуально тождественен предыдущему тегу. Выделяет текст только для пользователя.
- tt — выводит текст моноширинным шрифтом. Не несет в себе смысловой нагрузки. Моноширинный означает, что для всех символов шрифта ипользуется одинаковое пространство при написании.
- pre — блочный элемент. Используется для того, чтобы сделать моноширинными большие участки текста. Внутри него можно применять любые теги для форматирования текста, кроме sub и sup.
- sub — выводит текст как нижний индекс ( уменьшает шрифт текста и выводит его немного ниже уровня строки).
- sup — выводит текст как верхний индекс ( уменьшает шрифт текста и выводит его немного выше уровня строки).
- strike (s) — делает текст перечеркнутым. Эти два тега абсолютно аналогичны по своему содержанию. Современная документация html вообще осуждает их использование, говоря о том, что для перечеркнутого текста можно использовать css, а эти теги больше просто засоряют код.
Обычно используется для обозначения части текста внутри абзаца. Зачем это нужно? Все достаточно просто- обозначенному тексту в дальнейшем через CSS можно задать оформление отличающееся от оформления остального текста.
ВНИМАНИЕ! Важно не переборщить — если схожие ключи в тексте попадаются больше 3-5 раз, то это может быть расценено как переоптимизация текста и страница с текстом будет занижена в поисковой выдаче.
Выделяет текст как для пользователя, так и для поисковика.
Использование нескольких тегов одновременно
Мы ознакомились с основными тегами для оформления текста. Их можно применять не только по-отдельности а и один внутри другого, главное при этом помнить основной принцип вложенности тегов — тег, который был открыт первым должен быть закрыт последним. Тобишь:
<p><b><i>Жирный текст написанный курсивом</i></b></p> <!--Верно--> <p><b><i>Жирный текст написанный курсивом</b></i></p> <!--Не верно-->
Теги находящиеся внутри других тегов формируют порядок вложенности. Так, в рассмотренном примере тег i имеет второй уровень вложенности относительно тега p.
ОБРАТИТЕ ВНИМАНИЕ! Использовать строчные элементы внутри блочних разрешено, в то время как блочные внутри строчных- нет. Хоть браузер и отразит все корректно, если Вы, к примеру, используете тег p внутри тега b. Это будет не верно с точки зрения документации html.
Тобишь такой код будет содержать ошибку и Вы это можете спокойно проверить воспользовавшись любым сервисом валидации html кода.
Вопросы для самоконтроля:
- Какие теги форматирования текста являются блочными, а какие строчными? В чем между ними разница?
- Какие существуют способы выделения текста жирным шрифтом? В чем между ними разница?
- Какие существуют способы выделения текста курсивом? В чем между ними разница?
- Как правильно переносить строки в html?
- Как формируется порядок вложенности тегов?
Ключевые слова:
Основные теги HTML
Еще интересное
Стиль HTML — javatpoint
следующий → ← предыдущая Стиль HTML используется Атрибут стиля можно использовать с любым тегом HTML. Ниже приведен синтаксис атрибута стиля: стиль = «свойство: значение» Цвет стиля HTMLСвойство color используется для определения цвета текста. Давайте рассмотрим простой пример стилизации html-тегов с помощью свойства цвета CSS. Это зеленый цветЭто красный цветПротестируйте сейчасВывод: Это зеленый цветЭто красный цветЦвет фона стиля HTMLСвойство background-color используется для определения цвета фона тега HTML. Давайте посмотрим на пример стилизации тега html с помощью свойства css background-color Это желтый фонЭто красный фонПротестируйте сейчасВывод: Это желтый фонЭто красный фонСемейство шрифтов HTML Style Свойство font-family указывает семейство шрифтов тега HTML. Давайте посмотрим пример стилизации тега html с помощью css свойство font-family Это новое семейство романских шрифтов TimesЭто семейство шрифтов Arial Протестируйте сейчасВывод: Новое семейство романских шрифтов TimesЭто семейство шрифтов arial Размер шрифта стиля HTMLСвойство font-size используется для определения размера текста тега HTML. Давайте посмотрим на пример свойства font-size Это тег h4 на 200%Это тег p на 200 % Протестируйте сейчасВывод: Это 200% тег h4Это тег 200% p Выравнивание текста в стиле HTMLСвойство text-align используется для определения горизонтального выравнивания текста для элемента HTML. Давайте посмотрим пример стилизации тега html с помощью свойства css Этот текст расположен справаЭтот текст расположен в центре сбоку Протестируйте сейчас Если вы хотите разместить заголовок по центру или слева, используйте «text-align:center» или «text-align:left» соответственно. Вывод: Этот текст расположен справаЭтот текст расположен в центре сбоку HTML5 не поддерживает тегПоддержка браузеров
Если вы хотите узнать больше о стилях HTML, вы можете прочитать об этом в учебнике по CSS. Следующая темаПодтег HTML ← предыдущая следующий → |
Чтобы применить стиль к тегу HTML, вы должны иметь базовые знания о свойствах css, например. цвет, цвет фона, выравнивание текста, семейство шрифтов, размер шрифта и т. д.
Стили HTML
Атрибут стиля — это новый атрибут HTML. Он представляет CSS в HTML.
Этот текст написан красным шрифтом Verdana Этот текст набран шрифтом Times и зеленым цветом Этот текст имеет высоту 30 пикселей |
Попробуйте сами
Атрибут стиля HTML
Назначение атрибута стиля:
Чтобы обеспечить общий стиль
все HTML-элементы.
Стили были представлены в HTML 4 как новый и предпочтительный способ оформления HTML. элементы. С помощью стилей HTML стили можно добавлять к элементам HTML напрямую, с помощью атрибута стиля или косвенно в отдельных таблицах стилей (CSS файлы).
Вы можете узнать все о стилях и CSS в нашем учебнике по CSS.
В нашем руководстве по HTML мы используем атрибут стиля, чтобы познакомить вас с HTML. стили.
Примеры стилей HTML
стиль = «цвет фона: желтый»
стиль = «размер шрифта: 10 пикселей»
стиль = «семейство шрифтов: раз»
стиль = «выравнивание текста: по центру»
Устаревшие теги и атрибуты
В HTML 4 некоторые теги и атрибуты определены как устаревшие. Устаревшие означает, что они не будут поддерживаться в будущих версиях HTML. и XHTML.
Сообщение ясно: избегайте использования устаревших тегов и атрибутов.
Следует избегать следующих тегов и атрибутов:
| Метки | Описание |
|---|---|
| <центр> | Определяет содержимое по центру |
| <шрифт> и <базовый шрифт> | Определяет шрифты HTML |
| | Определяет зачеркнутый текст |
| <и> | Определяет подчеркнутый текст |
| Атрибуты | |
| выровнять | Определяет выравнивание текста |
| бгколор | Определяет цвет фона |
| цвет | Определяет цвет текста |
Для всего вышеперечисленного: вместо этого используйте стили.
Примеры стилей:
Цвет фона
<тело>
Атрибут стиля определяет стиль для элемента
.Попробуй себя: цвет фона
Новый атрибут стиля делает «старый» атрибут bgcolor устаревший.
Попробуй себя: Фон по старинке
Семейство шрифтов, цвет и размер
Атрибут стиля определяет стиль для элемента
.
Попробуйте сами: Пример шрифта
Новый атрибут стиля делает старый тег устаревшим.
Попробуйте сами: Шрифты по старинке
Выравнивание текста
Атрибут стиля определяет стиль для элемента
.
Попробуйте сами: Заголовок по центру
Новый атрибут стиля делает старый атрибут «align» устаревший.
Попробуйте сами: Заголовок по центру по-старому
Сделайте так, чтобы ваши веб-приложения выглядели на миллион долларов
В настоящее время большинство веб-приложений используют скучные методы представления данных своим зрителям с помощью сеток или простых таблиц HTML. |
