В HTML для форматирования текста есть много других элементов, не рассмотренных в статье Основы редактирования текста в HTML. Элементы, описанные в этой статье, не так часто используются, но всё же полезны для понимания (и это всё ещё будет не полный список элементов). Здесь вы узнаете о цитатах, списках описания, компьютерном коде и другом виде текстовых элементов, подстрочном и надстрочном тексте, контактной информации и других типах текста.
В основах HTML-текста мы рассмотрели, как пометить привычные типы списков в HTML, но мы не упоминали о третьем типе списка, с которым вы иногда сталкиваетесь, — списке описания. Цель этих списков состоит в том, чтобы пометить набор элементов и их связанных описаний, таких как термины и определения или вопросы и ответы.
Давайте рассмотрим пример набора терминов и определений:
В списках описания используется иная оболочка, чем в других типах списков — <dl> (от description list); кроме того, каждый термин завёрнут в элемент <dt> (description term — термин для описания) и каждое определение завёрнуто в элемент <dd> (description definition — описание определения).
Закончим разметку нашего примера:
В стилях браузера по умолчанию будут отображаться списки описания с некоторыми отступами от терминов. Стили, определённые на MDN, довольно близки к этому соглашению, но также вносят некоторые изменения:
Драматическая речь, в которой персонаж разговаривает сам с собой, передавая свои ощущения и мысли публике (но не другим персонажам).
Драматическая речь, в которой персонаж передаёт свои мысли публике и некоторым персонажам.
В драме: речь персонажа, при которой делается замечание с юмористическим или драматическим эффектом; чаще всего это чувства, мысли или предпосылки к чему-либо.
Заметьте, что разрешено давать одному элементу несколько описаний:
В драме: речь персонажа, при которой делается замечание с юмористическим или драматическим эффектом; чаще всего это чувства, мысли или предпосылки к чему-либо.
В письменности: отметка, примечание (устар.).
Пришло время попробовать свои силы в списках описания: добавьте элементы в исходный текст в поле Ввод, чтобы он отображался как список описания в поле Вывод. Вы можете попробовать использовать свои собственные термины и описания, если хотите.
Если вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой Сбросить. Если упражнение вызывает у вас затруднения, то нажмите кнопку Показать решение, чтобы увидеть правильный ответ.
HTML также имеет функции, доступные для маркировки цитат; какой элемент вы используете, зависит от того, маркируете ли вы блочную или строчную цитату.
Если часть содержимого уровня блока (будь то абзац, несколько абзацев, список и т. д.) цитируется из другого источника, вы должны обернуть её внутри элемента <blockquote>, чтобы обозначить это, и указать URL-адрес, указывающий на источник цитаты, внутри атрибута cite.
Например, следующая разметка берётся из страницы элемента MDN <blockquote>:
Чтобы превратить её в блочную цитату, мы просто делаем следующее:
Стиль браузера по умолчанию будет отображать это как абзац с отступом, как индикатор того, что это цитата; абзац над цитатой призван продемонстрировать это. MDN делает это, но также добавляет некоторый дополнительный стиль:
HTML-элемент <blockquote> (от англ. Block Quotation) указывает на то, что заключённый в нём текст является развёрнутой цитатой.
Строчные цитаты работают точно так же, за исключением того, что они используют элемент <q> (en-US). Например, следующий кусочек разметки содержит цитату из страницы <q> MDN:
Стиль браузера по умолчанию будет отображать это как обычный текст, заключённый в кавычки для обозначения цитаты, например:
Элемент цитирования — <q> — "предназначен для коротких цитат, не требующих прерывания абзаца".
Содержание атрибута cite выглядит полезным, но, к сожалению, браузерам, программам чтения с экрана и т. д. оно на самом деле мало чем помогает. Невозможно заставить браузер отображать содержимое атрибута cite без написания собственного решения с использованием JavaScript или CSS. Если вы хотите, чтобы источник цитирования был доступен на странице, лучший способ его разметки - поместить элемент <cite> рядом с элементом цитаты (или внутри него). Это действительно будет означать то, что имя источника цитаты — то есть имя книги или имя человека, которое произвело цитату, — будет включено в текст. Нет причин, по которым вы не могли бы связать текст внутри <cite> с источником цитаты:
По умолчанию цитаты стилизованы курсивом. Этот код можно увидеть в нашем примере quotations.html
Время для другого примера активного обучения! В этом примере мы хотели бы, чтобы вы совершили следующие действия:
<blockquote>), который включает атрибут cite.cite.<cite> для каждой ссылки.Источники цитирования, которые вам потребуются:
Если вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой Сбросить. Если упражнение вызывает у вас затруднения, то нажмите кнопку Показать решение, чтобы увидеть правильный ответ.
Другой довольно часто встречающийся элемент, который вы будете часто встречать в Интернете, — это <abbr>, используемый для обёртывания аббревиатур или акронимов и обеспечивающий полную расшифровку сокращения (с помощью атрибута title.)
Давайте рассмотрим несколько примеров:
Они будут выглядеть примерно так (расшифровка появится в подсказке при наведении курсора мыши на сокращение):
Мы используем HTML для структурирования наших веб-документов.
Я думаю, Почт. Грин сделал это на кухне с бензопилой.
Примечание: Существует ещё один элемент <acronym>, который в основном делает то же самое, что и <abbr>, но предназначен специально для акронимов (тип аббревиатур). Это, однако, было излишним, — он не поддерживается в браузерах на том же уровне, что <abbr>, и имеет такую же функциональность, поэтому считается бессмысленным иметь оба. Просто используйте <abbr>.
В рамках этого простого упражнения мы хотели бы, чтобы вы просто указали аббревиатуру. Вы можете использовать наш образец ниже или заменить его на свой собственный.
HTML имеет элемент для разметки контактных данных — <address>. Он просто обёртывает ваши контактные данные, например:
Однако следует помнить, что элемент <address> предназначен для разметки контактных данных человека, который написал HTML-документ, а не любого адреса. Таким образом, написанное выше было бы корректным только в том случае, если бы Крис написал документ, на котором появляется разметка. Обратите внимание, что следующее также подойдёт:
Иногда вам понадобится использовать надстрочный или подстрочный индекс при разметке таких вещей, как даты, химические формулы и математические уравнения, чтобы они имели правильное представление. Элементы <sup> (en-US) и <sub> (en-US) созданы для таких ситуаций.
Приведём пример:
Результат этого кода выглядит следующим образом:
Я просыпаюсь в 635 часов утра.
Химическая формула кофеина: C8H10N4O2.
Если x2 равно 9, x должен равняться 3 или -3.
Существует несколько элементов для маркировки компьютерного кода с использованием HTML:
<code>: Для разметки общих частей компьютерного кода.<pre>: Для сохранения пробелов (как правило, кодовых блоков) — если вы используете отступы или лишние пробелы внутри вашего текста, браузеры будут игнорировать его, и вы не увидите его на вашей отображаемой странице; если вы поместите текст в теги <pre></pre>, то ваши пробелы будут отображаться идентично тому, как вы видите текст в редакторе.<var> (en-US): Для конкретной маркировки имён переменных.<kbd>: Для маркировки ввода с клавиатуры (и других типов).<samp> (en-US): Для маркировки вывода компьютерной программы.Давайте рассмотрим несколько примеров. Вы должны попробовать поиграть с ними (захватите копию нашего файла other-semantics.html):
HTML также содержит элемент <time> для отметки времени и дат в машиночитаемом формате. Например:
Почему это полезно? Ну, есть много разных способов, которыми люди записывают даты. Вышеуказанная дата может быть записана как:
Но эти разные формы не могут быть легко распознаны компьютерами — что, если вы хотите автоматически захватить даты всех событий на странице и вставить их в календарь? Элемент <time> позволяет прикрепить к этой цели однозначное машиночитаемое время / дату.
В приведённом выше базовом примере приведена простая машиносчитываемая дата, но есть много других возможных вариантов, например:
На этом мы подошли к концу нашего изучения семантики текста HTML. Имейте в виду, что то, что вы видели во время этого курса, не является исчерпывающим списком текстовых элементов HTML. Мы попытались охватить основные из них, с которыми вы, скорее всего, столкнётесь в практической деятельности или, по крайней мере, сочтёте их интересными. Чтобы найти больше элементов HTML, вы можете взглянуть на нашу ссылку на Элемент. В следующей статье мы рассмотрим элементы HTML, которые вы будете использовать для структурирования различных частей HTML-документа.