Использование кавычек в HTML. Как задать их с помощью тега и спецсимволов?

использование кавычек в html. как задать их  с помощью тега и спецсимволов?

Роль кавычек в разметке документа

Мы используем кавычки постоянно, когда пишем электронные письма или составляем документы на работе. Мало кто задумывается о том, почему же они бывают разными: верхние двойные, верхние одинарные, наклонные, кавычки «ёлочки» и т.д.

Дело в том, что для каждого национального языка правила использования кавычек могут быть разными. В русском языке традиционными считаются кавычки ёлочки «», а для англоязычных языков и их диалектов верхние двойные ““. Одинарные используются для того, чтобы была возможность добавить кавычки внутри других кавычек.

Заметка
Вы можете задаться вопросом, а как эта тема раскрывается в предметной области HTML-разметки? Мы просто пишем текст, расставляя в нем кавычки и на этом все. Совершенно верно, но в HTML есть специальный элемент, с помощью которого можно выделить участок текста, и он не просто будет обрамлен в кавычки, но и приобретёт семантическую ценность[1].

Расстановка обычных кавычек

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

Специальный символ — применяется для вывода на экран символов, не присутствующих в раскладке клавиатуры. Это управляющая конструкция состоит из амперсанда «&», следующего за ним кода символа, и заканчивающаяся точкой с запятой «;». При выводе в браузер конструкция будет заменена всего на один символ.

Коды специальных символов кавычек в HTML-разметке:

  • ‘ - Левая одиночная
  • ’ - Правая одиночная
  • ‚ - Нижняя одиночная
  • “ - Левая двойная
  • ” - Правая двойная
  • „ - Нижняя двойная
  • « - Левая кавычка «ёлочка»
  • » - Правая кавычка «ёлочка»

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

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>Пример использования cпецсимволов</title>
    </head>
    <body>
        <p>Используем кавычки &laquo;ёлочки&raquo; как
        специальный символ</p>
    </body>
</html>

Семантические кавычки (цитаты)

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

Весь текст, заключенный между открывающим тегом <q> и закрывающим тегом </q> будет обрамлен кавычками. Данный элемент является строковым и не имеет собственной ширины и высоты. Занимаемое им пространство определяется обрамленным текстом. Вид кавычек (двойные верхние или «ёлочки»), которые будут выведены на экран, зависит от атрибута lang корневого элемента <html>. Если данный атрибут задан как «lang=“ru“» то будут выведены «ёлочки».

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>Пример использования элемента q</title>
    </head>
    <body>
        <p>Участок текста <q>выделен кавычками</q></p>
    </body>
</html>

Важно
Не все браузеры корректно обрабатывают зависимость атрибута lang от вида выводимых кавычек. Для точного задания отображения необходимо использовать CSS.

Термины, использованные в статье

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

Последние публикации