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

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

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

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

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

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

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

/* Legacy UA stylesheet behavior (now removed from browsers and the HTML spec) */
h2, :is(article, aside, nav, section) h1 {}
h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}

Однако модель доступности объектов (AOM) и программы чтения с экрана никогда не изменяли уровни заголовков в зависимости от вложенности; вложенный <h1> всегда отображался как «заголовок, уровень 1». Это создавало несоответствие, при котором вложенные заголовки визуально казались меньше, оставаясь при этом заголовками верхнего уровня для вспомогательных технологий.

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

Не полагайтесь на вложенность элементов <h1> внутрь элементов разделов для визуального оформления или структурной иерархии. Всегда размечайте свой контент, используя последовательные заголовки ( <h1> до <h6> ) в соответствии со структурой документа. Это гарантирует, что ваш контент будет понятен и доступен для поисковых систем, программ чтения с экрана и будущих разработчиков.

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

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

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

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

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

Цитаты и ссылки

При разметке статьи или записи в блоге может потребоваться включить цитату или выноску, с видимой ссылкой или без неё. Для этих трёх компонентов существуют элементы: <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: «Мне очень жаль». «Но боюсь, я не могу этого сделать». Код для этого на английском и французском языках выглядит так:

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

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

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

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

HTML-сущности

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

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

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

<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>

Последнее предложение в этом фрагменте цитаты также можно записать следующим образом:

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

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

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

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

Проверьте свое понимание

Проверьте свои знания текста в формате HTML.