Списки

Неупорядоченный список

Тег <ul> (сокращение от «unordered list»). Используется, когда порядок элементов не важен. Например, для разметки перечня ссылок в меню, преимуществ товара, ингредиентов в составе продукта.

Непосредственно в теге <ul> могут находиться только теги <li> (сокращение от «list item»), которые обозначают элементы или пункты списка:

<ul>
  <li>Я пункт списка, могу быть на любом месте</li>
  <li>И я пункт списка, и мне тоже не важен порядок</li>
</ul>

По умолчанию элементы <ul> отмечаются маркерами такого же цвета, как цвет текста.

Упорядоченный список

Тег <ol> (сокращение от «ordered list»). В этом списке действительно важно, в каком порядке идут элементы. Упорядоченные списки подходят для разметки алгоритмов, инструкций, рецептов, результатов соревнований и так далее.

Пункты упорядоченного списка тоже размечаются с помощью тега <li>. Пример кода:

<ol>
  <li>Я первый и только первый пункт</li>
  <li>Я не я, если я не второй пункт</li>
  <li>Третий после стольких лет? Всегда!</li>
</ol>

По умолчанию перед элементами <ol> ставится их порядковый номер. У <ol> может быть несколько атрибутов: start, reversed и type.

Атрибут start меняет стартовое число нумерации пунктов. Может быть отрицательным.

Атрибут reversed меняет направление нумерации на противоположный. Этот атрибут не требует значения.

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

Список описаний

Тег <dl> (сокращение от «description list»). Список описаний используется для разметки вопросов-ответов, наименований и определений, категорий и тем. Он создаётся с помощью трёх тегов:

• <dl> обозначает сам список описаний;
• <dt> (сокращение от «description term») обозначает термин;
• <dd> (сокращение от «description definition») обозначает описание или определение.

Теги <dt> и <dd> пишутся внутри <dl>. Каждый список <dl> может содержать один или несколько терминов и одно или несколько описаний для каждого термина. Пример кода:

<dl>
  <dt>HTML</dt>
  <dd>Язык гипертекстовой разметки</dd>
  <dt>CSS</dt>
  <dd>Каскадные таблицы стилей</dd>
  <dd>Язык для оформления HTML-документов</dd>
</dl>

По умолчанию браузер добавляет небольшой отступ слева от определений.

Преформатированный текст и код

Тег <pre> (сокращение от «preformatted text»). Используется для отображения примеров кода, также применяется для отображения картинок ASCII Art. Браузер сохраняет и отображает все пробелы и переносы, которые есть внутри тега <pre>.

<pre>Пример
        преформатированного
        текста     с сохранёнными пробелами
                     и переносами строк</pre>

Тег <code>. Используется для обозначения фрагментов кода.

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

Тег <code>ul</code> — это неупорядоченный список.

Тег <code> можно вкладывать внутрь тега <pre>.

Цитаты

Небольшие цитаты

Тег <q> (сокращение от «quote»). Предназначен для выделения цитат внутри предложения. Текст внутри тега браузер автоматически обрамляет кавычками, поэтому добавлять кавычки вручную не нужно.

Источник цитат

Тег <cite>. В нём можно указывать помимо адреса источника цитаты ещё и название произведения, откуда цитируется текст, а также имя автора или организации, чей текст цитируется. Содержимое <cite> в браузере выделяется курсивом.

<p>По словам <cite>Чарльза Буковски</cite> — <q>Интеллектуал о простой вещи говорит сложно — художник сложную вещь описывает простыми словами.</q></p>

Тег <cite> может быть самостоятельным и не привязываться к цитате:

<p>Какой доктор ваш любимый (в сериале <cite>Доктор Кто</cite>)?</p>

Длинные цитаты

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

<blockquote>
  <p>Ум ценится дорого, когда дешевеет сила.</p>
  <cite>Джейсон Стэтхэм</cite>
</blockquote>

В браузере контенту тега <blockquote> обычно добавляется дополнительный отступ слева и справа.

