Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел 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 тэгами, а HTML элементы, которые создает браузер в процессе интерпретации тэгов непосредственного форматирования текста, являются строчными HTML элементами. Для каждого из этих тэгов/элементов доступны универсальные атрибуты и атрибуты HTML событий.
Справочник тэгов для непосредственного форматирования текста в HTML
Мы поговорили о ключевых особенностях тэгов для непосредственного форматирования текста в HTML. Теперь давайте их опишем и дадим краткую характеристику: посмотрим на их непосредственность и на то, как они форматируют текст на наших HTML страницах. Также стоит отметить, что в HTML всего девять тэгов для непосредственного форматирования.
- HTML тэг <i> относится к группе тэгов непосредственного форматирования текста. Предназначен он для того, чтобы сделать вложенный текст курсивом, никакого смысла данный тэг не имеет, а лишь служит для курсивного выделения.
- Тэг <b> используется для форматирования текста в HTML, делая его начертание жирным, как и предыдущий тэг, тэг <b> не несет в себе никакого смысла, а лишь имеет назначение.
- HTML тэг <u> принадлежит группе непосредственного форматирования текста, делая вложенный текст подчеркнутым. Никакого смысла данный тэг не несет.
- HTML тэг <strike>, данный тэг форматирует текст в HTML, делая его зачеркнутым. Никакого смысла тэг <strike> не несет, но выполняет свое назначение: текст внутри этого тэга будет выделен браузером, как зачеркнутый.
- Тэг <tt> используется для непосредственного форматирования в HTML. Тэг <tt> не имеет логического смысла, но имеет назначение: текст внутри данного тэга будет написан моноширинным шрифтом. Моноширинный шрифты – это такой шрифт, в котором каждый символ отображается с одинаковой шириной.
- Тэг <big>. Данный тэг делает текст, находящийся внутри него большим, увеличивая его размер. Тэг <big> относится к группе тэгов непосредственного форматирования текста и не имеет никакого смысла, а лишь имеет назначение в HTML документе, увеличивая текста, находящийся внутри.
- HTML тэг <small> — это еще один тэг группы непосредственного форматирования текста в HTML, этот тэг не имеет смысла и служит лишь для уменьшения текста, который находится внутри него.
- HTML тэг <sub>, как и любой тэг непосредственного форматирования текста в HTML, он не имеет смысла, а назначение его заключается в том, что текст внутри тэга <sub> отображается, как нижний индекс. То есть текст внутри тэга <sub> будет уменьшен и сдвинут вниз относительно базовой линии в тексте, за счет чего мы воспринимаем его, как нижний индекс.
- Тэг <sup> форматирует текст в HTML, делая его несколько меньше и сдвигает текст вверх относительно базовой линии. Другими словами: HTML тэг <sup> делает текст, находящийся внутри верхним индексом или надиндексом.
Из всех тэгов непосредственного форматирования HTML текста, которые были приведены выше, стандарт рекомендует использовать нам в своих документах только тэги <sup> и <sub> в различных математических формулах, все остальные тэги непосредственного форматирования не рекомендованы к использованию в HTML.
Примеры непосредственного форматирования в HTML
Давайте теперь попрактикуемся и сделаем пример, в котором будем использовать HTML тэги группы непосредственного форматирования текста, описать это одно, а попробовать отформатировать HTML текст самостоятельно – это совсем другое. Откройте любой редактор, можно даже Блокнот (хотя на данный момент у нас есть множество более удобных редакторов, например: CSS редактор Brackets, JavaScript редактор Sublime Text 3, бесплатный редактор Notepad++ и даже IDE NetBeans, все эти редакторы намного удобнее Блокнота) и сохраните код, написанный ниже в файле с расширением .html или .htm:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
|
<!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>. А можем сделать <sup>верхний индекс</sup> или <sub>нижний индекс</sub></p> <p>В HTML всего девять тэгов группы непосредственного форматирования текста.</p> </body> </html> |
Не забывайте использовать табуляцию и перенос строк для форматирования HTML кода. Теперь давайте откроем наш пример в браузере и посмотрим, как тэги непосредственного форматирования преобразовали HTML текст.

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