HTML конструювання Форматування тексту – засоби його зміни, такі як вибір стилю шрифту і використання ефектів, що дозволяють змінювати вигляд тексту. У табл. 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>, буде відзначений по-різному. Однак вийшло так, що в популярних браузерах результат використання цих тегів рівнозначний.