HTML-теги для оформления текста

28 декабря 2020

Современный сайт невозможно представить без текстов. Чтобы пользователи могли легко взаимодействовать с контентом, важно позаботиться о его форматировании. Использование html тегов позволяет оформить текст, выбрать шрифт и начертание, выделить заголовки – другими словами, сделать всё, чтобы информация стала наглядной и доступной.

Релиз Аркады от CatAffs: лови хайп и лей на чистую базу!

Подробнее

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

Содержание скрыть

1. Как обернуть текст в тег

2. Тег шрифта

3. Тег цвета в html

4. Тег заголовка

5. Тег текста по центру

6. Тег жирного текста

7. Тег зачеркнутого текста

8. Тег подчеркнутого текста

9. Тег ссылки

10. Выводы

Как обернуть текст в тег

Html теги – это своего рода контейнеры для текста. Они не имеют визуального отображения, но несут смысловую нагрузку, и указывают, как будет отображаться на странице сайта каждый текстовый фрагмент.

За вид текста в целом отвечает хтмл тег <font>. Через его атрибуты face, size и color можно задать необходимый шрифт, его размер и цвет.

*Как указать шрифт при помощи html тега*

Эти атрибуты можно располагать в любом порядке и использовать по отдельности.

Тег шрифта

Размер шрифта можно изменить при помощи атрибута size. Указывается в виде цифры, по умолчанию применяется значение size =”3”.

При помощи html тегов можно задать любой из 3 типов шрифтов:

С засечками (serif)
Без засечек (san-serif)
Моноширинный (monospaced)

Атрибут face задает необходимый шрифт, достаточно указать его название.

Приведем пример использования html тега шрифта:

<html>
<body>
<font face=Times New Roman size=»5″>пример шрифта serif — Times New Roman <font/>
<font face=Arial size=»4″>пример шрифта san-serif — Arial<font/>
<font face=courier>пример шрифта monospaced — Courier<font/>
<body/>
<html/>

Данное форматирование будет выглядеть на странице следующим образом:

*Результат применения html тега <font> с атрибутами face и size*

Тег цвета в html

Задать цвет шрифта при помощи атрибута color можно тремя способами. Первый – указать RGB код цвета, второй – выбрать html код цвета, третий – просто написать его название. Посмотреть коды популярных цветов можно в специальных таблицах.

Воспользуемся способом указания цвета по его названию.

<html>
<body>
<font color=Crimson size=»5″>выбор цвета шрифта Crimson<font/>
<body/>
<html/>

*Результат применения html тега <font> с атрибутом color*

Тег заголовка

Заголовки – одни из важнейших элементов, которые формируют структуру web-страницы. Для создания логической последовательности текста, выделения названий разделов используются заголовки разных уровней. Они выделяются html тегами <h1>,<h2>,…<h6>.

Важно учитывать, что заголовок с хтмл тегом <h1> может использоваться на каждой странице сайта только один раз. Он должен быть уникальным и содержать ключевые слова, соответствующие тематике страницы.

Размеры шрифта заголовков разных уровней:

Уровень заголовка	Размер шрифта в браузере	Верхний и нижний отступы
<h1>	2em	0,67em
<h2>	1,5em	0,83em
<h3>	1,17em	1em
<h4>	1em	1,33em
<h5>	0,83em	1,67em
<h6>	0,67em	2,33em

Тег текста по центру

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

Выбрав html тег align=»center», можно выровнять слово, предложение или абзац по центру.

*Как выглядит выравнивание текста на веб-странице*

Тег жирного текста

Полужирное начертание шрифта можно установить при помощи двух разных html тегов.

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

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

Тег зачеркнутого текста

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

Теги <s> и <strike> также визуально делает шрифт перечеркнутым. Не несут дополнительной смысловой нагрузки.

Тег подчеркнутого текста

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

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

Тег ссылки

Для оформления внешних и внутренних ссылок на сайте используется html тег <a>. Он обязательно содержит атрибут href=»url», который указывает на адрес ссылки. Между тегами <a> <a/> прописывают анкор, чтобы обозначить, как ссылка будет выглядеть для пользователей. Анкором могут быть слова, символы или объекты.

*Как оформить ссылку на сайте html тегами*

Выводы

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

При оформлении заголовков на странице необходимо последовательно использовать html теги <h1>, <h2>,…<h6>. Заголовок первого уровня может применяться на странице только один раз, и содержать подходящие по смыслу ключевые слова.

Непосредственно за шрифт, его цвет и размер отвечает html тег <font> и его атрибуты.

Краткое резюме по статье

Зачем нужны хтмл теги?

Разметка текста при помощи html тегов нужна для визуального оформления контента. Также она влияет на поисковую оптимизацию и продвижение сайта.

Какие теги html изменяют шрифт?

За шрифт отвечает хтмл тег <font> и его атрибуты size,color и font. С их помощью изменяют размер, цвет и непосредственно шрифт.

Какие хтмл теги применяют для выделения текста?

Чтобы сделать жирный текст, используют тег <b> или <strong>. Зачеркнутый фрагмент можно добавить при помощи тегов <del>, <s> или <strike>. Подчеркивание осуществляется при помощи <u> или <ins>.

Что означает размер шрифта em?

Em – это относительное значение, которое зависит от размера шрифта текущего элемента. Отсчет начинается от шрифта, заданного в браузере по умолчанию. Его размер как раз будет равен 1em.