Конспект «Разметка текста»

Списки

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

Тег <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>

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

HTML: Язык гипертекстовой разметки
CSS: Каскадные таблицы стилей; Язык для оформления HTML-документов

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

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

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

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

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

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

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

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

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

&lt;ul&gt;
&lt;/ul&gt;

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

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

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

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

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

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

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

20м²
H₂O
X³+X²=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 не отображается.

Акцентирование внимания

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

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

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

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

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

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

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

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

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

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

Вы входите в небольшую комнату. Ваш <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> и . Это «чистые» элементы, и обычно они отлично подходят в качестве обёртки для стилизации или группировки других элементов. Использовать эти теги рекомендуется в тех случаях, если более подходящих семантических тегов не нашлось.

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

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

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

Продолжить