HTML учебник. Бесплатные уроки HTML для начинающих разработчиков и веб-мастеров. Пробуем создать простой HTML сайт.

Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел HTML. Чтобы тексты на страницах браузера были более удобными для посетителей их нужно уметь форматировать: выделять тем или иным образом определенные фрагменты текста, чтобы привлечь внимание посетителей. Форматирование в HTML делится на правильное форматирование, которое называется логическим и о нем мы поговорим в следующей записи и неправильное форматирование текста в HTML, которое получило название непосредственное форматирование текста в HTML. Вот как раз про непосредственное форматирование мы и поговорим в данной записи.

Непосредственное форматирование текста в HTML

Собственно, из этой записи вы узнаете, как форматировать тексты в HTML документе и чем это облегчит жизнь посетителей вашего сайта. Также вы поймете почему вместо тэгов, относящихся к группе непосредственного форматирования, вам лучше использовать тэги логического форматирования и какие плюсы это вам даст. Данная запись разделена на три раздела:

1. Из первого раздела вы узнаете о том, для чего используются тэги непосредственного форматирования текста в HTML.
2. Второй раздел является справочником тэгов непосредственного форматирования текста.
3. Третий раздел является пример, который показывают, как тэги непосредственного форматирования меняют текст HTML документа.

Для чего используется непосредственное форматирование в HTML

Мы уже разобрались с тем, что такое HTML и рассмотрели некоторые тонкости реализации языка HTML. Пришло время начать практиковаться в использование некоторых HTML тэгов. И сегодня мы поговорим про непосредственное форматирование текста в HTML. Дело всё в том, что разработчики стандарта HTML стараются вносить смысл в каждый HTML элемент, который мы видим на странице в браузере, но так было не всегда. По той простой причине, что, во-первых, раньше не было браузеров для людей с ограниченными возможностями, во-вторых, поисковые системы раньше были не такие «умные».

Поэтому на заре развития HTML не особо сильно задумывались о смысле HTML тэгов, а больше задумывались о их назначение.  Для того, чтобы как-то выделять слова в тексте в HTML  документа были введены специальные тэги форматирования текста. HTML тэги, отвечающие за непосредственное форматирование текста в документе не имеют смысла, а лишь имеют какое-то назначение: тем или иным способом выделяя слова и фразы в тексте HTML документа.

На данный момент стандарт HTML рекомендует отказаться от использования тэгов непосредственного форматирования текста в документе и применять тэги логического форматирования, в которые вложен смысл и, которые точно так же, как и тэги непосредственного форматирования выделяют текст в HTML документе тем или иным образом.

Использовать HTML тэги непосредственного форматирования еще не рекомендуется и потому, что практические для всех их возможностей есть аналог в каскадных таблицах стилей, а как вы помните, хорошим тоном считается отделение содержимого от его оформления, поэтому-то также не рекомендуется использовать для оформления HTML атрибуты.

Все HTML тэги непосредственного форматирования текста являются парными HTML тэгами, а HTML элементы, которые создает браузер в процессе интерпретации тэгов непосредственного форматирования текста, являются строчными HTML элементами. Для каждого из этих тэгов/элементов доступны универсальные атрибуты и атрибуты HTML событий.

Справочник тэгов для непосредственного форматирования текста в HTML

Мы поговорили о ключевых особенностях тэгов для непосредственного форматирования текста в HTML. Теперь давайте их опишем и дадим краткую характеристику: посмотрим на их непосредственность и на то, как они форматируют текст на наших HTML страницах. Также стоит отметить, что в HTML всего девять тэгов для непосредственного форматирования.

