Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел HTML. Чтобы тексты на страницах браузера были более удобными для посетителей их нужно уметь форматировать: выделять тем или иным образом определенные фрагменты текста, чтобы привлечь внимание посетителей. Форматирование в 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>. А можем сделать <sup>верхний индекс</sup>

или <sub>нижний индекс</sub></p>

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

</body>

</html>

[/php]

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

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

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

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

Возможно, эти записи вам покажутся интересными


Выберете удобный для себя способ, чтобы оставить комментарий

Leave a Comment

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Loading Disqus Comments ...