HTML текст

Текст в HTML
HTML текст — теги, которые используются для форматирования текста на web-странице. Предполагается что вы уже изучили основы HTML настоящего самоучителя HTML.

Правильное и качественное форматирование текста в документе решает две задачи:

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

Согласитесь, легче читать текст который разбит на абзацы с подзаголовками. А вот «портянку» сплошного текста читать довольно трудно.

Рассмотрим основные и дополнительные теги форматирования текста в HTML.

Заголовоки в HTML

Заголовки в HTML создаются с помощью тега h после которого идет цифра от 1 до 6, например <h1>, где:

  • h — сокращение от английского heading (заголовок);
  • 1…6 — уровни заголовка.

Заголовки используются для определения нового раздела или подраздела. Заголовки имеют иерархию, от заголовка <h1> до заголовка <h6>.

Например, если мы рассматриваем какую-либо обширную тему, мы заключаем ее название в <h1>. Заголовок на уровень ниже в <h2> и так далее до <h6>.

Например, возьмем заголовок «рецепты с гречкой». Далее все зависит от того, как вы хотите структурировать страницу. Я бы взял и разделил следующим образом:

  1. h1 — рецепты с гречкой;
  2. h2 — рецепты с гречкой в (мультиварке, духовке, кастрюле);
  3. h3 — рецепты с гречкой в … с (мясом, луком, курицей);
  4. h4 — рецепты с гречкой в … с … на (завтрак, обед, ужин);
  5. h5 — рецепты с гречкой в … с … на … как (просто, по-купечески);
  6. h6 — рецепты с гречкой в … с … на … как … + фото, видео, инструкция и так далее.

Может это не самая лучшая структура, но смысл ясен.

Так же подзаголовки могут разделяться на какие-то логические действия. Например:

  • h1 — как построить баню;
  • h2 — как выбрать фундамент;
  • h3 — виды фундаментов;
  • h4 — ленточный (или иной вид) фундамент;
  • h5 — особенности ленточного фундамента.

В общем и целом понимание должно появиться. Идем дальше.

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

Если мы наберем следующий код:

<h1>Заголовок 1-го уровня</h1>
<h2>Заголовок 2-го уровня</h2>
<h3>Заголовок 3-го уровня</h3>
<h4>Заголовок 4-го уровня</h4>
<h5>Заголовок 5-го уровня</h5>
<h6>Заголовок 6-го уровня</h6>

То результат будет следующим.

Заголовки h1 - h6

Рассмотрим каждый элемент подробнее.

Тег h1

Элемент <h1> — заголовок верхнего уровня. Он должен встречаться в документе один раз в самом начале. Это как заголовок книги, ведь название книги не может встречаться несколько раз.

Рекомендуется делать уникальный заголовок <h1> для каждой страницы сайта.

Стандартный стиль для заголовка <h1>:

display: block;
font-size: 2em;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;

Тег h2

Элемент <h2> — подзаголовок <h1>. В отличии от <h1> может встречаться на веб-странице несколько раз.

Стандартный стиль для заголовка <h2>:

display: block;
font-size: 1.5em;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;

Тег h3

Подзаголовок элемента <h2>.

Стандартный стиль для заголовка <h3>:

display: block;
font-size: 1.17em;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;

Тег h4

Подзаголовок элемента <h3>.

Стандартный стиль для заголовка <h4>:

display: block;
margin-block-start: 1.33em;
margin-block-end: 1.33em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;

Тег h5

Подзаголовок элемента <h4>.

Стандартный стиль для заголовка <h5>:

display: block;
font-size: 0.83em;
margin-block-start: 1.67em;
margin-block-end: 1.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;

Тег h6

Подзаголовок элемента <h5>.

Стандартный стиль для заголовка <h6>:

display: block;
font-size: 0.67em;
margin-block-start: 2.33em;
margin-block-end: 2.33em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;

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

Форматирование текста — это разметка (процесс разметки) текста. В HTML используется много тегов форматирования, которые со временем заменяет CSS. Рассмотрим эти элементы.