Разметка фрагментов текста

Символы-мнемоники

Это особые строки, которые начинаются с амперсанда (&) и заканчиваются точкой с запятой (;). Например, знак меньше на страницу можно вставить мнемоникой < (less than), а знак больше мнемоникой > (greater than):

Некоторые символы в HTML зарезервированы, то есть браузер считает их HTML-кодом. Например, любой текст после знака меньше (<) браузер будет пытаться интерпретировать как тег и на странице не отобразит. Чтобы использовать специальные символы в тексте страницы как обычные символы их нужно заменить на символы-мнемоники.

<ul>
</ul>

Полный список мнемоник представлен на специальной странице.

Перенос строк

Тег <br> (сокращение от «line break»). Применяется, чтобы вставить в текст перенос строки, не создавая при этом абзац. Например, при разметке стихов или текстов песен.

Верхний и нижний индексы

Теги <sup> и <sub>. Названия образованы от слов «superscript» и «subscript».

Тег <sup> отображает текст в виде верхнего индекса, а <sub> отображает текст в виде нижнего индекса.

Их используют для указания единиц измерения или для написания простых формул:

20м<sup>2</sup>
H<sub>2</sub>O
X<sup>3</sup>+X<sup>2</sup>=1

Для создания более сложных формул, эти теги можно использовать внутри друг друга.

Дата и время

Тег <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>. Названия образованы от слов «emphasis» и «italic». Предназначены для акцентирования внимания на слово или фразу. Визуально оба тега одинаковы, они выделяют текст курсивом.

Тег <em> определяет текст, на который сделан особый акцент, меняющий смысл предложения.

Я <em>просто обожаю</em> холодные зимние дни!

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

Он взглянул в окно и подумал — <i>такого просто не может быть</i>!

Выделение и придание важности

Теги <strong> и <b>. Название <b> образовано от слова «bold». Отображаются оба тега одинаково, они выделяют текст жирным.

Тег <strong> указывает на важность отмеченного текста. Он может использоваться для выделения предупреждений или части документа, которую пользователь должен увидеть раньше остального. При этом обозначение части текста тегом <strong> не должно изменять смысла предложения.

<strong>Внимание!</strong> Это место опасно. <strong>Вы можете упасть в пропасть</strong>, если подойдёте близко к краю.

Тег <b> предназначен для выделения текста с целью привлечения к нему внимания, но без придания ему особой важности. Использовать его нужно только в случае, когда остальные теги выделения не подходят. Типичный пример — выделение вводного предложения статьи.

Вы входите в небольшую комнату. Ваш <b>меч</b> загорается ярче. <b>Крыса</b> стремительно пробегает вдоль стены.

Описание изменений

Теги <del> и <ins>. Названия тегов образованы от слов «delete» и «insert». Предназначены для описания изменений в документе.

Тег <del> выделяет текст, который был удалён в новой версии документа. В браузере этот текст перечёркивается.

Тег <ins> выделяет текст, который был добавлен в новой версии документа. В браузере этот текст подчёркивается.

<ul>
  <li>Почистить посудомоечную машину</li>
  <li><del datetime="2009-10-11T01:25-07:00">Погулять</del></li>
  <li><del datetime="2009-10-10T23:38-07:00">Поспать</del></li>
  <li><ins>Купить принтер</ins></li>
</ul>

Разделение контента

Теги <div> и <span>. Это «чистые» элементы, и обычно они отлично подходят в качестве обёртки для стилизации или группировки других элементов. Использовать эти теги рекомендуется в тех случаях, если более подходящих семантических тегов не нашлось.

Тег <div> используется для группировки структурных элементов или в качестве вспомогательных контейнеров для создания нужной раскладки.

Тег <span> используется для группировки текстовых элементов, выделения отдельных слов или фраз внутри абзацев, пунктов списка и так далее.

<article>
  <div class="highlight">
    <p>…</p>
    <p>…</p>
  </div>
  <p>Текст, в котором <span>выделена фраза</span></p>
</article>

Пример