Перейти к содержанию

HTML в профилях/Ссылки и акценты

Добавить ссылки
Материал из Викиучебника — открытых книг для открытого мира

В данном разделе мы дополним рассмотренный ранее «базовый профиль» HTML элементами, позволяющими семантически выделить участки текста, а также присвоить им идентификаторы, обеспечивающие, в частности, возможность ссылаться на конкретный элемент (и, следовательно, — содержащийся в нем текст.)

Спецификация HTML5 предусматривает 27 основных элементов (ниже) для семантического выделения участков текста.[1][2] Из них, в данном разделе мы подробно рассмотрим шесть (a, em, strong, i, b, span), после чего лишь кратко опишем назначение оставшихся. Кроме того, здесь же мы рассмотрим необходимый элементу a атрибут href, а также атрибут class, который может использоваться для «уточнения» смысла предлагаемых HTML5 элементов.

Элемент a и атрибут href

[править]

Данный элемент позволяет связать произвольный фрагмент (ноль или более узлов) HTML-документа с произвольным ресурсом, задаваемым атрибутом href. С помощью размеченного таким образом текста пользователь (или алгоритм) может перейти по ссылке. В качестве значения атрибута используется интернационализованный идентификатор ресурса (англ. Internationalized Resource Identifier, IRI.) Частным случаем такого идентификатора является унифицированный идентификатор ресурса, или URI (англ. Unified Resource Identifier.)[3]

Пример. Элемент a и атрибут href

<!DOCTYPE html>
<html lang="ru">
<title >Элемент a и атрибут href</title>
<p >Слово <a href="http://example.com/"
>«пример»</a> в этом примере связано со
страницей http://example.com/ Всемирной
паутины.


Слово «пример» в этом примере связано со страницей http://example.com/ Всемирной паутины.

Такой идентификатор, в общем случае, может быть неполным (или относительным) и требовать разрешения с использованием базового IRI документа, которым (в отсутствие в документе рассматриваемого далее элемента base) является IRI самого документа.

В случае, если базовый IRI (полученный по-умолчанию, или же указанный явно) совпадает с собственным IRI документа, для ссылок в пределах последнего можно использовать неполный IRI в форме #идентификатор, где идентификатор элемента задается атрибутом id. Так, код см. описание <a href="#id" >атрибута id</a> воспроизводится как см. описание атрибута id.[4]

Некоторые примеры разрешения IRI приведены в таблице ниже.

Таблица. Примеры разрешения неполных IRI
IRI ссылки Базовый IRI документа Полный IRI ссылки
#hello https://example/iri https://example/iri#hello
мир https://example/iri/привет/ https://example/iri/привет/мир
https://example/iri/привет https://example/iri/мир
../welcome https://example/iri/привет/мир https://example/iri/welcome
/главная https://example/iri/привет/мир https://example.org/главная
//example.com/ https://example.org/example/ https://example.com/
http://example.org/example/ http://example.com/
https://example.com/ (любой) https://example.com/

Атрибут id

[править]

Атрибут id определяет уникальный в пределах документа идентификатор элемента. Автор документа может выбрать произвольную строку символов — кроме пробельных — в качестве такого идентификатора, при условии ее уникальности в данном документе.[4]

Использование атрибута проиллюстрируем следующим примером.

Пример. Атрибут id

<!DOCTYPE html>
<html lang="ru">
<title >Атрибут id</title>
<p >Подробную информацию об этом примере
можно найти <a href="#details" >в
следующем абзаце.</a>
<p id="details" >(Представим, что в
данном абзаце действительно приведена
такая информация.)


Подробную информацию об этом примере можно найти в следующем абзаце.

(Представим, что в данном абзаце действительно приведена такая информация.)

Основные акценты

[править]

Назначение элементов em и strong — акцентировать внимание читателя на определенных (как правило — коротких) участках текста. При этом, элемент em позволяет выделить главное (но не обязательно — важное) в тексте[5] и применяется тогда, когда от его положения может зависеть смысл текста; например:

  • <p ><em >Эти</em> французские булки — такие мягкие.</p>
  • <p >Эти французские булки — <em >такие</em> мягкие.</p>

Элемент strong сообщает о важности, серьезности, или срочности заключенного в нем текста.[6] Например:

  • <p ><strong >Внимание!</strong> не пытайтесь повторить это дома!</p>
  • <p >Планы на сегодня: проверить почту; сходить за продуктами (уходя — <strong >не забыть выключить плиту!</strong>)</p>

Элементы i, b

[править]

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

  • для выделения терминов, биноменов (в биологии), идиом на ином языке, мыслей, смены интонации, etc. — элемент i;[7]
  • для выделения текста без какого-либо изменения его смысла или важности (как, например, ключевых слов в аннотации документа) — элемент b.[8]

