Если Вы пользуйтесь текстовым редактором, например, таким как Microsoft Word или Microsoft Excel, то Вы должны быть знакомы с форматированием текста и как сделать текст жирным (полужирным), наклонным (курсивом), зачеркнутым или подчеркнутым. Это всего лишь четыре из одиннадцати доступных вариантов, указывающих, как можно форматировать текст в HTML и XHTML.

Полужирный или жирный текст

Полужирный шрифт или жирный шрифт в HTML можно задать с помощь двух тегов <b>...</b> и <strong>...</strong>. Все, что находится в тегах <b>...</b> и <strong>...</strong> отображается в HTML жирным текстом (полужирным), как показано ниже:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример выделения жирным текста и шрифта в HTML</title>
  </head>
  <body>
    <p>С помощью тега b делаем <b>жирный шрифт</b>.</p>
    <p>С помощью тега strong делаем <strong>текст жирным</strong>.</p>
  </body>
</html>

Получим следующий результат:

Пример выделения жирным текста и шрифта в HTML, жирный шрифт, жирный текст, <b>, <strong>, полужирный текст

Курсив – наклонный текст или шрифт

Сделать в HTML курсивом текст можно с помощь двух тегов <i>...</i> и <em>...</em>. Все, что находится в тегах курсива <i>...</i> и <em>...</em> отображается в HTML наклонным текстом (шрифтом), как показано ниже:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример выделения курсивом текста и шрифта в HTML</title>
  </head>
  <body>
    <p>С помощью тега i делаем <i>наклонный текст или шрифт</i>.</p>
    <p>С помощью тега em делаем <em>текст курсивом</em>.</p>
  </body>
</html>

Получим следующий результат:

Пример выделения курсивом текста и шрифта в HTML, курсивный шрифт, курсивный текст, <i>, <em>, наклонный текст

Подчеркнутый текст

Подчеркнуть текст в HTML можно с помощь тега <u>...</u>. Все, что находится внутри тега <u>...</u> отображается в HTML подчеркнутым текстом (шрифтом), как показано ниже:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример подчеркивания текста в HTML</title>
  </head>
  <body>
    <p>С помощью тега u делаем <u>подчеркнутый текст или слово</u>.</p>
  </body>
</html>

Получим следующий результат:

Пример подчеркивания текста в HTML, подчеркнутый шрифт, подчеркнутый текст, <u>

Зачеркнутый текст

Зачеркнуть текст в HTML можно с помощь тега <strike>...</strike>. Все, что находится внутри тега <strike>...</strike> отображается в HTML зачеркнутым текстом (шрифтом), как показано ниже:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример зачеркивания текста в HTML</title>
  </head>
  <body>
    <p>С помощью тега strike делаем <strike>зачеркнутый текст</strike>.</p>
  </body>
</html>

Получим следующий результат:

Пример зачеркивания текста в HTML, зачеркнутый шрифт, зачеркнутый текст, <strike>

Моноширинный шрифт

Содержимое элемента <tt>...</tt> записывается в HTML моноширинным шрифтом. Большинство шрифтов обладают переменной шириной, потому что разные буквы имеют разную ширину (например, буква «щ» шире буквы «г»). Однако в моноширинном шрифте каждая буква имеет одинаковую ширину.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример моноширинного шрифта в HTML</title>
  </head>
  <body>
    <p>С помощью тега tt делаем <tt>моноширинный шрифт</tt>.</p>
  </body>
</html>

Получим следующий результат:

Пример моноширинного шрифта в HTML, моноширинный шрифт, <tt>

Верхний индекс

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример верхнего индекса в HTML</title>
  </head>
  <body>
    <p>С помощью тега sup делаем верхний<sup>индекс</sup> или степень числа, например, 2<sup>3</sup>.</p>
  </body>
</html>

Получим следующий результат:

Пример верхнего индекса в HTML, верхний индекс, степень числа, <sup>

Нижний индекс

Содержимое тега <sub>...</sub> отображается в HTML в нижнем индексе. Тег нижнего индекса <sub> в HTML имеет тот же размер шрифта, который используют окружающие его символы, но использует он только половину их высоты.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример нижнего индекса в HTML</title>
  </head>
  <body>
    <p>С помощью тега sub делаем нижний<sub>индекс</sub>.</p>
  </body>
</html>

Получим следующий результат:

Пример нижнего индекса в HTML, нижний индекс, <sub>

Вставленный текст

Содержимое внутри тега <ins>...</ins> отображается в HTML как вставленный текст.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример вставленного текста в HTML</title>
  </head>
  <body>
    <p>Хочу зарабатывать <del>много</del> <ins>очень много</ins> денег.</p>
  </body>
</html>

Получим следующий результат:

Пример вставленного текста в HTML, вставленный текст, <ins>

Удаленный текст

Содержимое внутри тега <del>...</del> отображается в HTML как удаленный текст.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример удаленного текста в HTML</title>
  </head>
  <body>
    <p>Хочу зарабатывать <del>много</del> <ins>очень много</ins> денег.</p>
  </body>
</html>

Получим следующий результат:

Пример удаленного текста в HTML, удаленный текст, <del>

Большой текст

Содержимое тега <big>...</big> отображается в HTML большим текстом, на один размер шрифта больше, чем остальная часть окружающего его текста, как показано ниже:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример большого текста в HTML</title>
  </head>
  <body>
    <p>С помощью тега big делаем <big>текст больше</big>.</p>
  </body>
</html>

Получим следующий результат:

Пример большого текста в HTML, большой текст, <big>

Маленький текст

Содержимое внутри тега <small>...</small> отображается в HTML маленьким текстом, на один размер шрифта меньше, чем остальная часть окружающего его текста, как показано ниже:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример маленького текста в HTML</title>
  </head>
  <body>
    <p>С помощью тега small делаем <small>текст меньше</small>.</p>
  </body>
</html>

Получим следующий результат:

Пример маленького текста в HTML, маленький текст, <small>

Группировка элементов и содержимого страницы в HTML

Элементы <div> и <span> позволяют в HTML группировать несколько элементов для создания секций или подсекций страницы.

Например, Вы можете поместить все ссылки на странице в тег <div>, чтобы указать, что все элементы в этом теге <div> относятся к меню. Затем Вы можете задать стиль тегу <div>, чтобы элементы отображались с использованием специального набора правил стиля (CSS).

Пример с тегом <div>

<!DOCTYPE html>
<html>
  <head>
    <title>Пример группировки элементов и текста в HTML</title>
  </head>
  <body>
    <div id="menu" style="text-align: center;">
      <a href="/index.html">ГЛАВНАЯ</a> / 
      <a href="/about.html">О НАС</a> / 
      <a href="/contacts.html">КОНТАКТЫ</a>
    </div>
  
    <div id="content" style="text-align: left; color: #fff; background-color: #00BCD4;">
      <h1>Название статьи</h1>
      <p>Содержимое страницы...</p>
    </div>
  </body>
</html>

Получим следующий результат:

Пример группировки элементов и текста в HTML, тег div, <div>

С другой стороны, элемент <span> может использоваться для группировки только встроенных элементов. Итак, если у Вас есть часть предложения или абзаца (параграфа), который Вы хотите объединить, Вы можете использовать элемент <span> следующим образом:

Пример с тегом <span>

<!DOCTYPE html>
<html>
  <head>
    <title>Пример группировки элементов и текста в HTML</title>
  </head>
  <body>
    <p>Группировки элементов с помощью <span style="color: blue;">тега span</span>.</p>
  </body>
</html>

Получим следующий результат:

Пример группировки элементов и текста в HTML, тег span, <span>

Эти теги обычно используются с CSS, чтобы Вы могли задать стиль к секции страницы.

Источник: HTML - Formatting.

Оглавление