Цитаты, аббревиатуры и другие элементы для текста

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

Цитаты

BLOCKQUOTE

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

<blockquote>
  <p>пример</p>
  <cite>просто текст</cite>
</blockquote>

Это элемент типа блока, и в базовом представлении браузеров блок отделен от остального текста левым и правым полем.

ЦитатаНа практике этот тег часто используется (ненадлежащим образом) для определения примечаний в тексте.

cite

тег <cite> используется для представления имя гениального произведения , такие как название книги, фильма или песни , из которой является цитата, или даже имя автора или персонажа кто придумал предложение. Это встроенный элемент, который выделен курсивом.

Q

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

Сокращения и аббревиатуры

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

abbr

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

Мы можем добавить длинную версию или определение аббревиатуры благодаря атрибуту title .

'<abbr title="HyperText Markup Language">HTML</abbr>

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

Когда речь идет не о сокращении, а о том, чтобы дать определение слова, например, технического слова, мы можем использовать <dfn>

Базовое представление аналогично представлению, abbr а также в этом случае предоставляется всплывающая подсказка, которая содержит пояснения.

sup и sub

Мы используем теги <sup> для верхнего и <sub> для нижнего индекса. Они оба являются встроенными элементами, и представление по умолчанию в браузерах — это то, что мы ожидаем, небольшого размера и размещенного выше или ниже в зависимости от того, является ли это sup или sub.

Если мы хотим представить переменную, известный «х» школы мы можем использовать тег <var>:

1 м<sup>2</sup>
<br><br>
<var>x<sub>i</sub></var>

КВ М

Код и предварительно отформатированный текст

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

pre

Внутри тега <pre> мы можем писать текстовые отрывки, которые следуют тому же форматированию, которое мы установили в редакторе, «предварительно отформатированный» текст. Другими словами, если внутри тега <pre>и в редакторе мы перейдем наверх или вставим много пробелов между одним словом и другим, мы заставим браузер сделать то же самое.

code

Чтобы вернуться к вопросам, более тесно связанным с представлением кода, мы можем указать тип содержимого тега pre благодаря вставке других тегов, которые определяют семантику текста.

Давайте рассмотрим простой пример небольшого скрипта цикла от 0 до 4:

<pre>
<code>
for (i=0;i<5;i++) {
  console.log("i = "+i);
}
</code>
</pre>

code

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *