Оформление текста

Для оформления текста существуют следующие теги, именуемые тегами форматирования.

Теги <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 = mc² или C₂H₅OH

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

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

<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>

Браузер отобразит это так:

Текст в виде большого заголовка

и

Текст в виде маленького заголовка Теги переноса строки и форматирования абзаца

Вот еще несколько полезных теги для форматирования текста.

Полезно знать:

Если в тесте html-документа поставить перенос строки, то браузер его проигнорирует и отобразит весь текст в одну строку.

Например, в тесте html-документа написано:

Идет бычок, качается, Вздыхает на ходу...

А браузер отобразит этот текст следующим образом:

Идет бычок, качается, Вздыхает на ходу...

Тут-то нас и спасет тег <br>. Это непарный тег, означающий переход на новую строку.

Т.е написав:

Идет бычок, качается,<br> Вздыхает на ходу... или Идет бычок, качается,<br>Вздыхает на ходу...

В браузере мы увидим:

Идет бычок, качается, Вздыхает на ходу...

С помощью этого тега можно не только перенести тест на новую строку, но и делать отступы между разными элементами документа. Достаточно просто вставить не один тег <br>, а два и т.д.

Полезно знать:

Если в тесте html-документа подряд стоят несколько пробелов, то браузер их проигнорирует и отобразит только один.

Например, в тесте html-документа написано:

Здравствуй,     дорогой друг!

А браузер отобразит этот текст следующим образом:

Здравствуй, дорогой друг!

Тег <pre> используется, когда требуется написать текст как есть, включая все пробелы и переносы строки.

Т.е. если написать:

<pre>Идет бычок,     качается, Вздыхает на ходу...</pre>

То браузер отобразит этот текст следующим образом:

Идет бычок, качается,

Вздыхает на ходу...

Но!

Не стоит злоупотреблять тегом <pre>. И по возможности обходиться без него.

Любой текст можно, а иногда и нужно, разбить на абзацы. В html такую функцию выполняет тег <p>. Если поместить текст между открывающим тегом <p> и закрывающим тегом </p>, то сверху и снизу от этого теста появится отступ, т.е. этот кусок текста отделится от общей массы текста и образуется параграф. По умолчанию параграф выровнен по левому краю.