Форматирование в HTML — это процесс изменения внешнего вида и структуры текстового содержимого на веб-страницах. Сюда входят такие задачи, как изменение размера шрифта, цвета, применение стилей, таких как жирный или курсив, настройка выравнивания и организация содержимого в списки или таблицы.
Правильное форматирование делает текстовое содержимое более удобным для чтения и понимания, а также значительно повышает вовлеченность пользователей. HTML предоставляет стандартный способ реализации этих задач форматирования с помощью различных тегов и атрибутов, так что содержимое отображается систематически в различных веб-браузерах.
В этом уроке мы изучим некоторые наиболее часто используемые теги форматирования текста в HTML и то, как их можно реализовать для улучшения представления текста.
Теги форматирования текста HTML
Теги форматирования текста являются важными элементами в HTML, которые позволяют нам стилизовать внешний вид и структуру текстового содержимого на веб-странице. HTML предоставляет множество тегов для стилизации текста, включая выделение текста жирным шрифтом, курсивом, выделение его подложкой и многое другое.
В HTML мы можем в целом классифицировать теги форматирования на два типа: физические теги и логические (или семантические) теги. Эта классификация помогает различать теги на основе их цели и влияния на текст.
Физические теги
Физические теги в основном касаются визуального представления текста на веб-странице. Они изменяют внешний вид текста, не обязательно передавая какой-либо дополнительный смысл или важность содержанию. Вот некоторые примеры физических тегов: <b>, <i>, <u> и т. д.
Эти теги напрямую влияют на стиль текста, но они не несут никакой семантической информации о том, почему текст оформлен определенным образом.
Логические (семантические) теги
Логические или семантические теги, с другой стороны, используются для добавления некоторого логического или семантического значения к тексту. Эти теги предоставляют информацию о природе текста. Некоторые примеры логических тегов: <strong>, <em>, <mark> и т. д.
Важные теги форматирования текста с примером
Ниже перечислены важные теги форматирования текста в HTML, а также краткие описания и примеры для каждого из них.
HTML полужирный текст
(1) <b>: Этот тег является одним из самых основных тегов форматирования текста, который используется для выделения текста жирным шрифтом. Он не подразумевает никакой дополнительной важности или акцента. Этот тег считается физическим тегом, поскольку он напрямую влияет на то, как текст выглядит на веб-странице, но не сообщает семантическое или логическое значение содержимому.
Пример:
<!DOCTYPE html>
<body>
<p>This is regular text and <b>this is bold text</b>.</p>
</body>
</html>
Выход:
(2) <strong>: Это логический тег, который определяет текст с высокой степенью важности. Текстовое содержимое внутри тегов форматирования <strong> и </strong> обычно отображается жирным шрифтом на веб-странице.
Пример:
<!DOCTYPE html>
<body>
<p><strong>This is an important text</strong>, this is a normal text.</p>
</body>
</html>
HTML курсивный текст
HTML предоставляет два тега форматирования для выделения текста курсивом: <i> и <em>.
(1) <i>: Это физический тег, который определяет курсивный текст, не подразумевая какой-либо дополнительной важности или акцента.
Пример:
<!DOCTYPE html>
<body>
<p>The word <i>pizza</i> comes from Italian.</p>
</body>
</html>
Выход:
(2) <em>: Тег <em> — это логический тег в HTML, который определяет выделенный текст. Текстовое содержимое внутри тега <em> обычно отображается курсивом. Однако основная цель использования тега <em> — семантическая, а не стилистическая. Он сообщает браузерам, что текст внутри этого тега должен произноситься с акцентом.
Вот простой пример того, как можно использовать тег форматирования текста <em> в HTML:
Пример:
<!DOCTYPE html>
<body>
<p>Do not turn off the device when it is <em>updating</em>.</p>
</body>
</html>
HTML-тег <small>
Этот тег форматирования текста определяет меньший текст. Содержимое внутри элемента <small> отображает текст на один размер шрифта меньше, чем остальной текст вокруг него. Если шрифт уже самый маленький, это не имеет никакого эффекта. Вот простой пример, демонстрирующий, как можно использовать тег <small>:
Пример:
<!DOCTYPE html>
<body>
<p>This is a normal text and <small>this is small text</small>.</p>
</body>
</html>
HTML-элемент <mark>
Элемент <mark> в HTML по умолчанию выделяет текст желтым фоном. Обычно мы используем этот тег, чтобы привлечь внимание к определенной части текста, например, к терминам, найденным при поиске в документе, или к важным фрагментам информации. Вот простой пример, показывающий, как тег <mark> можно использовать для выделения текста:
Пример:
<!DOCTYPE html>
<body>
<p>Do not forget to buy <mark>fruits</mark> today.</p>
</body>
</html>
Выход:
HTML-элемент <del>
В HTML тег <del> определяет текст, который был удален из документа. Веб-браузеры обычно зачеркивают удаленный текст, указывая, что он был удален. Текст, заключенный в тег <del>, не только изменяет внешний вид текста, но и несет семантическое значение, явно помечая текст как удаленный. Посмотрите на пример ниже.
Пример:
<!DOCTYPE html>
<body>
<p>My favorite fruit is <del>banana</del>, apple.</p>
</body>
</html>
HTML-тег <ins>
В HTML тег <ins> определяет текст, который был вставлен в документ. Браузеры часто отображают недавно добавленный текст с подчеркиванием. Обычно мы используем этот тег при редактировании документа, когда нам нужно добавить несколько новых текстов к существующему контенту.
Пример:
<!DOCTYPE html>
<body>
<p>The meeting will be held on <ins>Thursday</ins>, not Tuesday as previously stated.</p>
</body>
</html>
Выход:
HTML-тег <sub>
Тег <sub> в HTML определяет подстрочный текст, который отображается на половину символа ниже обычной строки. Иногда он отображается более мелким шрифтом. Этот тег обычно используется в математических выражениях, химических формулах или других контекстах, где символ должен отображаться на половину символа ниже обычной строки.
Пример:
<!DOCTYPE html>
<body>
<p>Water is chemically represented as H<sub>2</sub>O.</p>
</body>
</html>
HTML-тег <sup>
В HTML тег <sup> определяет надстрочный текст, который отображается на полсимвола выше обычной строки. Иногда он отображается более мелким шрифтом. Этот тег обычно используется для сносок, математических показателей и других контекстов, где нам нужно, чтобы символ отображался немного выше обычной строки текста.
Пример:
<!DOCTYPE html>
<body>
<p>The formula for water is H<sub>2</sub>O and the speed of light in a vacuum is approximately 3 x 10<sup>8</sup> meters per second.</p>
</body>
</html>
Выход:
Теги форматирования текста HTML
Форматирование HTML включает в себя написание текстового содержимого более привлекательным и информативным на веб-странице с помощью написания жирным шрифтом, курсивом и подчеркиванием. Теги форматирования сообщают браузеру, как отображать и форматировать текст. Здесь мы перечислили часто используемые теги форматирования с кратким описанием в таблице.
| Ярлык | Описание |
|---|---|
<b> | Этот тег определяет жирный текст. |
<em> | Этот тег определяет выделенный текст. |
<i> | Этот тег определяет курсивный текст. |
<small> | Этот тег определяет более мелкий текст. |
<strong> | Этот тег определяет важный текст. |
<sub> | Этот тег определяет подстрочный текст. |
<sup> | Этот тег определяет надстрочный текст. |
<ins> | Этот тег определяет вставленный текст. |
<del> | Этот тег определяет удаленный текст. |
<mark> | Этот тег определяет выделенный или подсвеченный текст. |
В этом уроке мы объяснили различные теги или элементы форматирования текста в HTML на примерах. Мы надеемся, что вы поняли базовое определение каждого тега и попрактиковались во всех примерах. Удачного кодирования!!!
