HTML теги для текста

HTML теги для текста

Оглавление
  1. Как сделать абзац в HTML
  2. Как сделать заголовок в HTML
  3. Как сделать список в HTML
  4. Как сделать цитату в HTML

В этой статье речь пойдет о тегах, которые помогут вам структурировать текст и разбить его на отдельные фрагменты, каждый из которых будет иметь свое значение и смысл. К таким фрагментам можно отнести заголовки, абзацы, цитаты и списки.

Как сделать абзац в HTML

Если текст или статья оформлены как один сплошной «кусок» без переносов строк и абзацев, читать его будет очень сложно. И чтобы не потерять посетителей своего сайта уже на первых секундах, нужно грамотно оформить текст, используя абзацы. Так ваши мысли в тексте будут логически разделены, и читатель без труда сможет понять, о чем статья.

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

Каждый новый абзац в html документе начинается с открывающего тега <p>, а заканчивается закрывающим тегом </p>. Хотя закрывающий тег и не обязателен, все же его лучше ставить, чтобы ваша разметка легко читалась и была структурированной.


<p>Это абзац текста в HTML документе</p>

Абзац (параграф) в html документе — это независимый блочный элемент. Каждый абзац имеет небольшой отступ сверху и снизу. Если абзац по ширине помещается в родительский контейнер html-страницы, он выведется в одну строку. Если же ширина контента в абзаце больше ширины родительского блока, браузер разобьет текст абзаца на несколько строк.

Как сделать заголовок в HTML

Большие тексты обычно делят на более мелкие части: главы, разделы, чтобы читателю было удобно воспринимать информацию. Но в HTML нет отдельных тегов для таких логических частей. Однако средствами данного языка разметки можно структурировать текст, создав в нем заголовки, которые визуально разделят большой монолитный «кусок» на более мелкие части.

Еще одна причина, по которой следует использовать заголовки — это продвижение сайта. Поисковые системы дают больший вес тексту, который заключен в тег заголовка. Поэтому целесообразно в заголовки вставлять ключевые слова, по которым вы продвигаете свой сайт.

Размеры заголовков в HTML бывают разные. Их еще называют уровнями заголовков. Уровни заголовков HTML обозначают, насколько большую часть текста эти заголовки открывают. Перечислим уровни и их значение в разметке:

  • Заголовок первого уровня в HTML (H1) — это элемент, который имеет важное семантическое значение. Он открывает самую большую часть текста и говорит поисковым системам, о чем будет рассказывать данная страница сайта. Поэтому на каждой странице должен быть только ОДИН заголовок первого уровня. Браузер выводит такой заголовок самым большим шрифтом;
  • Заголовок H2 открывает более мелкие части текста. Такой частью может быть большой раздел или глава. Шрифт у заголовка второго уровня меньше, чем у заголовка первого уровня;
  • Заголовок H3 открывает еще более мелкие части (например, подраздел). Шрифт у такого заголовка, соответственно, еще меньше, чем у заголовка второго уровня;
  • Заголовки H4-H6 открывают оставшиеся в структуре более мелкие части, если такие имеются. Шрифты у таких заголовков уменьшаются с каждым уровнем.

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

Чтобы вставить заголовок в HTML документ, нужно использовать парный тег <Hn>, где число n соответствует уровню заголовка. Текст внутри тега <Hn> станет текстом заголовка. Вот пример использования заголовков разных уровней:


<h1>Главный заголовок страницы</h1>
<h2>Второй по значимости заголовок</h2>
<h3>Третий по значимости заголовок</h3>
<h4>Четвертый по значимости заголовок</h4>
<h5>Пятый по значимости заголовок</h5>
<h6>Шестой по значимости заголовок</h6>

Заголовок HTML — это блочный элемент.

Следует отметить, что заголовки следует вставлять строго по порядку (учитывая иерархию). То есть, если вы использовали на странице H1 и H2, и теперь вам нужно разбить текст еще на более мелкие разделы, то используйте H3. Использовать же после H2 заголовки более мелких уровней, например, H4 или H5, пропустив H3 — неправильно. Порядок и иерархия заголовков должны соблюдаться. Тогда ваша страница будет иметь правильную структуру и красивый вид.

Как сделать список в HTML

Списки предназначены для того, чтобы отображать информацию в виде перечня позиций или пунктов, которые могут быть как пронумерованы (нумерованный список), так и не пронумерованы (маркированный список). Списки — это блочные элементы.

Маркированный список в HTML (ul) представляет собой перечень пунктов, которые помечаются особым знаком — маркером. Данный маркер ставится слева от каждого пункта списка. Нумерованный (ol) же список обозначается с помощью цифр. Цифры ставятся также слева от каждого пункта списка.

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

Пример маркированного списка HTML:


<ul>
  <li>HTML</li>
  <li>Javascript</li>
  <li>CSS</li>
</ul>

Пример нумерованного списка HTML:


<ol>
  <li>один</li>
  <li>два</li>
  <li>три</li>
</ol>

Как видите, пункты списка обозначаются парными тегами <li>. Теги <li> одинаковы для всех видов списков. Меняются теги лишь самого списка: ol и ul.

Списки также могут помещаться и друг в друга. Это будут уже вложенные списки HTML. Создавать такие списки очень просто: сначала создается обычный список с несколькими пунктами, затем в нужный пункт вставляется еще один список. При этом вы можете вкладывать списки друг в друга независимо от их типа. Глубина вложенности также не имеет ограничений.

Пример вложенного списка HTML:


<ul>
  <li>Javascript</li>
  <li>CSS
    <ul>
      <li>Flex</li>
      <li>Margin</li>
      <li>Padding</li>
    </ul>
  </li>
  <li>HTML</li>
</ul>

Как сделать цитату в HTML

В тексте встречаются вставки (цитаты, определения, понятия), для которых в HTML есть специальный тег — <blockquote>. Это парный тег, в него можно помещать другие блочные элементы, например, заголовки, абзацы и т.д.

Пример цитаты HTML:


<blockquote>
  <p>Первая цитата в тексте</p>
<blockquote>

В статье были перечислены основные HTML теги для текста. Используя перечисленные теги, вы сможете делать ваши тексты структурированными и удобными для восприятия. Кроме того, правильное применение этих элементов поможет вам повысить рейтинг вашего сайта в поисковых системах и привлечь на него дополнительный трафик.


Может будет интересно?

Что такое CMS?

Что такое CMS?

Общее понятие о Content Management System или CMS, для чего её можно использовать, популярные системы

Основы HTML и CSS

Основы HTML и CSS

HTML описывает структуру страниц с помощью разметки и состоит из буквенно-цифровых символов, называемых элементами, помещенных в угловые скобки. Элемент - это контейнер, содержащий данные и правила его форматирования.

Топ хостинг-провайдеров