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

Приветствую вас, дорогие друзья!

Сегодня я покажу вам как использовать в HTML теги для текста.

Я их условно разделила на две группы:

• Структурные теги HTML
• Теги для стилизации и форматирования

Структурные HTML теги для текста

1. 1.Теги заголовков. Из названия понятно что они предназначены для оформления заголовков и подзаголовков на сайте. В зависимости от того какой тег заголовка используется браузер делает его более крупным шрифтом и по умолчанию выделяет жирным.

   Самый большой и самый крупный в HTML – это заголовок H1. В него обычно оборачивают название страницы и ему поисковые системы уделяют отдельное внимание.

   PHP

   <h1>Заголовок</h1>

   1	<h1>Заголовок</h1>

   Следующими идут заголовки h3, h4, h5 и самый маленький h6

   PHP

   <h2>…</h2> <h3>…</h3> <h4>…</h4> <h5>…</h5> <h6>…</h6>

   1 2 3 4 5

   <h2>…</h2> <h3>…</h3> <h4>…</h4> <h5>…</h5> <h6>…</h6>

2. 2.Тег абзаца

   Думаю понятно для чего он предназначен. По умолчанию занимает всю ширину страницы и может иметь небольшие отступы сверху и снизу (обычно снизу).

   XHTML

   <p>Делаем абзацы в HTML</p>

   1	<p>Делаем абзацы в HTML</p>

3. 3.Тег <span> позволяет выделит какой то фрагмент текста. Его отличительной особенностью является то, что он занимает ширину выделенного текста. То есть если вы обернёте в него слово, то его ширина будет равна ширине этого слова.

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

   PHP

   <p> Пример текста в котором нужно <span>выделить фрагмент</span>.</p>

   1	<p> Пример текста в котором нужно <span>выделить фрагмент</span>.</p>

   Как и другим тегам HTML, ему можно присвоить CSS класс или идентификатор.

   PHP

   <span class=”new-style”>…</span>

   1	<span class=”new-style”>…</span>

4. 4.Для оформления цитаты в HTML у нас есть 2 варианта:

   Тег <q> используется для выделения короткой цитаты внутри текста. Он является строчным элементом и его ширина будет равна ширине выделенного в него текста. По умолчанию текст, обёрнутый в этот тег отображается в кавычках.

   XHTML

   <q> Цитата</q>

   1	<q> Цитата</q>

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

   XHTML

   <blockquote> Тег цитаты </blockquote>

   1	<blockquote> Тег цитаты </blockquote>

5. 5.Тег <abbr> используется для выделения аббревиатур. Вы оборачиваете в него аббревиатуру и в атрибуте title пишете полное название.
   XHTML

   <p> Здесь написана <abbr title=”Придуманная мной аббривиатура”>ПМА</abb></p>

   1	<p> Здесь написана <abbr title=”Придуманная мной аббривиатура”>ПМА</abb></p>

   Браузер подчёркивает аббревиатуру, а при наведении на неё высвечивает полное название.

   Здесь написана ПМА
6. 6.<bdo> — нужен чтобы задать или изменить направление написания текста в HTML. Лично я понятия не имею где это может пригодиться, но мало ли…

   Для задания направления используется атрибут dir, которому можно задать значения:

   • rtl – справа на лева
   • ltr – слева на право
   XHTML

   <bdo dir="rtl">Отображение справа на лево</bdo>

   1	<bdo dir="rtl">Отображение справа на лево</bdo>

7. 7.<br> — используется для переноса на новую строку.
   XHTML

   Пример <br> переноса.

   1	Пример <br> переноса.

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

1. 1.<b> — выделение текста жирным.
   XHTML

   <b>Жирный</b>

   1	<b>Жирный</b>

2. 2.Теги <i> и <em> для выделения курсивом.
   XHTML

   <i>Курсив</i>

   1	<i>Курсив</i>

3. 3.<u> — подчёркивает обёрнутый в него текст.
   XHTML

   <u>Подчёркнутый</u>

   1	<u>Подчёркнутый</u>

4. 4.<strong> — используется для выделения слов или фраз полужирным. Учитывается браузером и поисковиками для определения важности выделенного текста.
5. 5.<sup> — нужен для задания верхнего индекса при помощи HTML, например при отображении степени в формулах или для обозначения единиц площади или объёма.
   XHTML

   120 м²

   1	120 м<sup>2</sup>

6. 6.<sub> — используется для задания нижнего индекса.
   XHTML

   СO₂

   1	СO<sub>2</sub>

7. 7.<del> — зачёркнутый текст. Вообще в HTML он предназначен для выделения удалённого текста, но используется где ни попадя, в том числе и для задания цен без скидки в интернет магазинах или на лендингах.
   XHTML

   Цена: <del>450руб.</del> 400 руб.

   1	Цена: <del>450руб.</del> 400 руб.

   Цена: 450руб. 400 руб.
8. 8.<small> — используется чтобы выделить фрагмент текста более мелким шрифтом.
   
   XHTML

   Большой и <small> маленький</small>

   1	Большой и <small> маленький</small>

В HTML существуют и другие теги для текста, но они очень редко используются.

На этом у меня всё, удачи вам в освоении HTML!

С уважением Юлия Гусарь