Основы работы с текстом¶

Как форматировать текст с помощью HTML.

Подобно тому, как ваш текстовый редактор предоставляет заголовки <h1> — <h6>, а также множество способов осмысленного и наглядного форматирования фрагментов текста, HTML предоставляет очень похожий набор семантических и несемантических элементов для осмысления прозы.

В этом разделе рассматриваются основные способы разметки текста, или его основы. Затем мы обсудим атрибуты, а затем рассмотрим дополнительные способы разметки текста, такие как списки, таблицы и формы.

Заголовки, пересмотр¶

Существует шесть элементов заголовков разделов, <h1>, <h2>, <h3>, <h4>, <h5> и <h6>, причем <h1> является наиболее важным, а <h6> — наименее. В течение многих лет разработчикам говорили, что заголовки используются браузерами для выделения структуры документов. Изначально это было целью, но браузеры так и не реализовали функции структурирования. Однако пользователи программ чтения с экрана используют заголовки в качестве стратегии изучения содержимого страницы, перемещаясь по заголовкам с помощью клавиши h. Поэтому обеспечение уровней заголовков так же, как и структурирование документа, делает ваш контент доступным и по-прежнему очень приветствуется.

По умолчанию браузеры стилизуют <h1> самым большим, <h2> — чуть меньшим, причем каждый последующий уровень заголовка по умолчанию становится меньше. Интересно, что браузеры по умолчанию также уменьшают размер шрифта <h1> в зависимости от количества элементов <article>, <aside>, <nav> или <section>, в которые он вложен.

Некоторые таблицы стилей пользовательских агентов включают следующие или аналогичные селекторы для стилизации вложенных элементов <h1> так, как будто они относятся к менее важному уровню:

1
2
3
4
5
6
7
8

h2,
:is(article, aside, nav, section) h1 {
}
h3,
:is(article, aside, nav, section)
    :is(article, aside, nav, section)
    h1 {
}

Однако модель объектов доступности (Accessibility Object Model, или AOM) все равно корректно сообщает уровень элемента, в данном случае "заголовок, уровень 1". Обратите внимание, что браузер не делает этого для других уровней заголовков. Тем не менее, не стоит использовать стилизацию браузера на основе уровня заголовка. Даже если браузеры не поддерживают выделение, делайте вид, что поддерживают; оформляйте заголовки контента так, как будто они поддерживают выделение. Это сделает ваш контент понятным для поисковых систем, устройств чтения с экрана и будущих разработчиков (которыми вполне можете оказаться и вы).

За пределами заголовков большинство структурированных текстов состоит из серии абзацев. В HTML абзацы выделяются тегом <p>; закрывающий тег необязателен, но всегда рекомендуется.

Раздел #about имеет заголовок и несколько абзацев:

Этот раздел не является ориентиром, так как не имеет доступного имени. Чтобы превратить его в region, который является ролью landmark, можно использовать aria-labelledby для указания доступного имени:

1
2
3

<section id="about" aria-labelledby="about_heading">
    <h2 id="about_heading">What you'll learn</h2>
</section>

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

Цитаты и цитирование¶

При разметке статьи или записи в блоге вы можете захотеть включить цитату или выдержку, с видимым цитированием или без него. Для этих трех компонентов существуют элементы: <blockquote>, <q> и <cite> для видимого цитирования, или атрибут cite для предоставления дополнительной информации для поиска.

Раздел #feedback содержит заголовок и три отзыва; эти отзывы представляют собой блочные цитаты, некоторые из которых содержат кавычки, за которыми следует абзац, содержащий цитату. Если опустить третий отзыв для экономии места, то разметка выглядит следующим образом:

Информация об авторе цитаты, или цитата, не является частью цитаты и, следовательно, не входит в <blockquote>, а располагается после цитаты. Хотя это и цитаты в обычном понимании этого термина, они не являются ссылками на конкретный ресурс, поэтому заключены в элемент абзаца <p>.

Цитата располагается в трех строках, включая имя автора, его предыдущую роль и профессиональные устремления. Разрыв строки <br> создает разрыв строки в блоке текста. Он может использоваться в физических адресах, в стихах и в блоках подписей. Разрыв строки не следует использовать в качестве возврата каретки для разделения абзацев. Вместо этого следует закрыть предыдущий абзац и открыть новый. Использование абзацев для абзацев не только хорошо для доступности, но и позволяет использовать стилистику. Элемент <br> — это просто разрыв строки; на него влияет очень мало свойств CSS.

Хотя мы представили информацию о цитировании в абзаце после каждой блок-цитаты, приведенные ранее цитаты закодированы таким образом, потому что они не были получены из внешнего источника. Если бы они были получены из внешнего источника, на него можно (нужно?) было бы сослаться.

Если обзор был взят с обзорного сайта, из книги или другой работы, то для названия источника может использоваться элемент <cite>. Содержимым <cite> может быть название книги, название сайта или телепередачи, или даже имя компьютерной программы. Инкапсуляция <cite> может использоваться независимо от того, упоминается ли источник вскользь, цитируется ли он или на него делается ссылка. Содержимым <cite> является произведение, а не автор.

Если цитата из Блендана Смута была взята из ее автономного журнала, то блок-цитату можно написать следующим образом:

Элемент цитирования <cite> не имеет неявной роли и должен получать свое доступное имя из своего содержимого; не следует включать в него aria-label.

Для того чтобы отдать должное, когда нет возможности сделать содержимое видимым, существует атрибут cite, который принимает в качестве значения URL-адрес исходного документа или сообщения для цитируемой информации. Этот атрибут действителен как для <q>, так и для <blockquote>. Хотя это и URL, он является машиночитаемым, но не видимым для читателя:

Если закрывающий тег </p> является необязательным (но всегда рекомендуется), то закрывающий тег </blockquote> всегда обязателен.

Большинство браузеров добавляют отступы как к строчным направлениям <blockquote>, так и к курсивному содержанию <cite>; это можно контролировать с помощью CSS. Элемент <blockquote> не добавляет кавычек, но они могут быть добавлены с помощью CSS-генерируемого содержимого. Элемент <q> по умолчанию добавляет кавычки, используя соответствующие языку кавычки.

В разделе #teachers HAL цитирует слова: "I'm sorry Dave, but I'm afraid I can't do that.". Код для этого, на английском и французском языках, таков:

Встроенный элемент кавычек <q> добавляет кавычки, соответствующие языку. Стили, используемые по умолчанию в пользовательском агенте, включают генерируемое содержимое открытых и закрытых кавычек:

1
2
3
4
5
6

q::before {
    content: open-quote;
}
q::after {
    content: close-quote;
}

Атрибут lang включен для того, чтобы браузер знал, что, хотя основной язык страницы определен как английский в открывающем теге <html lang="en-US">, данный абзац текста написан на другом языке. Это помогает голосовым системам управления, таким как Siri, Alexa и voiceOver, использовать французское произношение. Кроме того, он сообщает браузеру, какой тип кавычек следует отображать.

Подобно <blockquote>, элемент <q> поддерживает атрибут cite.

Сущности HTML¶

Вы, возможно, обратили внимание на экранирующую последовательность или "сущность". Поскольку в HTML используется символ <, его необходимо экранировать, используя либо <, либо менее легко запоминающуюся кодировку <. В HTML существует четыре зарезервированных сущности: <, >, & и ". Их символьные ссылки — <, >, & и " соответственно.

Еще несколько часто используемых символов: © для обозначения авторского права (©), ™ для обозначения товарного знака (™) и   для обозначения неразрывного пробела. Неразрывные пробелы полезны в тех случаях, когда необходимо включить пробел между двумя символами или словами, не допуская при этом разрыва строки. Существует более 2 000 именных ссылок на символы. Но при необходимости каждый символ, включая emojis, имеет кодированный эквивалент, начинающийся с &#.

Если вы посмотрите на обзор семинара ToastyMcToastface (не включенный в приведенный выше пример кода), то там есть несколько необычных текстовых символов:

1
2
3
4
5
6
7

<blockquote>
    Learning with Hal and Eve exceeded all of my wildest
    fantasies. All they did was stick a USB in. They
    promised that it was a brand new USB, so we know there
    were no viruses on it. The Russians had nothing to do
    with it. This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳̯̮͇
</blockquote>

Последнее предложение в этой цитате можно записать и так:

1
2
3
4
5
6
7
8
9

This has
no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙
͍̱̫̜̟g̢̣ͅ
̗̰͓̲̞̀t͙̀o̟
̖͖̹̕
͓̼͎̝͖̭dó̪̠͕̜
͍̱
͎͚̯̟́w̮̲̹͕͈̟͞ìth̢
̰̳ ̯̮͇

В этом коде есть несколько неэкранированных символов и несколько ссылок на именованные символы. Поскольку кодировка UTF-8, последние несколько символов в блочной цитате не требуют экранирования, как в данном примере. Необходимо экранировать только те символы, которые не поддерживаются кодировкой. При необходимости существует множество инструментов, позволяющих экранировать различные символы, или можно просто включить <meta charset="UTF-8"> в <head>.

Даже если вы указали кодировку UTF-8, вам все равно придется экранировать <, если вы хотите вывести этот символ на экран. Обычно не требуется включать именованные ссылки на символы >, " или &; но если вы хотите написать учебник по сущностям HTML, то вам придется писать <, когда вы будете учить кого-то, как кодировать <. 😀

О, и этот смайлик-эмодзи — 😀, но этот документ объявлен как UTF-8, поэтому он не экранируется.

Источник¶

• Text basics

Комментарии