Тег b

Элемент <b> выделяет текст полужирным, не несет смысловой нагрузки.
Пример.

<b>Жирный текст</b> в этом предложении.

Результат.

Жирный текст в этом предложении.

Тег strong

Элемент <strong> выделяет текст полужирным, придает выделеному тексту смысловую нагрузку.
Пример.

<strong>Жирный текст со смысловой нагрузкой</strong> в этом предложении.

Результат.

Жирный текст со смысловой нагрузкой в этом предложении.

Тег i

Элемент <i> выделяет текст курсивом без смысловой значимости.
Пример.

<i>Курсив</i> в этом предложении.

Результат.

Курсив в этом предложении.

Тег em

Элемент <em> выделяет текст курсивом со смысловой значимостью, визуально не отличается от <i>.
Пример.

<em>Курсив со смысловой нагрузкой</em> в этом предложении.

Результат.

Курсив со смысловой нагрузкой в этом предложении.

Тег small

Элемент <small> уменьшает размер текста на единицу.

Пример.

Стандартный текст, <small>а это текст в теге small</small>.

Результат.

Стандартный текст, а это текст в теге small.

Тег sup

Элемент <sup> используется для создания надстрочного текста.

Пример.

Объем емкости для воды был 3 м.<sup>3</sup>

Результат.

Объем емкости для воды был 3 м.3

Тег sub

Элемент <sub> используется для создания подстрочного текста.
Пример.

Задача: нужно найти x<sub>1</sub> если...

Результат.

Задача: нужно найти x1 если…

Тег ins

Элемент <ins> предназначен для выделения текста в новой версии веб-документа, подчеркивает текст. Применяется довольно редко (по собственному опыту).

Пример.

Актуальная версия HTML <ins>5</ins>

Результат.

Актуальная версия HTML 5

Тег del

Элемент <del> предназначен для пометки текста на удаление, перечеркивает текст.
Пример.

Актуальная версия HTML <del>4.1</del> <ins>5</ins>

Результат.
Актуальная версия HTML 4.1 5

Тег mark

Элемент <mark> выделяет текст желтым цветом.
Пример.

Я даю согласие на <mark>обработку персональных данных</mark>.

Результат.

Я даю согласие на обработку персональных данных.

Устаревшие теги

Теги, которые использовались в ранних версиях HTML и на данный момент считаются устаревшими, вместо них использую CSS.

Тег u

Элемент <u> использовался для подчеркивания текста.

Стандартный стиль тега:
text-decoration: underline;

То есть вместо кода:
Это <u>подчеркнутый</u> текст.

В настоящее время рекомендуется использовать его стиль, то есть:

<style>
.under{text-decoration: underline;}
</style> 
Это <span class="under">подчеркнутый</span> текст.

Результат будет одинаков.

Это подчеркнутый текст.

На смену <u> пришел элемент <ins>.

Тег s

Элемент <s> использовался для создания перечеркнутого текста.
Стандартный стиль тега:
text-decoration: line-through;

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

Абзац и перенос текста

Читать текст не разбитый на абзацы крайне не удобно. Для удобства нужно разбивать текст. Для этих целей в HTML есть теги абзаца, переноса тега и горизонтальной линии.

Тег p

Элемент <p> используется для создания параграфа, то есть он разделяет текст на отдельные абзацы между которыми стоит пустая строка.
Пример.

<p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. </p><p>В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</p>

Результат.

Lorem Ipsum — это текст-«рыба», часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной «рыбой» для текстов на латинице с начала XVI века.

В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.

Тег br

Элемент <br> используется для разрыва строки. После него текст переноситься на новую строку. Это одиночный тег, он не имеет закрывающего тега.

Пример.

Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. <br>В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.

Результат.

Lorem Ipsum — это текст-«рыба», часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной «рыбой» для текстов на латинице с начала XVI века.
В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.

Тег hr

Элемент <hr> используется для создания горизонтальной линии. Не требует закрывающего тега.

Пример.

Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. <hr>В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.

Результат.

Lorem Ipsum — это текст-«рыба», часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной «рыбой» для текстов на латинице с начала XVI века.


В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.

Цитаты, определения и направление текста

Тег abbr

Элемент <abbr> предназначен для форматирования аббревиатур. Подчеркивает аббревиатуру пунктирной линией. Расшифровка указывается в атрибуте title. В справочнике HTML есть подробное описание тега <abbr>.

Пример.

<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> язык гипертекстовой разметки.</p>

Результат.

HTML язык гипертекстовой разметки.

Тег blockquote

Элемент <blockquote> предназначен для выделения цитат в тексте.

Пример.

<blockquote cite="https://abuzov.com/">
    <h1>HTML тег: blockquote</h1>
    <p>Блок текста, цитируемый из других источников.</p>
</blockquote>

Результат.

HTML тег: blockquote

Блок текста, цитируемый из других источников.

Тег q

Элемент <q> используется для выделения в документе коротких цитат. Короткие цитаты берутся в кавычки.

Пример.

Пример <q>короткой цитаты</q>

Результат.

Пример короткой цитаты

Тег cite

Элемент <cite> — ссылка на творческое произведение, такое как книга, веб-сайт или заявление. Он должен включать имя автора, название работы или ссылку на URL.

Пример.

Для написания статьи использовалась книга: <p> Бабаш Александр Владимирович, Шанкин Генрих Петрович<cite> История криптографии</cite>. 2002 год.</p>

Результат.

Для написания статьи использовалась книга:

Бабаш Александр Владимирович, Шанкин Генрих Петрович История криптографии. 2002 год.

Теги ввода, кода и направления

Тег code

Элемент <code> указывает на то, что текст является фрагментом компьютерного кода. Вы уже сталкивались с результат работы этого тега, пример:

<code>display: block;
font-size: 0.83em;
margin-block-start: 1.67em;
margin-block-end: 1.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;</code>

Результат.

display: block;
font-size: 0.83em;
margin-block-start: 1.67em;
margin-block-end: 1.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;

Тег kbd

Элемент <kbd> указывает что фрагмент теста введен с клавиатуры.

Пример.

Для запуска диспетчера задач введите: <kbd>ctrl + alt + del</kbd>

Результат.

Для запуска диспетчера задач введите: ctrl + alt + del

Тег samp

Элемент <samp> выделяет пример результата выполнения программы.

Пример.

Если вы выберете опцию «чемпион», вы получите сообщение <samp> Обезьяна не гусеница </samp>

Результат.

Если вы выберете опцию «чемпион», вы получите сообщение Обезьяна не гусеница

Тег var

Элемент <var> задает переменную, например, в математической формуле или в компьютерном коде.

Пример.

Если <var>x</var> = 3 , то <var>y</var> = 6

Результат.

Если x = 3 , то y = 6

Тег pre

Элемент <pre> сохраняет изначальное форматирование текста. При этом пробелы и переносы строк в начальном тексте не удаляются.

Пример.

<pre>Текст переносится 
без помощи br и иных средств форматирования
он просто             сохраняет исходное 
                  форматирование</pre>

Результат.

Текст переносится 
без помощи br и иных средств форматирования
он просто             сохраняет исходное 
                  форматирование

Тег bdo

Элемент <bdo> изменяет текущее направление текста.

Пример.

Результатом этого <bdo dir = "rtl"> слова </bdo> будет "аволс".

Результат.

Результатом этого слова будет «аволс».

На этом можно считать что вы изучили текст HTML.


Анатолий Бузов
Анатолий Бузов / автор материала / об авторе / услуги / проекты

Обучаю HTML, CSS, PHP. Создаю и продвигаю сайты, скрипты и программы. Занимаюсь информационной безопасностью. Рассмотрю различные виды сотрудничества.


Добавить комментарий

Ваш адрес email не будет опубликован.