Оформлення тексту

Для оформлення тексту існують наступні теги, іменовані тегами форматування.

Теги <b> і <strong> дозволяють написати жирний текст:

<strong>Жирний текст</strong> або <b>Жирний текст</b>

В результаті обоє цих варіанти в браузері виглядатимуть так:

Жирний текст

Теги <i> і <em> дозволяють написати текст курсивом:

<i>Текст курсивом</i> або <em>Текст курсивом</em>

В результаті обоє цих варіанти в браузері виглядатимуть так:

Текст курсивом

Тег <u> дозволяє написати підкреслений текст:

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

У браузері побачимо:

Підкреслений текст

Цей тег корисно використовувати для виділення заслань.

Тег <strike> дозволяє написати закреслений текст:

<strike>Зачеркнутый текст</strike>

У браузері побачимо:

Закреслений текст

Теги <sup> і <sub> дозволяють написати верхній індекс або нижній індекс відповідно. Ці теги зменшують розмір тексту і зрушують його відносно базової лінії вгору або вниз.

Наприклад, їх можна використовувати для написання формул:

E = mc² або C₂H₅OH

У браузері побачимо:

E = mc2 або C2H5OH

Теги форматування можна використовувати спільно.

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

<b><i>Жирный курсивний текст</i></b>

І в браузері ми побачимо:

Жирний курсивний текст

Зверніть увагу: якщо тег <b> стоїть першим, то закриваючий тег </b> повинен стояти в кінці. Тобто теги "вкладуються" один в одного як матрьошки. Саме тому парні теги ще називають контейнерами.

Зведена таблиця тегів форматування:

Тег	Дія	Приклад використання	Результат
<b>	Робить текст жирним	<b>Текст</b>	Текст
<strong>	Робить текст жирним	<strong>Текст</strong>	Текст
<i>	Робить текст курсивним	<i>Текст</i>	Текст
<em>	Робить текст курсивним	<em>Текст</em>	Текст
<u>	Робить текст підкресленим	<u>Текст</u>	Текст
<strike>	Робить текст закресленим	<strike>Текст</strike>	Текст
<sup>	Верхній індекс	E = mc<sup>2</sup>	E = mc2
<sub>	Нижній індекс	C<sub>2</sub>H<sub>5</sub>OH	C2H5OH

Заголовки

Аби якось виділити заголовки в тексті, в html існують спеціальні теги заголовка. Ці теги змінюють розмір тексту, понад і знизу заголовка робляться відступи, пропорційні його розміру, а також після заголовка робиться перенесення рядка. Ось ці теги: <h1>, <h2> : <h6>. <h1> - найбільший заголовок, <h6> - найменший.

Тобто якщо написати:

<h1>Текст у вигляді великого заголовка</h1> і <h6>Текст у вигляді маленького заголовка</h6>

Браузер відображуватиме це так: