Как размечать текст

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

  • Разделы:
    • <address>…</address> — Адреса Подробнее
    • <article>…</article> — Автономная композиция для многократного использования Подробнее
    • <aside>…</aside> — Косвенное содержимое (врезки) Подробнее
    • <footer>…</footer> — Нижний колонтитул страницы, раздела или статьи Подробнее
    • <h1>…</h1> — <h6>…</h6> — 6 уровней заголовков Подробнее
    • <header>…</header> — Верхний колонтитул страницы, раздела или статьи Подробнее
    • <nav>…</nav> — Навигационные ссылки Подробнее
    • <section>…</section> — Тематическая группа контента Подробнее
  • Группировка контента:
    • <blockquote>…</blockquote> — Длинные блочные цитаты Подробнее
    • <div>…</div> — Общий раздел Подробнее
    • <figure>…</figure> — Связанное с контентом изображение или ресурс Подробнее
    • <figcaption>…</figcaption> — Подпись под рисунком Подробнее
    • <hr> — Горизонтальная линия (тематическое разделение на уровне абзаца) Подробнее
    • <p>…</p> — Абзац Подробнее
    • <pre>…</pre> — Предварительно отформатированный текст Подробнее
  • Списки:
  • Встроенные элементы:
    • <abbr>…</abbr> — Аббревиатура Подробнее
    • <b>…</b> — Начертание полужирным шрифтом Подробнее
    • <br> — Перевод строки Подробнее
    • <bdo>…</bdo> — Четко указывает направление текста, слева направо ltr или справа налево rtl Подробнее
    • <cite>…</cite> — Цитата; ссылка на заголовок работы, например, на название книги Подробнее
    • <code>…</code> — Пример кода программы Подробнее
    • <del>…</del> — Удаленный текст; указывает редактирование, выполненное для документа Подробнее
    • <dfn>…</dfn> — Термин определения или первое появление термина Подробнее
    • <em>…</em> — Выделенный текст Подробнее
    • <i>…</i> — Начертание курсивом Подробнее
    • <ins>…</ins> — Вставленный текст; указывает вставку в документе Подробнее
    • <mark>…</mark> — Текст, значимый в контексте Подробнее
    • <q>…</q> — Короткое встроенное цитирование Подробнее
    • <ruby>…</ruby> — Раздел, содержащий текст фуриганы Подробнее
    • <rp>…</rp> — Скобки в тексте фуриганы Подробнее
    • <rt>…</rt> — Текст фуриганы Подробнее
    • <s>…</s> — Зачеркнутый текст Подробнее
    • <small>…</small> — Мелкий шрифт, например, в сообщениях о защите авторских прав или уведомлении (отображается шрифтом меньшего размера) Подробнее
    • <span>…</span> — Общий фразовый контент Подробнее
    • <strong>…</strong> — Выделенный текст, которому придают особое значение Подробнее
    • <sub>…</sub> — Нижний индекс Подробнее
    • <sup>…</sup> — Верхний индекс Подробнее
    • <time>…</time> — Машиночитаемое время Подробнее
    • <u>…</u> — Подчеркнутый текст Подробнее
    • <wbr>…</wbr> — Перенос слова Подробнее

В элемент address заключается информация при помощи которой можно связаться с автором, например сайт автора, вот так:

Назад


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

Назад


В элемент aside заключается контент который непрямо связан с основным контентом статьи. Например в нём можно указать справочную информацию или цитату.

Назад



В элементы h1 — h6 заключаются заголовки статей, врезок и т.д.

HTML Вывод
<h1>Заголовок 1-го уровня</h1>

Заголовок 1-го уровня

<h2>Заголовок 2-го уровня</h2>

Заголовок 2-го уровня

<h3>Заголовок 3-го уровня</h3>

Заголовок 3-го уровня

<h4>Заголовок 4-го уровня</h4>

Заголовок 4-го уровня

<h5>Заголовок 5-го уровня</h5>
Заголовок 5-го уровня
<h6>Заголовок 6-го уровня</h6>
Заголовок 6-го уровня

Назад




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

Назад


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

Назад


В элемент div заключается контент который нельзя заключить в другие элементы, потому как они по смыслу не подходят для этого контента, то есть не соблюдается семантика. Этот элемент блочный, поэтому он может связывать группу элементов, образуя единую смысловую единицу. Присваивая ему атрибут id или class нужно указать как следует воспринимать группу элементов, заключенную в этот контейнер. Ещё это позволяет применять правила стилей к элементам внутри div иначе, нежели к остальным, таким же, элементам на странице. В элемент div могут вкладываться другие элементы div. Рассмотрим пример в котором группируются элементы, которые образуют единую смысловую единицу.

