Привет, посетитель сайта 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:
[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 тэгах непосредственного форматирования текста, но этот пример прекрасно демонстрирует то, как преобразуется текст, находящийся внутри этих тэгов.
Выберете удобный для себя способ, чтобы оставить комментарий