Разметка текста в HTML

Изменения в документах: элементы DEL и INS

Изменения, возникшие в документе с момента, когда он стал доступен в первый раз, можно пометить, чтобы посетители могли сразу определить, что и когда изменилось.

Для выделения текста, который был удален в новой версии документа, предназначен элемент DEL. Подобное форматирование позволяет отследить изменения, сделанные в тексте документа. Текст, помеченный элементом DEL, браузеры обычно отображают как перечеркнутый. В спецификации HTML 4.01 этому элементу отдается предпочтение перед элементами физического форматирования STRIKE или S, обозначающих перечеркнутый текст.

Для выделения текста, который был добавлен в новую версию, используется элемент INS. Его полезно использовать для отметки изменений, вносимых в документ от версии к версии. Текст, помеченный элементом INS, обычно отображается подчеркнутым текстом.

Элементы DEL и INS имеют два необязательных атрибута: cite и datetime. Значение атрибута cite должно представлять собой URL-адрес документа, поясняющего причины удаления данного фрагмента или подробности внесенных дополнений, а атрибут datetime указывает дату удаления или вставки.

Программный код: элемент CODE

Элемент CODE предназначен для отображения одной или нескольких строк текста, который представляет собой программный код: имена переменных, ключевые слова, тексты функции и т.д. Браузеры обычно отображают содержимое контейнера CODE моноширинным текстом уменьшенного размера. Этот элемент не следует путать с элементом PRE, являющимся элементом блочного уровня, который следует использовать для отметки больших фрагментов кода. Кроме того, в отличие от элемента PRE, дополнительные пробелы внутри контейнера CODE не учитываются так же, как и переносы текста.

Определения: элемент DFN

Как правило, новый термин, упоминающийся в документе, выделяется курсивом, также дается его определение. Тогда при использовании этого термина в дальнейшем, он считается уже известным читателю. Для выделения таких терминов при их первом появлении в тексте используется элемент DFN. Браузеры, по умолчанию, отображают содержимое контейнера DFN с помощью курсивного начертания.

Вывод взаимодействия с компьютером: элементы SAMP и KBD

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

Элемент KBD используется для обозначения текста, который набирается на клавиатуре, или для названия клавиш. Браузеры, по умолчанию, помечают текст в контейнере KBD и SAMP моноширинным шрифтом.

Выделение важных фрагментов текста: элементы STRONG и EM

Для выделения важных фрагментов текста, как правило, используются элементы EM и STRONG. Браузеры обычно отображают текст, отмеченный элементом EM и STRONG, курсивом и полужирным шрифтом соответственно. Элементом STRONG обычно размечают более важные фрагменты текста, чем те, что размечены элементом EM.

Следует отметить, что элементы I и EM, так же как B и STRONG, несмотря на сходство результата, являются не совсем эквивалентными и взаимозаменяемыми. Например, элемент I является элементом физической разметки и устанавливает курсивный текст, а элемент EM - элементом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально должно было сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов I и EM, будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.

Переменные: элемент VAR

Элемент VAR используется для указания переменных в текстовом контенте. Он может включать алгебраические математические выражения или находиться в программном коде. Браузеры обычно помечают такой текст курсивом. Например, элемент VAR можно использовать следующим образом:

<VAR>x+y=z</VAR>

Элементы физического форматирования

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

Элементы стиля шрифта: TT, I, B, BIG, SMALL, U, STRIKE и S

Элемент B отображает текст полужирным шрифтом. В большинстве случаев рекомендуется вместо него использовать элементы логического форматирования STRONG или EM.

Элемент I отображает текст курсивом. Для большинства случаев вместо данного элемента рекомендуется использовать элементы EM, DFN или CITE, поскольку последние лучше отражают назначение выделяемого текста.

Элемент TT отображает текст моноширинным шрифтом. Для большинства случаев вместо этого элемента лучше использовать элементы CODE, SAMP или KBD.

Элемент U отображает текст подчеркнутым. Данный элемент отмечен как не рекомендуемый, вместо него предлагается использовать элементы STRONG или CITE.

Элементы STRIKE и S отображают текст, перечеркнутый горизонтальной линией. Оба элемента отменены, и вместо них рекомендуется использовать элемент DEL.

Элементы BIG и SMALL выводят текст шрифтом большего и меньшего (чем непомеченная часть текста) размера. Вместо элемента BIG предпочтительнее использовать элемент STRONG, а размер устанавливать с помощью соответствующих свойств CSS.

Верхние и нижние индексы: элементы SUB и SUP

Чтобы пометить часть некоторого текста как верхний или нижний индекс, используют элементы SUB и SUP. Элемент SUB сдвигает текст ниже уровня строки и выводит его шрифтом меньшего размера. Элемент SUP сдвигает текст выше уровня строки и выводит его шрифтом меньшего размера. Эти элементы удобно применять для разметки несложных математических выражений, не обращаясь к использованию специального языка математической разметки MathML. Например, формула воды может быть записана следующим образом:

<P>H<SUB>2</SUB>O</P>

Элементы модификатора шрифта: FONT и BASEFONT

Элемент FONT позволяет задать такие параметры шрифта, как тип (или семейство шрифтов), размер и цвет. Элемент BASEFONT применяется для задания базового шрифта сразу для всей страницы. Обычно он указывается сразу после элемента BODY. В Спецификации HTML 4.01 эти элементы отнесены к отмененным, и их дальнейшее применение не рекомендуется.

Базовые контейнеры: элементы DIV и SPAN

Большинство элементов в HTML существует для описания контента, такого, как изображения, списки, заголовки, или помогают в настройке документа ( HEAD, LINK и т.д.). Однако имеется два элемента, которые не имеют заданного значения. Спецификация HTML декларирует, что элементы DIV и SPAN совместно с атрибутами id и class образуют базовый механизм для добавления в документы структуры. Эти два элемента можно считать некоторой несущей опорой HTML.

Элемент DIV является базовым контейнером блочного уровня. Он используется для объединения различных частей контента в логически цельную единицу или логический блок. Этот элемент, эффективно взаимодействуя с таблицами стилей, позволяет форматировать разделы отдельной страницы или даже целого сайта. Текстовый блок, отделенный логически, легко потом выделить при отображении любым способом, например, шрифтом, цветом, межстрочным интервалом, центрированием и т.п. Содержимое элемента DIV может быть расположено произвольным образом, выделено другим фоном и т.д. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить параметр class или id с именем селектора.

Аналогом DIV на уровне текста является элемент SPAN. Элемент SPAN является базовым контейнером строкового уровня. Он также помогает представить структуру документа, но используется для объединения в группу или создания оболочки вокруг других строковых элементов или текста.

Различие между двумя этими элементами состоит в типе контента, а также в его представлении при записи без какого-либо стилевого оформления. Элемент DIV помещается вокруг группы элементов блочного уровня (например, создать оболочку вокруг заголовка и списка ссылок, чтобы создать навигационное меню). Элемент SPAN создает оболочку вокруг группы строковых элементов или (чаще всего) обычного текста.

Следующий фрагмент кода демонстрирует применение элементов DIV и SPAN:

<BODY>
  <DIV id="Content">
    <H1>Заголовок страницы </H1>
    <P>Это первый параграф.</P>
    <IMG src="image.gif" alt="Это какое-то изображение">
    <P>Это второй параграф, который содержит <SPAN id="Special"> элемент SPAN</SPAN>.</P>
  </DIV>
</BODY>

Теперь можно выделить содержимое элементов DIV и SPAN с помощью их атрибутов id и применить к ним специальное стилевое оформление и позиционирование с помощью свойств CSS.