HTML текст — теги, которые используются для форматирования текста на web-странице. Предполагается что вы уже изучили основы HTML настоящего самоучителя HTML.
Правильное и качественное форматирование текста в документе решает две задачи:
- Помогают поисковым роботам правильно понять содержимое документа.
- Позволяют пользователю легко изучить страницу и понять ее смысловое содержание.
Согласитесь, легче читать текст который разбит на абзацы с подзаголовками. А вот «портянку» сплошного текста читать довольно трудно.
Рассмотрим основные и дополнительные теги форматирования текста в HTML.
Заголовоки в HTML
Заголовки в HTML создаются с помощью тега h после которого идет цифра от 1 до 6, например <h1>, где:
- h — сокращение от английского heading (заголовок);
- 1…6 — уровни заголовка.
Заголовки используются для определения нового раздела или подраздела. Заголовки имеют иерархию, от заголовка <h1> до заголовка <h6>.
Например, если мы рассматриваем какую-либо обширную тему, мы заключаем ее название в <h1>. Заголовок на уровень ниже в <h2> и так далее до <h6>.
Например, возьмем заголовок «рецепты с гречкой». Далее все зависит от того, как вы хотите структурировать страницу. Я бы взял и разделил следующим образом:
- h1 — рецепты с гречкой;
- h2 — рецепты с гречкой в (мультиварке, духовке, кастрюле);
- h3 — рецепты с гречкой в … с (мясом, луком, курицей);
- h4 — рецепты с гречкой в … с … на (завтрак, обед, ужин);
- h5 — рецепты с гречкой в … с … на … как (просто, по-купечески);
- 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
Элемент <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>.
Результат.
Тег sup
Элемент <sup> используется для создания надстрочного текста.
Пример.
Объем емкости для воды был 3 м.<sup>3</sup>
Результат.
Тег sub
Элемент <sub> используется для создания подстрочного текста.
Пример.
Задача: нужно найти x<sub>1</sub> если...
Результат.
Тег ins
Элемент <ins> предназначен для выделения текста в новой версии веб-документа, подчеркивает текст. Применяется довольно редко (по собственному опыту).
Пример.
Актуальная версия HTML <ins>5</ins>
Результат.
Тег 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 для распечатки образцов.
Тег 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>
Результат.
Тег 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>
Результат.
Тег samp
Элемент <samp> выделяет пример результата выполнения программы.
Пример.
Если вы выберете опцию «чемпион», вы получите сообщение <samp> Обезьяна не гусеница </samp>
Результат.
Тег var
Элемент <var> задает переменную, например, в математической формуле или в компьютерном коде.
Пример.
Если <var>x</var> = 3 , то <var>y</var> = 6
Результат.
Тег pre
Элемент <pre> сохраняет изначальное форматирование текста. При этом пробелы и переносы строк в начальном тексте не удаляются.
Пример.
<pre>Текст переносится
без помощи br и иных средств форматирования
он просто сохраняет исходное
форматирование</pre>
Результат.
Текст переносится
без помощи br и иных средств форматирования
он просто сохраняет исходное
форматирование
Тег bdo
Элемент <bdo> изменяет текущее направление текста.
Пример.
Результатом этого <bdo dir = "rtl"> слова </bdo> будет "аволс".
Результат.
На этом можно считать что вы изучили текст HTML.