1. HTML тэг <i> относится к группе тэгов непосредственного форматирования текста. Предназначен он для того, чтобы сделать вложенный текст курсивом, никакого смысла данный тэг не имеет, а лишь служит для курсивного выделения.
2. Тэг <b> используется для форматирования текста в HTML, делая его начертание жирным, как и предыдущий тэг, тэг <b> не несет в себе никакого смысла, а лишь имеет назначение.
3. HTML тэг <u> принадлежит группе непосредственного форматирования текста, делая вложенный текст подчеркнутым. Никакого смысла данный тэг не несет.
4. HTML тэг <strike>, данный тэг форматирует текст в HTML, делая его зачеркнутым. Никакого смысла тэг <strike> не несет, но выполняет свое назначение: текст внутри этого тэга будет выделен браузером, как зачеркнутый.
5. Тэг <tt> используется для непосредственного форматирования в HTML. Тэг <tt> не имеет логического смысла, но имеет назначение: текст внутри данного тэга будет написан моноширинным шрифтом. Моноширинный шрифты – это такой шрифт, в котором каждый символ отображается с одинаковой шириной.
6. Тэг <big>. Данный тэг делает текст, находящийся внутри него большим, увеличивая его размер. Тэг <big> относится к группе тэгов непосредственного форматирования текста и не имеет никакого смысла, а лишь имеет назначение в HTML документе, увеличивая текста, находящийся внутри.
7. HTML тэг <small> — это еще один тэг группы непосредственного форматирования текста в HTML, этот тэг не имеет смысла и служит лишь для уменьшения текста, который находится внутри него.
8. HTML тэг <sub>, как и любой тэг непосредственного форматирования текста в HTML, он не имеет смысла, а назначение его заключается в том, что текст внутри тэга <sub> отображается, как нижний индекс. То есть текст внутри тэга <sub> будет уменьшен и сдвинут вниз относительно базовой линии в тексте, за счет чего мы воспринимаем его, как нижний индекс.
9. Тэг <sup> форматирует текст в HTML, делая его несколько меньше и сдвигает текст вверх относительно базовой линии. Другими словами: HTML тэг <sup> делает текст, находящийся внутри верхним индексом или надиндексом.

Из всех тэгов непосредственного форматирования HTML текста, которые были приведены выше, стандарт рекомендует использовать нам в своих документах только тэги <sup> и <sub> в различных математических формулах, все остальные тэги непосредственного форматирования не рекомендованы к использованию в HTML.

Примеры непосредственного форматирования в HTML

Давайте теперь попрактикуемся и сделаем пример, в котором будем использовать HTML тэги группы непосредственного форматирования текста, описать это одно, а попробовать отформатировать HTML текст самостоятельно – это совсем другое. Откройте любой редактор, можно даже Блокнот (хотя на данный момент у нас есть множество более удобных редакторов, например: CSS редактор Brackets, JavaScript редактор Sublime Text 3, бесплатный редактор Notepad++ и даже IDE NetBeans, все эти редакторы намного удобнее Блокнота)  и сохраните код, написанный ниже в файле с расширением .html или .htm:

[php]

<!DOCTYPE html>

<html lang="ru-RU">

<head>

<meta charset="UTF-8">

<title>Непосредственное форматирование текста в HTML</title>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<h1>Пример к статье непосредственное форматирование текста в HTML</h1>

<p>Тэги непосредственного <b>форматирования текста в HTML</b>

<i>не имеют смысла</i>, а <u>лишь используются</u> для того, чтобы

<tt>каким-либо образом</tt> выделять <strike>фрагмент текста</strike>.

Например, мы можем <big>увеличить текст</big> в HTML документе. Или

наоброт — <small>уменьшить его</small>. А можем сделать ^{верхний индекс}

или _{нижний индекс}</p>

<p>В HTML всего девять тэгов группы непосредственного форматирования текста.</p>

</body>

</html>

[/php]

Не забывайте использовать табуляцию и перенос строк для форматирования HTML кода. Теперь давайте откроем наш пример в браузере и посмотрим, как тэги непосредственного форматирования преобразовали HTML текст.

Пример использования HTML тэгов непосредственного форматирования текста

Конечно, смысла в данном примере мало, как и в HTML тэгах непосредственного форматирования текста, но этот пример прекрасно демонстрирует то, как преобразуется текст, находящийся внутри этих тэгов.