Форматирование в HTML

Основы

Если вы хотя бы однажды использовали любой текстовый редактор, к примеру Word, вы точно знаете что такое форматирование. Но если среди вас есть те кто не знает, что это - я объясню! Итак форматированием называется выделение особо важных частей в тексте. К примеру, я могу выделить что-то заголовком (мы их кстати уже изучили), а что-то я хочу выделить жирным. Бывают также ситуации, когда мне хочется что-то выделить курсивом или другими стилистиками, которые мы и разберем сегодня, в особенности, как использовать в HTML.

Жирный текст и текст курсивом

Давайте научимся с азов: выделять какие-то участки текста жирным. Все, что появляется в элементе < b> ... < /b>, выделяется жирным шрифтом, как показано ниже в примере:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>Я хочу чтобы <b>вот этот текст</b> был выделен.</p>
</body>
</html>

Что же, мы научились выделять текст жирным, но сделать текст курсивным, тоже не составит труда! Ведь для этого существуют тэги < i> и < /i>. Пример, вы можете лицезреть ниже:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>Я хочу чтобы <i>вот этот текст</i> был выделен.</p>
</body>
</html>

Подчеркивание текста

Также текст можно выделить при помощи подчеркивания или зачеркивания, для этого служат тэги < u> < /u> и < strike> < /strike> соответственно. Использование у них аналогично с вышеперечисленными тэгами, однако, я приведу пример:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>Я хочу чтобы вот этот текст <u>был выделен</u> или <strike>зачеркнут</strike>.</p>
</body>
</html>

Объеденение контента

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

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

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

Пример представляю с применением обоих тэгов сразу:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="menu" align="middle">
<a href = "/index.html">HOME</a> |
<a href = "/contact_us.html">CONTACT</a> |
<a href = "/about.html">ABOUT</a>
</div>

<div id="content" align="left">
<h5>Мой контент</h5>
<p>Основной пример применения <span style="color:green">span tag</span>
и также <span style="color:red">div tag</span> вместе с CSS</p>
</div>
</body>
</html>

Другие стилистические тэги для выделения текста

На самом деле, для стилистики текста на странице существует множество тэгов: < small>, < big>, < del>, < ins>, < sub>, < sup> и < tt>. Однако описывать их каждый, я думаю, не имеет смысла, потому что по факту на них надо смотреть наглядно и применять их придется не так и часто на самом деле. Я думаю в 90% случаев, вы даже с ними и не столкнетесь. А все потому, что удобнее и комфортнее работать с текстом по средствам CSS стилей.