Назад


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

Назад


В элемент figcaption заключается подпись к контенту, который заключается в элемент figure.

Назад


Элемент hr вставляют когда хотят показать, что старая мысль или тема завершена и начинается новая. Этот элемент одиночный (имеет только открывающий тег).

Назад


p — это элемент абзаца, является блочным элементом, преимущественно в него заключается текст, также в него могут заключаться изображения и другие встроенные элементы. Абзац не может содержать блочные элементы, такие как заголовки, списки и т.д.

Назад


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

Назад


Элемент dl представляет собой список определений, в него заключаются такие элементы как dt — имя термина, и dd — описание, определение термина.

Назад


Элемент ul представляет собой маркированный список. Элемент ol представляет собой нумерованный список. li — этот элемент является пунктом списка.

HTML Вывод
<p>Купить в магазине:</p>
<ul>
<li>Хлеб</li>
<li>Батон</li>
<li>Соль</li>
</ul>

Купить в магазине:

  • Хлеб
  • Батон
  • Соль
<p>Купить в магазине:</p>
<ol>
<li>Хлеб</li>
<li>Батон</li>
<li>Соль</li>
</ol>

Купить в магазине:

  1. Хлеб
  2. Батон
  3. Соль

Назад


В элемент abbr заключаются сокращения, аббревиатуры или акронимы. Сокращения — это слова с точкой, например, ул. — сокращение от слова улица. Аббревиатуры — это сокращённая форма слов по первым буквам, например, ЗОЖЗдоровый Образ Жизни. Акронимы — это сокращённая форма слов по первым звукам, например, КомсомолКоммунистический союз молодежи. Указывать расшифровку сокращения, аббревиатуры или акронима нужно при помощи атрибута title, тогда при наведении указателя мыши всплывёт подсказка.

Назад


В элемент b заключаются ключевые слова или текст привлекающий внимание (полужирный).

Назад


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

Назад


При помощи элемента bdo можно вставить фразу текста, которая читается справа налево в основной текст, который читается слева направо и наоборот. Выполняется это с помощью атрибута dir и его значений: rtl(для текста справа налево (для неевропейских языков, например, иврит)) и lrt(для текста слева направо).

<bdo dir="rtl">שלום</bdo>

Назад


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

Назад


В элемент code заключается пример кода.

Назад


В элементы ins и del помещаются вставленный и удалённый текст соответственно. Могут содержать как встроенные, так и блочные элементы. В атрибуте title указывается текст, который будет выведен при наведении курсора мыши.

HTML Вывод
<p>Город <del title="устаревшее название">Ленинград</del> <ins>Санкт-Петербург</ins><p>

Город Ленинград Санкт-Петербург

Назад


В элемент dfn заключается определение слова.

Назад


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

Назад


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

Назад


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

Назад


В элемент q заключаются короткие цитаты. Кавычки вокруг элементов q добавляются автоматически.

Назад


Элементы ruby, rp, rt используются для добавления фуриган к иероглифам. Фуриганы — это текст над иероглифом, содержащий подсказки по произношению и переводу. В элемент ruby заключается элемент rt, который содержит текст подсказки и элемент rp, который в случае когда браузер не поддерживает элемент ruby, отобразит текст в скобках рядом с иероглифом. В случае если браузер поддерживает фуриганы, элемент rp проигнорируется.

HTML Вывод
<ruby>
Иероглиф<rp>(</rp><rt>подсказка</rt><rp>)</rp>
</ruby>

Иероглиф(подсказка)

Назад


В элемент s помещается зачеркнутый текст.

Назад


В элемент small заключается текст маленького размера, так называемый юридический текст.

Назад


Элемент span идентичен элементу div, отличается только тем что он встроенный, а не блочный.

Назад


В элемент strong заключается текст, имеющий особое значение, такой текст очень важный.

Назад


Элемент sub представляет собой нижний индекс, а элемент sup верхний.

HTML Вывод

<p> O<sub>2</sub> </p> 

<p> a<sup>2</sup> </p>

O2

a2

Назад


В элемент time заключается дата и время, которые понятны людям. В атрибут datetime помещается дата и время, которые понятны компьютерам. Синтаксис атрибута следующий: Год, месяц, день, буква Т, обозначающая время в часах, минутах, секундах (не обязательно), миллисекундах (не обязательно). Затем ставим часовой пояс и обозначаем на сколько время отстает (-) или опережает (+) Всемирное Координированное Время (UTC). +03:00 — это Московское время, обгоняющее всемирное координированное время на 3 часа.

Назад


В элемент u заключается подчеркнутый текст.

Назад


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

Назад

Поделиться