Форматування тексту

Влад Мержевич

Форматування тексту — це засоби його зміни, такі як вибір шрифту та використання ефектів, що дозволяють змінювати вигляд тексту. У табл. 1 перераховано основні теги, які використовуються для зміни оформлення тексту.

Табл. 1. Теги для форматування тексту
Код HTMLОписПриклад
<b>Текст</b>Жирне начертання текстуТекст
<i>Текст</i>Курсивне начертання текстуТекст
<sup>Текст</sup>Верхній індексe=mc2
<sub>Текст</sub>Нижній індексH2O
<pre>Текст</pre>Текст пишеться як є, включаючи всі пробіли
Текст
<em>Текст</em>Курсивний текстТекст
<strong>Текст</strong>Жирне начертання текстуТекст

Будь-які теги форматування тексту можна використовувати разом. Щоб зробити текст одночасно жирним і курсивним шрифтом, використовується поєднання тегів <b> і <i> (приклад 1). Порядок їх в цьому випадку не має значення.

Приклад 1. Жирний курсивний текст

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Текст</title>
 </head>
 <body>   
   <p>Он словно вырезан из <b>камня</b>, стоек и неподвижен в отличие от его противников. 
   <i>Дух и жизненная сила</i> в нём достигла <b><i>совершенства</i></b>. 
   Но вот беда — никто не смеет принять его вызов.</p>
 </body>
</html>

Результат цього прикладу показано на рис. 1.

Використання тегів <sup> і <sub> зсуває текст відносно базової лінії та зменшує розмір шрифта (приклад 2).

Приклад 2. Створення нижнього індексу

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Текст</title>
 </head>
 <body> 
  <p><b>Формула изумруда:</b>
  <i>Be<sub>3</sub>Al<sub>2</sub>(SiO<sub>3</sub>)<sub>6</sub></i></p>
 </body>
</html>

Результат цього прикладу показано на рис. 2.

Теги <strong> і <em> виконують ті ж функції, що й теги <b> і <i>, але написання останніх коротше, звичніше та зручніше.

Слід відзначити, що теги <b> і <strong>, так само як <i> і <em>, є не зовсім еквівалентними й замінюваними. Перший тег <b> — це тег фізичної розмітки, який встановлює жирний текст, а тег <strong> — тег логічної розмітки, який визначає важливість позначеного тексту. Таке розподіл тегів на логічне та фізичне форматування спочатку було призначене для зроблення HTML універсальним, в тому числі не залежним від пристрою виведення інформації. Теоретично, якщо скористатися, наприклад, мовним браузером, то текст, оформлений за допомогою тегів <b> і <strong>, буде позначено по-різному. Однак виявилося так, що в популярних браузерах результат використання цих тегів еквівалентний.

SEO текст: Навчання форматуванню тексту: основні теги HTML для зміни вигляду тексту. Практичні приклади використання жирного, курсивного, верхнього та нижнього індексів. Вивчіть як коректно застосовувати теги для кращого оформлення текстового контенту.

Часті запитання