Списки
Неупорядоченный список ul
Тег#ul (сокращение от «unordered list»). Используется, когда порядок элементов не важен.
Например, для разметки перечня ссылок в меню, преимуществ товара, ингредиентов в составе продукта.
Непосредственно в теге ul могут находиться только теги li (сокращение от «list item»), которые обозначают элементы или пункты списка:
По умолчанию элементы ul отмечаются маркерами такого же цвета, как цвет текста.
Упорядоченный список ol
Тег#ol (сокращение от «ordered list»).
В этом списке действительно важно, в каком порядке идут элементы. Упорядоченные списки подходят для разметки алгоритмов, инструкций, рецептов, результатов соревнований и так далее.
Пункты упорядоченного списка тоже размечаются с помощью тега li. По умолчанию перед элементами ol ставится их порядковый номер.
У ol может быть несколько атрибутов: start, reversed и type.
- Атрибут start меняет стартовое число нумерации пунктов. Может быть отрицательным.
- Атрибут reversed меняет направление нумерации на противоположный. Этот атрибут не требует значения.
- С помощью атрибута type можно задавать различные типы маркеров: строчные и заглавные латинские буквы или римские цифры.
Список описаний dl, dt, dd
Тег#dl (сокращение от «description list»). Список описаний используется для разметки вопросов-ответов, наименований и определений, категорий и тем.
Он создаётся с помощью трёх тегов:
dl обозначает сам список описаний;
#dt (сокращение от «description term») обозначает термин;
#dd (сокращение от «description definition») обозначает описание или определение.
Теги dt и dd пишутся внутри dl. Каждый список dl может содержать один или несколько терминов и одно или несколько описаний для каждого термина.
По умолчанию браузер добавляет небольшой отступ слева от определений.
Цитаты
Небольшие цитаты q
Тег#q (сокращение от «quote»). Предназначен для выделения цитат внутри предложения.
Текст внутри тега браузер автоматически обрамляет кавычками, поэтому добавлять кавычки вручную не нужно.
Источник цитат cite
Тег#cite. В нём можно указывать помимо адреса источника цитаты ещё и название произведения, откуда цитируется текст, а также имя автора или организации, чей текст цитируется. Содержимое cite в браузере выделяется курсивом.
Тег cite может быть самостоятельным и не привязываться к цитате:
Длинные цитаты blockquote
Тег#blockquote. Предназначен для выделения длинных цитат, которые могут состоять из нескольких абзацев. Тег выделяет цитату не как фрагмент текста в предложении, а как отдельный блок текста с отступами.
В браузере контенту тега blockquote обычно добавляется дополнительный отступ слева и справа.
Текст
Преформатированный текст — pre
Тег#pre (сокращение от «preformatted text»). Используется для отображения примеров кода, также применяется для отображения картинок ASCII Art. Браузер сохраняет и отображает все пробелы и переносы, которые есть внутри тега pre.
Тег code
Используется для обозначения фрагментов кода.
С его помощью размечается любой фрагмент текста, который распознается компьютером: код программы, разметки, название файла и так далее. Обычно браузеры отображают текст в теге code моноширинным шрифтом.
Тег ul — это неупорядоченный список.
Тег#code можно вкладывать внутрь тега pre
Разметка фрагментов текста
Символы-мнемоники &
Это особые строки, которые начинаются с амперсанда (&) и заканчиваются точкой с запятой (;). Например, знак меньше на страницу можно вставить мнемоникой < (less than), а знак больше мнемоникой > (greater than):
Некоторые символы в HTML зарезервированы, то есть браузер считает их HTML-кодом.
Например, любой текст после знака меньше (<) браузер будет пытаться интерпретировать как тег и на странице не отобразит. Чтобы использовать специальные символы в тексте страницы как обычные символы их нужно заменить на символы-мнемоники.
<ul>
</ul>
Перенос строк br
Тег#br (сокращение от «line break»). Применяется, чтобы вставить в текст перенос строки, не создавая при этом абзац. Например, при разметке стихов или текстов песен.
Верхний и нижний индексы sup, sub
Теги#sup и#sub. Названия образованы от слов «superscript» и «subscript».
Тег sup отображает текст в виде верхнего индекса, а sub отображает текст в виде нижнего индекса.
Их используют для указания единиц измерения или для написания простых формул: 20м2 H2O X3+X2=1
Для создания более сложных формул, эти теги можно использовать внутри друг друга.
Дата и время time
Тег#time. С помощью него можно описывать даты одновременно и для человека, и для машины. Для указания даты в машиночитаемом формате ISO 8601 существует атрибут datetime и выглядит так:
<time datetime="2016-11-18T09:54">09:54 утра</time>
<time datetime="2015-11-18">18 ноября 2015</time>
<time datetime="2018-09-23">в прошлую субботу</time>
<time datetime="2017-04-20">вчера</time>
Браузер отображает только содержимое тега, а содержимое datetime не отображается.
Акцентирование внимания em, i
Теги#em и#i. Названия образованы от слов «emphasis» и «italic». Предназначены для акцентирования внимания на слово или фразу. Визуально оба тега одинаковы, они выделяют текст курсивом.
Тег em определяет текст, на который сделан особый акцент, меняющий смысл предложения.
Тег i применяется для обозначения текста, который отличается от окружающего текста, но не является более важным.
Например, в i можно заключать названия, термины, иностранные слова. Также в этот тег можно обернуть мысли героя.
В речи такой текст обычно выделяется интонационно:
Выделение и придание важности strong, b
Теги#strong и#b. Название b образовано от слова «bold». Отображаются оба тега одинаково, они выделяют текст жирным.
Тег strong указывает на важность отмеченного текста. Он может использоваться для выделения предупреждений или части документа, которую пользователь должен увидеть раньше остального. При этом обозначение части текста тегом strong не должно изменять смысла предложения.
<strong>Внимание!</strong> Это место опасно. <strong>Вы можете упасть в пропасть</strong>, если подойдёте близко к краю.
Тег b предназначен для выделения текста с целью привлечения к нему внимания, но без придания ему особой важности. Использовать его нужно только в случае, когда остальные теги выделения не подходят. Типичный пример — выделение вводного предложения статьи.
Вы входите в небольшую комнату. Ваш <b>меч</b> загорается ярче. <b>Крыса</b> стремительно пробегает вдоль стены.
Описание изменений del, ins
Теги#del и#ins. Названия тегов образованы от слов «delete» и «insert». Предназначены для описания изменений в документе.
Тег del выделяет текст, который был удалён в новой версии документа. В браузере этот текст перечёркивается.
Тег ins выделяет текст, который был добавлен в новой версии документа. В браузере этот текст подчёркивается.
Разделение контента div, span
Это «чистые» элементы, и обычно они отлично подходят в качестве обёртки для стилизации или группировки других элементов. Использовать эти теги рекомендуется в тех случаях, если более подходящих семантических тегов не нашлось.
Тег div используется для группировки структурных элементов или в качестве вспомогательных контейнеров для создания нужной раскладки.
Тег span используется для группировки текстовых элементов, выделения отдельных слов или фраз внутри абзацев, пунктов списка и так далее.