Отметим, что при использовании элемента i для выделения иноязычных идиом и биноменов (а равно и иноязычных терминов), данный элемент следует дополнять атрибутом lang. (А в тех случаях, когда направление письма языка содержания элемента отличается от такового для родительского элемента, — еще и атрибутом dir.)

Спецификация HTML5 предлагает использовать элемент b в качестве «последнего средства» — когда смысл выделения не может быть передан такими элементами, как em, strong, mark, h1, …, h6, и другими подобными.[8]

Подчеркнем, что оформление данных элементов основными существующими ныне пользовательскими агентами полностью подчиняется CSS. В отличие от предыдущих версий HTML, спецификация HTML5 не предполагает, что содержание элемента i будет представлено в курсивном (англ. italic) начертании, а содержание b — в полужирном (англ. bold.)[7][8]

Атрибут class

[править]

Если некоторый элемент в документе используется в различных смыслах (как, например, рассмотренный выше элемент i), которые тем не менее требуется различать, можно применять атрибут class.

Значением атрибута является строка разделенных пробелами классов, назначаемых данному элементу, причем в качестве имени класса может вновь (подобно атрибуту id) использоваться произвольная строка символов — кроме пробельных.[9]

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

Элемент span

[править]

Данный элемент можно назвать «пустым акцентом» — в том смысле, что сам по себе он ничего не сообщает о своем содержании. Ценность данного элемента в том, что как и прочие рассматриваемые здесь элементы, он может быть использован совместно с рядом «общих» атрибутов;[10] в частности:

  1. id — для обеспечения возможности сослаться на данный конкретный фрагмент текста;
  2. class — для «имитации» элементов, семантика которых не покрывается спецификацией HTML5;
  3. lang и dir — для включения в текст фрагмента (слова, фразы, предложения) на ином языке; (для чего — в ряде случаев — может оказаться более уместным элемент i.)

Прочие элементы

[править]
abbr
Сокращение или акроним. Допускается использование атрибута title для указания расшифровки, подобно: <abbr title="Extensible Markup Language" >XML</abbr>.[11]
bdi, bdo
Фрагмент текста с явной изоляцией (bdi) или переопределением (bdo) направления письма. В отличие от прочих элементов, bdi не наследует значение атрибута dir родительского элемента и по-умолчанию полагает его значением auto. В отношении элемента bdo, спецификация HTML5 требует обязательного явного использования атрибута dir в значении ltr или rtl.[12][13]
cite, q
Источник (cite; в частности — произведение, из которого взята цитата, или автор комментария) и цитата (q.)[14][15] Например: <q >The cite element represents a reference to a creative work.</q> (see <cite >4.5.6 The cite element. HTML5. W3C (<time >2014-10-28</time>).</cite>)
code
Произвольная машинночитаемая форма («код») — имя файла, название функции, фрагмент кода на некотором языке программирования, etc.[16] Например: <p >Учетные записи пользователей определены файлом <code >/etc/passwd</code>.</p>
data
Текст с привязкой машинночитаемых данных, указываемых атрибутом value. Может использоваться совместно с микроформатами и микроданными, или же для обеспечения работы связанного с документом программного кода. В случаях, когда искомыми данными являются временные отметки, следует применять элемент time.[17]
del, ins
Удаленный и добавленный по сравнению с некоторой другой редакцией документа текст.[18][19]
dfn
Определяемый термин. Используется вместо элемента i для выделения термина в его собственном определении.[20]
kbd, samp
Ввод (kbd) и вывод (samp) при взаимодействии с машиной.[21][22] Например: <p >В ответ на вопрос <samp >Повторить (д/н)?</samp> введите <kbd >д</kbd>.</p>
mark
Текст, важный в текущем контексте. При использовании в цитатах (и других подобных случаях) — акцентирует внимание на важности с точки зрения контекста, в котором приводится цитата. (В случае, если текст выделен в источнике цитаты — применяется элемент em, — или иной подходящий. Для слов, имеющих орфографические ошибки в источнике более уместным может быть элемент u.) При использовании в основном тексте документа может означать важность текста относительно текущих действий пользователя ресурса.[23]
ruby
Огласовка идеографических символов в японском (фуригана) и китайском языках.[24]
s
Текст, потерявший актуальность. Для фрагментов, удаленных в текущей редакции документа, следует использовать элемент del.[25]
small
Вспомогательные замечания («мелкий шрифт») — уточнения, правовая информация, информация об авторстве, etc. Не приводит к «отмене» действия таких элементов, как em или strong.[26]
sub, sup
Нижний и верхний индексы. Как и в других случаях (например, em), спецификация требует применять эти элементы тогда и только тогда, когда от их использования зависит смысл текста. В частности, элементы могут применяться для оформления математических (совместно с var) и химических формул, а равно индексов переменных, подобно: <p >В формуле выше, <var >R<sub ><var >ρ</var></sub><sub ><var >μ</var></sub><sub ><var >σ</var></sub><sub ><var >ν</var></sub></var> — тензор кривизны пространства-времени.</p>.[27][28]
time
Временная отметка — как частный случай машинночитаемых данных. В случае, когда содержание элемента не соответствует одному из предписываемых HTML5 форматов, временная отметка в таком формате должна быть указана атрибутом datetime. Например: <p >Работа над материалом в Викиучебнике начата <time datetime="2014-12-24" >24 декабря 2014 г.</time></p>.[29]
u
Текст, явно выделенный некоторым неуказанным нетекстовым способом. Данный элемент может быть использован для выделения слов с орфографическими ошибками. В прочих случаях, более уместным может быть использование одного из элементов ряда em, i, b, mark, cite, ruby.[30]
var
Переменная в широком смысле — в математике, программировании, а также как произвольный замещаемый текст.[31]

