Войти
Регистрация

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

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

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

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

Для этого и были созданы текстовые HTML-теги, которые помогают придать внешний вид любому тексту.

Давайте с Вами создадим рабочий шаблон текста для применения тегов к нему. Напишем теги верхнего уровня и внутри него текст. Как их писать я показывал в статье по созданию HTML-страницы

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

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

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

Первый на очереди парный тег <b>:

<b>жирный текст</b>

Данный тег используется для выделения текста жирным начертанием. У данного тега есть аналог - парный тег <strong>. Он также делает текст жирным, но данный тег является логическим (в то время, как тег <b> - физический) и призван выделять важный текст, на который следует сделать акцент, но это в основном для поисковых систем, т.к. оба тега внешне текст делают жирным.

Второй на очереди парный тег <i>:

<i>курсивное начертание</i>

Данный тег используется для выделения текста курсивом. У него также есть аналог - парный тег <em>, который также является логическим, делает текст курсивом и выполняет функцию акцента.

Третий на очереди парный тег <s>:

<s>зачеркнутое начертание</s>

Данный тег делает текст зачеркнутым, но логического собрата у него нет, а есть более полный вариант написания парного тега <strike>. Оба эти тега аналогичны, но первый - его сокращенный вариант.

Четвертый на очереди парный тег <u>:

<u>подчеркнутое начертание</u>

Данный тег делает текст подчеркнутым, также логического аналога у него нет, но есть альтернативный вариант парный тег <ins>, который также подчеркивает текст. Используйте любой на вкус.

Пятый на очереди это тег <sub> и его противоположность тег <sup>:

C<sub>2</sub>H<sub>2</sub>
N<sub>+2</sub>O<sub>-2</sub>

Здесь первый парный тег <sub> предназначен для установки нижнего индекса текста или буквы, а тег <sup> устанавливает верхний индекс. В итоге мы получаем:

C2H2 и N+2O-2

Также теги можно комбинировать. Допустим мы хотим сделать жирный и подчеркнутый текст:

<u><b>подчеркнутое жирное начертание</b></u>
или
<b><u>подчеркнутое жирное начертание</u></b>

Здесь мы комбинировали парные теги и получили результат. Можно текст подчеркнуть и выделить, а можно выделить и подчеркнуть - суть не меняется. Комбинировать можно 2 и более тегов. Главное соблюдать принцип вложенности: сначала пишем один парный тег и закрываем его, а потом внутри второй парный тег и закрываем его и так далее.

Вот так не должно быть:

<u><b>подчеркнутое жирное начертание</u></b>

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

<html>
 <body>
   <h1>Заголовок 1-го уровня</h1>
   <h2>Заголовок 2-го уровня</h2>
   <h3>Заголовок 3-го уровня</h3>
   <h4>Заголовок 4-го уровня</h4>
   <h5>Заголовок 5-го уровня</h5>
   <h6>Заголовок 6-го уровня</h6>
   <b>жирный текст</b>
  <br />
   <strong>жирный текст (логический тег)</strong>
  <br />
   <i>курсивное начертание</i>
  <br />
   <em>курсивное начертание(логический тег)</em>
  <br />
   <s>зачеркнутое начертание</s>
  <br />
   <strike>зачеркнутое начертание</strike>
  <br />
   <u>подчеркнутое начертание</u>
  <br />
   <ins>подчеркнутое начертание</ins>
  <br />
   C<sub>2</sub>H<sub>2</sub>
   N<sub>+2</sub>O<sub>-2</sub>
  <br />
 </body>
</html>

Как видите, ничего сложного. Всем удачи и до скорого.

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?