HTML-форматирование

Форматирование HTML — это процесс форматирования текста для улучшения внешнего вида. HTML дает нам возможность форматировать текст без использования CSS. В HTML много тегов форматирования. Эти теги используются для выделения текста жирным шрифтом, курсивом или подчеркиванием. Доступно почти 14 вариантов того, как текст отображается в HTML и XHTML.
В HTML теги форматирования делятся на две категории:
◦ Физический тег: Эти теги используются для придания визуального вида тексту.
◦ Логический тег: эти теги используются для добавления к тексту некоторого логического или семантического значения.
ПРИМЕЧАНИЕ. Некоторые физические и логические теги могут выглядеть одинаково, но их семантика будет разной.
Здесь мы изучим 14 тегов форматирования HTML. Ниже приведен список форматирования текста HTML.

<b>
Это физический тег, который используется для выделения текста между ними жирным шрифтом.
<strong>
Это логический тег, который сообщает браузеру, что текст важен.
<i>
Это физический тег, который используется для выделения текста курсивом.
<em>
Это логический тег, который используется для отображения содержимого курсивом.
<mark>
Этот тег используется для выделения текста.
<u>
Этот тег используется для подчеркивания текста, написанного между ним.
<tt>
Этот тег используется для отображения текста в телетайпе. (не поддерживается в HTML5)
<strike>
Этот тег используется для зачеркивания части текста. (Не поддерживается в HTML5)
<sup>
Он отображает содержимое немного выше обычной строки.
<sub>
Он отображает содержимое чуть ниже обычной строки.
<del>
Этот тег используется для отображения удаленного контента.
<ins>
Этот тег отображает контент, который добавляется.
<big>
Этот тег используется для увеличения размера шрифта на одну условную единицу.
<small>
Этот тег используется для уменьшения размера шрифта на одну единицу по сравнению с базовым размером шрифта.

1) Жирный текст

Элементы форматирования HTML <b> и <strong>

HTML-элемент <b> — это физический тег, отображающий текст жирным шрифтом без какой-либо логической значимости. Если вы пишете что-либо внутри элемента <b>............</b>, оно отображается жирным шрифтом.
См. этот пример:
<p><b>Напишите первый абзац жирным шрифтом.</b></p>

Тег HTML <strong> — это логический тег, который отображает содержимое жирным шрифтом и информирует браузер о его логической важности. Если вы пишете что-нибудь между <strong>???????.</strong> отображается важный текст.
См. этот пример:
<p><strong>Это важный контент</strong>, и это обычный контент</p>

Пример

<!DOCTYPE html>
<html>
<head>
    <title>элементы форматирования</title>
</head>
<body>
<h1>Объяснение элемента форматирования</h1>
<p><strong>Это важный контент</strong>, и это обычный контент</p>
</body>
</html>

2) Курсив

Элементы форматирования HTML <i> и <em>

Элемент HTML <i> — это физический элемент, который отображает заключенное в нем содержимое курсивным шрифтом без какой-либо дополнительной важности. Если вы пишете что-либо внутри элемента <i>............</i>, оно отображается курсивом.
См. этот пример:
<p><i>Напишите первый абзац курсивом.</i></p>

HTML-тег <em> — это логический элемент, который будет отображать заключенное в нем содержимое курсивным шрифтом с дополнительной важностью семантики.
См. этот пример:
<p><em>Это важное содержимое</em>, которое отображается курсивом.</p>

<!DOCTYPE html>
<html>
<head>
    <title>элементы форматирования</title>
</head>
<body>
<h1>Объяснение элемента форматирования курсивом</h1>
<p><em>Это важное содержимое</em>, которое отображается курсивом.</p>
</body>
</html>

3) Форматирование с пометкой

Если вы хотите пометить или выделить текст, вы должны написать содержимое внутри <mark>.........</mark>.
См. этот пример:
<h2>Я хочу поставить <mark>Метку</mark> на твое лицо</h2>

4) Подчеркнутый текст

Если вы пишете что-либо внутри элемента <u>.........</u>, оно отображается подчеркнутым текстом.
См. этот пример:
<p><u>Напишите свой первый абзац в подчеркнутом тексте.</u></p>

5) зачёркнутый текст

Все, что написано в элементе <strike>......................</strike>, отображается зачеркнутым. Это тонкая линия, которая пересекает текст.
См. этот пример:
<p><strike>Напишите свой первый абзац с зачеркиванием<strike>.</p>

6) Моноширинный шрифт

Если вы хотите, чтобы каждая буква имела одинаковую ширину, вы должны написать содержимое внутри элемента <tt>.............</tt>.
Примечание. Мы знаем, что большинство шрифтов известны как шрифты с переменной шириной, потому что разные буквы имеют разную ширину. (например: «w» шире, чем «i»). Моноширинный шрифт обеспечивает одинаковое пространство между каждой буквой.
См. этот пример:
<p>Здравствуйте <tt>Напишите свой первый абзац моноширинным шрифтом.</tt></p>

7) Надстрочный текст

Если вы поместите содержимое в элемент <sup>..............</sup>, оно отображается в верхнем индексе; означает, что он отображается на половину высоты символа выше других символов.
См. этот пример:
<p>Привет <sup>Напишите свой первый абзац в верхнем индексе.</sup></p>

8) Подстрочный текст

Если вы помещаете содержимое в элемент <sub>..............</sub>, отображается в нижнем индексе; означает, что он отображается на половину высоты символа ниже других символов.
См. этот пример:
<p>Привет <sub>Напишите свой первый абзац в нижнем индексе.</sub></p>

9) Удаленный текст

Все, что находится внутри <del>..........</del>, отображается как удаленный текст.
См. этот пример:
<p>Здравствуйте, <del>Удалите свой первый абзац.</del></p>

10) Вставленный текст

Все, что находится внутри <ins>..........</ins>, отображается как вставленный текст.
См. этот пример:
<p><del>Удалите первый абзац.</del><ins> Написать еще один абзац.</ins></p>

11) Крупный текст

Если вы хотите, чтобы размер шрифта был больше остального текста, поместите содержимое в <big>.........</big>. Это увеличивает на один размер шрифта больше, чем предыдущий.
См. этот пример:
<p>Здравствуйте <big>Напишите абзац более крупным шрифтом.</big></p>

12) Меньший текст

Если вы хотите, чтобы размер шрифта был меньше остального текста, поместите содержимое в тег <small>.........</small>. Он уменьшает на один размер шрифта по сравнению с предыдущим.
См. этот пример:
<p>Здравствуйте <small>Напишите абзац более мелким шрифтом.</small></p>

Обсуждение закрыто.