Физическое и логическое форматирование в HTML
http://belarusweb.net
Основы создания сайтов

Физическое и логическое форматирование документа

Физическое форматирование документа

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

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

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

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

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

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

HTML Результат BwCodes
<!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>

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

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

Логическое форматирование документа

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

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

  • <em> (от англ. emphasisакцент) – элемент разметки 'em', сформированный данным тегом, предназначен для акцентирования внимания на фрагменте текста (обращает внимание на его важность) и отображает свое содержимое курсивом;
  • <strong> (от англ. strongсильный) – элемент разметки 'strong', сформированный данным тегом, предназначен для еще большего акцентирования текста (делает его еще более важным) и отображает свое содержимое полужирным шрифтом;
  • <cite> (от англ. citeцитировать) – элемент разметки 'cite', сформированный данным тегом, предназначен для выделения сносок на другой материал и отображает свое содержимое курсивом;
  • <code> (от англ. 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маленький) – элемент разметки 'small', сформированный данным тегом, предназначен для выделения текста, который можно отнести к надписям мелким шрифтом или пометкам, как, например, второстепенная информация в конце юридических документов об отказе от ответственности или же информации о лицензии; элемент отображает свое содержимое моноширинным шрифтом уменьшенного размера;
  • <time> (от англ. timeвремя) – элемент разметки 'time', сформированный данным тегом, предназначен для создания контейнера, содержимое которого помечается как дата, время или дата и время; обычно содержимое элемента 'time' представляет собой дату и время в удобочитаемом для пользователей формате; браузеры никак не выделяют содержимое элемента 'time'.

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

HTML Результат BwCodes
<!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. Использование элементов логической разметки

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

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

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

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

HTML Результат BwCodes

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

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

Быстрый переход к другим страницам