Текст в HTML

86
посл. ред. 01.11.2016

Любой текст на странице должен быть заключен в тег. Теги позволяют не только сделать текст статьи красивым и удобным для чтения, но и оптимизировать структуру документа. Тем самым улучшается индексация страницы поисковыми системами. Для оформления текста страницы существует 2 вида тегов: блочные и строчные. Блочные теги позволяют задать положение и размеры содержимого. Строчные применяются для оформления части текста. Вот основные из них:

Теги блочного представления

Тег Описание
<hr> Горизонтальный разделитель.
Используется для визуального разделения элементов страницы или выделения части текста.
<h1></h1>
…
<h6></h6>
Заголовки 1 уровня
…
Заголовки 6-го уровня
Задаёт заголовок статьи или её отдельной части. Использование очень важно, так как влияет на индексацию поисковиками.
<p></p> Определяет границы абзаца. Основной тег при написании статей. 
<p>Sequi aliquam deleniti temporibus eaque, blanditiis saepe labore facere vero aperiam tempora, illo exercitationem vitae ipsum non.</p>
<p>Sed expedita, sit qui modi cum omnis ab excepturi voluptatem culpa maxime, doloremque, molestias architecto consequatur fugit dolor deleniti, perspiciatis exercitationem accusamus!</p>

Sequi aliquam deleniti temporibus eaque, blanditiis saepe labore facere vero aperiam tempora, illo exercitationem vitae ipsum non.

Sed expedita, sit qui modi cum omnis ab excepturi voluptatem culpa maxime, doloremque, molestias architecto consequatur fugit dolor deleniti, perspiciatis exercitationem accusamus!
<pre></pre> По умолчанию, любое количество пробелов на странице отображается как один, перенос строк осуществляется автоматически, браузер воспринимает пробел как разделитель слов. При использовании тега <pre></pre> текст отображается так же, как в текстовом редакторе. Все переносы строки сохраняются. Используется для вставки больших текстов, требующих сохранения его структуры. 
<!DOCTYPE html>
<html>
<head>
  <title>HTML</title>
</head>
<body>
  <pre>Много         пробелов</pre>
  <p>Много         пробелов</p>
</body>
</html>
Много         пробелов

Много пробелов
<ol></ol>
<ul></ul>		 Нумерованный и ненумерованный списки.
<div></div> Основной блочный тег. Позволяет группировать элементы страницы в более крупные блоки. А также используется для преобразования строчных элементов в блочные.

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

Тег Описание
<br> Используется для принудительного переноса текста на новую строку внутри блока. 
<p>Перенос на <br> новую строку.</p>

Перенос на
новую строку.
<a></a> Преобразует текст в ссылку.
<q></q> Используется для выделения цитат. Автоматически добавляет кавычки. 
<q>Обрамляет текст в кавычки</q>
Обрамляет текст в кавычки
<i></i> Курсивный шрифт.
<b></b> Полужирный шрифт.
<u></u> Подчеркнутый шрифт.
<mark></mark> Выделяет важный элемент текста изменением цвета фона.
<sub></sub> Подстрочный шрифт.
<sup></sup> Надстрочный шрифт.
<span></span> Основной строчный тег. Позволяет выделить любую часть текста для изменения стиля.