Физическое и логическое форматирование текста.
belarusweb.net
© Петр Романовский Минск, 2016-2018.



belarusweb.net
Основы создания сайтов...

2.5. Описание тегов <b>, <i>, <u>, <s>, <sub>, <sup>, <em>,
<strong>, <cite>, <code>, <kbd>, <var>, <samp>, <dfn>,
<abbr>, <q>, <ins>, <del>, <small>, <address>, <blockquote>

Физическое форматирование текста.
Теги <b>, <i>, <u>, <s>, <sub>, <sup>

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

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

Приведем описание тегов, которые в предыдущих версиях HTML можно было смело отнести к тегам физического форматирования:

  • <b> (от англ. bold) – элемент разметки 'b', сформированный данным тегом, отображает свое содержимое полужирным шрифтом; в HTML 5 он обозначает стилистическое усиление своего содержимого, например, ключевых слов, которые выделяются в типографике полужирным начертанием;
  • <i> (от англ. italic) – элемент разметки 'i', сформированный данным тегом, отображает свое содержимое курсивом; в HTML 5 он обозначает дополнительное выделение своего содержимого, например, иностранных слов, технических терминов, вставок рукописного текста, короче того, что выделяется курсивом в типографике;
  • <u> (от англ. underline) – содержимое элемента разметки 'u', сформированного данным тегом, отображается подчеркнутым; в HTML 5 он в основном используется для стилистического выделения слов с орфографическими ошибками или имен собственных в китайском языке;
  • <s> (от англ. strike out) – содержимое элемента разметки 's', сформированного данным тегом, отображается зачеркнутым; в HTML 5 он используется для текста, который потерял свою актуальность, например, для старой цены продукта;
  • <sub> (от англ. subscript) – элемент разметки 'sub', сформированный данным тегом, отображает свое содержимое в виде нижнего индекса;
  • <sup> (от англ. superscript) – элемент разметки 'sup', сформированный данным тегом, отображает свое содержимое в виде верхнего индекса.

Все перечисленные элементы формируются соответствующими парными тегами и отображаются браузерами как строчные элементы.

Использование перечисленных элементов разметки показано в примере 2.7.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Элементы физической разметки</title>
</head>
<body>
	<b>Я &ndash; просто жирный текст.</b> <br>
	<i>Я &ndash; курсивный.</i> <br>
	<u>Я &ndash; подчеркнутый.</u> <br>	
	<s>Я &ndash; зачеркнутый.</s> <br>
	А вот это выражение похоже на странную формулу:<br>
	a<sup>верхний индекс</sup> + b<sub>нижний индекс</sub>.<br><br>
	Для изменения внешнего вида используйте не нас, а стили CSS!
</body>
</html>

Пример 2.7. Использование элементов физической разметки

Как видим, указанные теги вполне можно было бы использовать для физической разметки документа. Тем более, что сами названия явно указывают на предназначение элементов: italic, bold, underline и т.д. Однако все это пережитки старых версий, и применять какие-либо теги только лишь для изменения внешнего вида текста крайне не рекомендуется. Ведь в HTML 5 все теги имеют логическую нагрузку, хотя отношение некоторых из них к логическим и выглядит несколько натянутым. Однако в любом случае, теперь HTML 5 практически полностью используется в веб-программировании, как инструмент логической разметки документа, а за внешний вид отвечает 'CSS'.

Логическое форматирование текста.
Теги <em>, <strong>, <cite>, <code>, <kbd>, <var>, <samp>, <dfn>,
<abbr>, <q>, <ins>, <del>, <small>, <address>, <blockquote>

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

Приведем описание тегов логического форматирования:

  • <em> (от англ. emphasis) – элемент разметки 'em', сформированный данным тегом, предназначен для акцентирования текста (обращает внимание на его важность) и отображает свое содержимое курсивом;
  • <strong> – элемент разметки 'strong', сформированный данным тегом, предназначен для еще большего акцентирования текста (делает его еще более важным) и отображает свое содержимое полужирным шрифтом;
  • <cite> – элемент разметки 'cite', сформированный данным тегом, предназначен для выделения сносок на другой материал и отображает свое содержимое курсивом;
  • <code> – элемент разметки 'code', сформированный данным тегом, предназначен для выделения текста программного кода и отображает свое содержимое моноширинным шрифтом;
  • <kbd> (от англ. keyboard) – элемент разметки 'kbd', сформированный данным тегом, предназначен для выделения текста, который должен быть введен с клавиатуры или используется для названия клавиш клавиатуры; элемент отображает свое содержимое моноширинным шрифтом;
  • <var> (от англ. variable) – элемент разметки 'var', сформированный данным тегом, предназначен для выделения переменных компьютерных программ и отображает свое содержимое курсивом;
  • <samp> (от англ. sample) – элемент разметки 'samp', сформированный данным тегом, предназначен для выделения текста, который является результатом вывода компьютерной программы, и отображает свое содержимое моноширинным шрифтом;
  • <dfn> (от англ. definition) – элемент разметки 'dfn', сформированный данным тегом, предназначен для выделения терминов, которые встречаются в тексте впервые, и отображает свое содержимое курсивом;
  • <abbr> (от англ. abbreviation) – элемент разметки 'abbr', сформированный данным тегом, предназначен для выделения аббревиатур и обычно используется с атрибутом title, содержащим расшифровку аббревиатуры; текст данного элемента браузерами никак не выделяется, сохраняя исходное форматирование;
  • <q> (от англ. quote) – элемент разметки 'q', сформированный данным тегом, предназначен для выделения в тексте небольших цитат и отображает свое содержимое в кавычках;
  • <ins> (от англ. inserted) – элемент разметки 'ins', сформированный данным тегом, предназначен для выделения текста, который был добавлен в новую версию документа, и отображает свое содержимое подчеркнутым;
  • <del> (от англ. deleted) – элемент разметки 'del', сформированный данным тегом, предназначен для выделения текста, который был удален в новой версии документа, и отображает свое содержимое зачеркнутым;
  • <small> – элемент разметки 'small', сформированный данным тегом, предназначен для выделения текста, который можно отнести к надписям мелким шрифтом или пометкам, как, например, второстепенная информация в конце юридических документов об отказе от ответственности или же информации о лицензии; элемент отображает свое содержимое моноширинным шрифтом.

Все перечисленные элементы также формируются соответствующими парными тегами и отображаются браузерами как строчные элементы (см. пример 2.8).

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Элементы логической разметки</title>
</head>
<body>
<p>	
	<dfn style="color: blue">PHP</dfn> &ndash; скриптовый язык общего назначения.   
	<br> Узнайте, как расшифровывается аббревиатура 
	<em style="color: blue"><abbr title="Hypertext Preprocessor">PHP</abbr></em>, 
	наведя на нее курсор. <br>
	Хотя первоначально аббревиатура <em style="color: blue">PHP</em> означала 
	<em><del>Personal Home Page Tools</del></em>, <br>теперь ее стоит 
	расшифровывать как <strong><ins>Hypertext Preprocessor</ins></strong>. <br>
</p>
<p>	
	Давайте посмотрим на фрагмент кода <em style="color: blue">PHP</em>: 
	<code> echo "Всем привет от PHP!";</code>. <br>
	Как сказал автор кода на своей страничке  <cite>http://www.fdpppdf.com</cite>: 
	<br> <q style="color: red">Великий код!</q>. <br>
</p>
<p>	
	Для запуска кода нажмите на клавиатуре <kbd>'ALT'+'SHIFT'+'Поехали!'</kbd>.<br>
	На экран будет выведено приветствие: "<samp>Всем привет от PHP!</samp>". <br>
	Убедились? Оператор <var style="color: green">echo</var> &ndash; это сила! <br>
</p>	
	<small>Все права на пример защищены марсианским законодательством.</small>
</body>
</html>

Пример 2.8. Использование элементов логической разметки

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

В завершение пункта отдельно приведем описание еще двух элементов логической разметки документа:

  • <address> – элемент разметки 'address', сформированный данным парным тегом, предназначен для выделения информации об авторе, например, ссылка на его ресурс, адрес и т.д.; элемент отображает свое содержимое курсивом, а браузеры отображают как блочный элемент.
  • <blockquote> – элемент разметки 'blockquote', сформированный данным парным тегом, предназначен для выделения длинных цитат, в отличие от элемента 'q', при помощи которого выделяются небольшие цитаты; браузеры отображают элемент как блочный.

Использование данных элементов показано в примере 2.9.


<html>
<head>
	<meta charset="utf-8">	
	<title>Элементы 'address' и 'blockquote'</title>
</head>
<body>
	<h3>Бернард Шоу</h3>
	
	<blockquote>
		Мир настолько сгнил, что даже влюбиться в кого-то — <br>
		это самый большой риск, который мы можем себе позволить. <br>
		Нас сжимает изнутри от вероятности, что это окажется не <br>
		взаимно или агрессивно воспринято. Люди разучились любить, <br>
		миром правят потребительские отношения.
	</blockquote>
	
	<address>Связаться с автором цитаты не получится.</address>
</body>
</html>	

Пример 2.9. Использование элементов 'address' и 'blockquote'

Видеоуроки по курсу HTML

Комментарии (0)

Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!