В текст может быть полезно вставить цитаты из известных фраз, использовать сокращения и аббревиатуры, исходный код или разграничить некоторые слова. Давайте рассмотрим наиболее используемые элементы 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> 