Примечания

[править]
  1. ↑ Text-level semantics(англ.) HTML5. W3C (2014-10-28). Проверено 2014-12-20 г.
  2. ↑ Phrasing content(англ.) HTML5. W3C (2014-10-28). Проверено 2014-12-19 г.
  3. ↑ The a element(англ.) HTML5. W3C (2014-10-28). Проверено 2014-12-20 г.
  4. ↑ а б The id attribute(англ.) HTML5. W3C (2014-10-28). Проверено 2014-12-19 г.
  5. ↑ The em element(англ.) HTML5. W3C (2014-10-28). Проверено 2014-12-20 г.
  6. ↑ The strong element(англ.) HTML5. W3C (2014-10-28). Проверено 2014-12-20 г.
  7. ↑ а б The i element(англ.) HTML5. W3C (2014-10-28). Проверено 2015-01-29 г.
  8. ↑ а б в The b element(англ.) HTML5. W3C (2014-10-28). Проверено 2015-01-29 г.
  9. ↑ The class attribute(англ.) HTML5. W3C (2014-10-28). Проверено 2014-12-19 г.
  10. ↑ The span element(англ.) HTML5. W3C (2014-10-28). Проверено 2015-01-29 г.
  11. ↑ The abbr element(англ.) HTML5. W3C (2014-10-28). Проверено 2015-02-07 г.
  12. ↑ The bdi element(англ.) HTML5. W3C (2014-10-28). Проверено 2015-02-07 г.
  13. ↑ The bdo element(англ.) HTML5. W3C (2014-10-28). Проверено 2015-02-07 г.
  14. ↑ The cite element(англ.) HTML5. W3C (2014-10-28). Проверено 2015-02-07 г.
  15. ↑ The q element(англ.) HTML5. W3C (2014-10-28). Проверено 2015-02-07 г.
  16. ↑ The code element(англ.) HTML5. W3C (2014-10-28). Проверено 2015-02-07 г.
  17. ↑ The data element(англ.) HTML5. W3C (2014-10-28). Проверено 2015-02-07 г.
  18. ↑ The del element(англ.) HTML5. W3C (2014-10-28). Проверено 2015-02-07 г.
  19. ↑ The ins element(англ.) HTML5. W3C (2014-10-28). Проверено 2015-02-07 г.
  20. ↑ The dfn element(англ.) HTML5. W3C (2014-10-28). Проверено 2015-02-07 г.
  21. ↑ The kbd element(англ.) HTML5. W3C (2014-10-28). Проверено 2015-02-07 г.
  22. ↑ The samp element(англ.) HTML5. W3C (2014-10-28). Проверено 2015-02-07 г.
  23. ↑ The mark element(англ.) HTML5. W3C (2014-10-28). Проверено 2015-02-07 г.
  24. ↑ The ruby element(англ.) HTML5. W3C (2014-10-28). Проверено 2015-02-07 г.
  25. ↑ The s element(англ.) HTML5. W3C (2014-10-28). Проверено 2015-02-07 г.
  26. ↑ The small element(англ.) HTML5. W3C (2014-10-28). Проверено 2015-02-07 г.
  27. ↑ The sub element(англ.) HTML5. W3C (2014-10-28). Проверено 2015-02-07 г.
  28. ↑ The sup element(англ.) HTML5. W3C (2014-10-28). Проверено 2015-02-07 г.
  29. ↑ The time element(англ.) HTML5. W3C (2014-10-28). Проверено 2015-02-07 г.
  30. ↑ The u element(англ.) HTML5. W3C (2014-10-28). Проверено 2015-02-07 г.
  31. ↑ The var element(англ.) HTML5. W3C (2014-10-28). Проверено 2015-02-07 г.

См. также

[править]
Источник — https://ru.wikibooks.org/w/index.php?title=HTML_в_профилях/Ссылки_и_акценты&oldid=163545