Аббревиатура html: Тег | htmlbook.ru
Содержание
Тег | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 7.0+ | 2.0+ | 1.3+ | 3.0+ | 1.0+ | 1.0+ | 1.0+ |
Спецификация
| HTML: | 3.2 | 4.01 | 5.0 | XHTML: | 1.0 | 1.1 |
Описание
Тег <abbr> указывает, что последовательность
символов является аббревиатурой. С помощью атрибута title дается расшифровка сокращения, что позволяет понимать аббревиатуру тем людям,
которые с ней не знакомы. Кроме того, поисковые системы индексируют полнотекстовый
вариант сокращения, что может использоваться для повышения рейтинга документа.
Браузеры никак не выделяют текст внутри <abbr>, за исключением Opera до версии 15, которая добавляет к тексту пунктирное подчёркивание.
Синтаксис
<abbr>Текст</abbr>Атрибуты
- title
- Добавляет всплывающую подсказку к тексту, в которой можно дать расшифровку аббревиатуры.
Также для этого тега доступны глобальные атрибуты и события.
Закрывающий тег
Обязателен.
Пример
HTML5IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<title>Тег ABBR</title>
<meta charset="utf-8">
<style>
abbr {
border-bottom: 1px dashed red; /* Пунктирное подчеркивание текста */
color: #000080; /* Темно-синий цвет текста */
}
</style>
</head>
<body>
<p><abbr title="Common Gateway Interface, общий шлюзовый интерфейс">CGI</abbr>
обозначается протокол, с помощью которого любые внешние программы взаимодействуют
с веб-сервером. С помощью CGI на сервере можно выполнять программы на любом
языке программирования и результат их действия выводить в виде веб-страницы.</p>
</body>
</html>Результат данного примера показан на рис. 1.
Рис. 1. Вид всплывающей подсказки при наведении курсора мыши на текст аббревиатуры
Браузеры
Браузер Internet Explorer до 6 версии включительно не поддерживает тег <abbr>,
взамен рекомендуется использовать тег <acronym>.
: Элемент Аббревиатура — HTML
Элемент HTML «аббревиатура» (<abbr>) представляет собой аббревиатуру и, опционально, может показывать её расшифровку. Расшифровка записывается в атрибут title. Иные значения title, кроме расшифровки аббревиатуры не допускаются.
Исходный код этого интерактивного примера находится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, склонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос.
Статья Как помечать аббревиатуры и сделать их потянутыми поможет понять как использовать <abbr> и связанные элементы.
Этот элемент поддерживает только глобальные атрибуты. Атрибут title имеет специальное семантическое значение, когда используется вместе с элементом <abbr>. Он должен содержать полную расшифровку или описание аббревиатуры.
Каждый элемент <abbr> независим от других. Указание title на одном элементе не применяет это же описание к другим элементам с одинаковым содержанием.
Обычное использование
Необязательно помечать все аббревиатуры с помощью <abbr>. Далее представлено несколько вариантов, которые помогут выбрать как помечать текст:
- Когда используете аббревиатуру и хотите показать описание или расшифровку вне основного потока содержания, используйте
<abbr>c подходящимtitle. - Чтобы обозначить аббревиатуру, которая может быть незнакома читателю, используете
<abbr>с атрибутом title или просто текст с описанием. - Когда присутствие аббревиатуры в тексте должно быть семантически выделено, полезен элемент
<abbr>. В свою очередь, его использование может быть использовано для стилизации или написания сценариев. - Вы можете использовать
<abbr>вместе с<dfn>, чтобы установить определения для терминов, которые являются аббревиатурами или акронимами. Смотрите пример Определение в аббревиатуре ниже.
Смотрите пример Определение в аббревиатуре ниже.Грамматические вопросы
В языках с grammatical number (то есть, языки, в которых количество предметов влияет на грамматику предложения), используйте одинаковое грамматическое число в атрибуте title и внутри элемента <abbr>. Это также имеет место в языках с более чем двумя грамматическими числами (например, арабский имеет не только категории единственного и множественного числа, но двойственного).
Назначение данного элемента исключительно для удобства автора и браузеры отображают его как (display: inline) по умолчанию, хотя его стиль по умолчанию меняется в разных браузерах:
- Некоторые браузеры, например Internet Explorer, стилизуют его как элемент
<span>. - Opera, Firefox и другие добавляют подчёркивание точками к содержанию элемента.
- Некоторые браузеры не только подчёркивают, но и меняют начертание на капитель (small caps). Чтобы избежать этого, добавьте
font-variant(en-US): noneв ваш CSS.
Чтобы избежать этого, добавьте Семантическая пометка аббревиатуры
Чтобы пометить аббревиатуру без задания описания или расшифровок, просто используйте <abbr> без каких-либо атрибутов, как показано в примере ниже.
HTML
<p>Использование <abbr>HTML</abbr> – весело и легко!</p>Результат
Стилизация аббревиатуры
Вы можете использовать CSS, чтобы задать пользовательские стили для аббревиатуры, как показано в примере ниже.
HTML
<p>Используя <abbr>CSS</abbr>, вы можете стилизовать аббревиатуры!</p>CSS
abbr {
font-variant: all-small-caps;
}Результат
Задание расшифровки
Добавление атрибута title даёт вам возможность задать расшифровку или описание для аббревиатуры или акронима.
HTML
<p>Эта статья великолепна! <abbr title="Подпишусь под Каждым Словом">ППКС</abbr>
без раздумий.</p>Result
Определение в аббревиатуре
Вы можете использовать <abbr> вместе с <dfn> для более формального определения аббревиатуры, как показано ниже.
HTML
<p><dfn><abbr title="HyperText Markup Language">HTML</abbr>
</dfn> – язык разметки, который используется для создания семантических и
структурированных веб-страниц.</p>
<p>A <dfn>Specification</dfn>
(<abbr title="Specification">spec</abbr>) – документ, в котором описаны основные
принципы работы технологи или API и как получить к ним доступ.</p>Result
Смотрите больше примеров в статье Как размечать аббревиатуры и делать их понятными.
BCD tables only load in the browser
- Использование элемента <abbr>
- Другие элементы, являющиеся семантически текстовыми:
<a>,<em>,<strong>, <small> (en-US),<cite>, <q> (en-US),<dfn>,<time>,<code>, <var> (en-US), <samp> (en-US),<kbd>, <sub> (en-US), <sup> (en-US),<b>, <i> (en-US),<mark>,<ruby>, <rp> (en-US), <rt> (en-US),<bdo>,<span>,<br>,<wbr>. - Устаревший элемент
<acronym>, который был заменён элементом<abbr>.
Фразовые теги в HTML. Размечем тексты с помощью фразовых… | by Tatiana Fokina
Как уже сказала выше, форматирование делится на визуальное и логическое. За визуальное форматирование отвечают теги визуального форматирования, за логическое — теги логического форматирования. Последние называют ещё семантическими.
К тегам визуального форматирования относятся:
<span>;<mark>;<br>и<wbr>;<i>;<b>;<sup>и<sub>;<ruby>;<u>;<s>.
А это список тегов логического форматирования:
<a>;<em>;<strong>;<cite>;<code>;<abbr>;<dfn>;<ins>;<del>;<q>;<kbd>;<samp>;<var>;<time>;<small>;<bdi>и<bdo>.
Сейчас расскажу подробнее о каждом фразовом элементе.
<span></span>
span — это контейнер для текста.
span используют, если нужно выделить другим цветом отдельные слова, словосочетания и предложения, изменить размер шрифта, добавить другой фон, обвести рамкой участок текста.
Со span можно использовать атрибуты class="", title="", lang="" и xml:lang="". Последний — это аналог lang в XHTML-документах.
-- HTML --
Проснувшись однажды утром после беспокойного сна, Грегор Замза обнаружил, что он у себя в постели превратился в <span>страшное насекомое</span>.-- CSS --
.scary {
color: tomato;
}
Так отобразится этот текст в браузере:
span не семантический тег и влияет только на внешний вид элементов, если ему заданы стили. Для скринридеров и поисковых роботов он не имеет значения, но есть одно исключение.
Это исключение — трюк с атрибутом lang="". Если в тексте есть иностранные слова, то можно оборачивать их в span с указанием другого языка. Тогда скринридер прочтёт их с правильным произношением.
В примере сайт на русском языке, но в тексте встречаются слова на английском. Укажем для неё другой язык:
<html lang="ru">
...
<body>
...
...
<p>Я больше не мёрджу бездумно. Как говорится, <span lang="en"> enough is enough</span>.
</p>
По умолчанию фраза внутри span не будет отличаться от остального текста.
<br> и <wbr>
br (break) переносит строку с текстом точно в том месте, где его поставили. При этом отдельный абзац не создаётся.
br пригодится для форматирования стихов, текстов песен или адресов. Во всех остальных случаях для разбиения на абзацы нужно использовать тег p.
Это одиночный тег и его не нужно закрывать.
Я сидел на пустом берегу.<br>Голубая вода Онтарио отражала череду моих мыслей —<br>Мир и войну, и мёртвых, навеки ушедших во тьму, чтобы воцарился мир.
В браузере этот текст выглядит так:
wbr (word break opportunity) ставит потенциальный разрыв строки.
Если у вас слишком длинные слова или URL-адреса, то смело используйте wbr. Он подходит для случаев, когда вы не уверены в месте переноса строки.
wbr тоже одиночный тег.
Сэло не удивился, узнав, что солнечные пятна действуют на его друзей, попавших в хроно<wbr>-синкластический инфундибулум.
Закрепим: тег br переносит строку сразу. С wbr браузер сначала анализирует ширину контейнера, а уже потом ставит перенос.
Если нужно добавить дефис в местах разрыва строк, то используйте символ мягкого переноса ­ (-):
Эйя­фьядла­йёкюдль
Перенос сработает, когда ширина контейнера уменьшится.
<a></a>
a — ссылка.
С а всё просто. Используйте этот тег для ссылок на другие сайты или внутри одной страницы.
Простой пример использования:
<a href="https://ru.wikipedia.org/wiki/%D0%9A%D0%B0%D0%BF%D0%B8%D0%B1%D0%B0%D1%80%D0%B0" target="_blank" rel="noopener noreferrer">Статья про капибар</a>
По умолчанию ссылки подчёркнуты. Оттенок синего и стиль подчёркивания зависят от браузера.
Автоматический стиль ссылки в ChromeСтиль ссылки в FirefoxСсылка в Internet Explorer 11Ссылка в Microsoft Edge
Важно, чтобы ссылки точно описывали куда они ведут. Куда вы попадёте, кликнув по «Подробнее» или «Далее»? Нужно прочитать весь текст, чтобы это понять. У пользователей скринридеров тоже возникнут проблемы.
Для тех, кому важно сохранить лаконичность ссылок, Аарон Густафсон предлагает такой выход:
<a href="/speaking-engagements/">
<b>A List of My</b>
Speaking
<b>Engagements</b>
</a>
В примере текст ссылки скрывается на уровне CSS.
То есть он будет доступен для пользователей со скринридерами, но не отобразится в браузере из-за свойств display: none; или visibility: hidden;.
При клике по ссылке новая страница открывается в том же самом окне. Этим поведение можно управлять с помощью атрибута target="".
В примере ссылке задано значение _blank. Это значит, что она откроется в новом окне. В этом случае обязательно указывайте rel="noopener noreferrer". Это поможет пользователям избежать фишинговых атак.
Якорные ссылки — это ссылки внутри одного документа.
Расставить такие ссылки просто. Для слова, к которому ведёт якорь, задайте id="". Для якоря укажите путь через атрибут href="#нужный-id". Ссылку для скринридеров можно описать в атрибуте aria-label="". Закрепим на примере:
В следующем <a href="#fat-cat" aria-label="Стрижка котов">параграфе</a> я подробнее расскажу о том, как правильно стричь кошек в теле.<a>Грумминг толстых котов</a>
Тег a — важная часть логической разметки.
<em></em> и <i></i>
em (emphasis) — эмфатическое ударение.
Эмфатическое ударение — выделение слова интонацией для усиления эмоциональной выразительности.
Используйте em, если нужно сделать на части текста эмоциональный акцент и подчеркнуть его эмоциональную важность. Когда мы говорим, то делаем это при помощи интонации и громкости. В вебе для этого есть тег em.
Эмфатическое ударение может понадобиться при уточнении или исправлении неверного слова, например, когда речь идёт о распространённом заблуждении. Ещё его используют, когда приводится контраргумент, чтобы выделить его значимую часть. Также эмфатическое ударение используется в сарказме. Ещё один случай использования — намёки.
Слово, на котором стоит эмфатическое ударение, может изменить значение всего предложения.
Обычно в тег em оборачивают одно или два слова. Если информация срочная или автор настаивает на своей точке зрения, то em можно выделить всё предложение.
-- Пример 1 --
Нет, это <em>он</em> выложил релиз в прод (не я).-- Пример 2 --
Да, мне <em>определённо</em> не хватает для полного счастья системной красной волчанки.-- Пример 3 --
На корабле что-то есть. <em>Нам нужно срочно эвакуироваться!</em>
Текст внутри em выделяется курсивом.
Это тег логического форматирования. Поэтому скринридеры и голосовые помощники произнесут слово «он» с особой интонацией.
i (italic) делает текст наклонным.
Этот тег нужен для визуального форматирования. В i оборачивают названия, термины и иностранные слова. Он подходит также для обозначения прямой речи, мыслей, идиом и метафор.
-- Пример 1 --
<i>Низкоуровневый язык программирования</i> — язык программирования, близкий к программированию непосредственно в машинных кодах используемого реального или виртуального процессора.-- Пример 2 --
Пришлось читать документацию, <i lang="fr">c'est la vie</i>.
Такой текст выделяется курсивом:
Если пишите слова на иностранном языке, то для i можно задать атрибут lang="" или xml:lang="" в XHTML-документах. Это поможет скринридерам и поисковым роботам.
Я работаю простым <i lang="en">cleaning manager</i>.
👉 Запомните, em — семантический тег, а i нет.
Об особенностях использования и различиях em и i подробно написал Факундо Коррадини в статье «You’re using <em> wrong».
<strong></strong> и <b></b>
strong — логическое ударение.
Логическое ударение — выделение слова интонацией для усиления его смысла или повышения значимости.
С помощью strong подчёркивают важность слов и предложений.
Придумайте пароль. Не 1234 или qwerty. <strong>Никому не сообщайте его!</strong>
Пользователь увидит такой текст полужирным, а скринридеры выделят интонацией.
b (bold) делает текст полужирным.
Тег b используют для визуального форматирования. Он не усиливает смысловой вес слов, в отличие от strong.
Используйте b, если нужно выделить названия книг, фильмов, имён, ключевые слова и тому подобное. В статьях с его помощью выделяют лид — первый абзац статьи.
Играю в <b>The Elder Scrolls</b> со времён пылевых бурь и скальных наездников.
В браузере строчка отобразится так:
👉 strong нужен для логического форматирования, а b — для визуального.
<mark></mark>
mark — контекстное выделение текста.
Представьте, что готовитесь к экзамену. Вы распечатали ответы на вопросы и вооружились текстовыделителем, чтобы отметить самое главное. mark похож на текстовыделитель, только в вебе.
Этот тег нужен для визуального выделения слов, которые имеют значимость для конкретного автора и в определённом контексте.
Используйте mark, когда нужно выделить какое-то важное для контекста слово, новый элемент в списке, показать текущую дату в календаре и совпадения с поисковыми запросами.
-- Пример 1 --
Изюму из Малаги. Всё думала про Испанию. Перед тем как Руди родился. Такая <mark>фосфоресценция</mark>, голубовато-зеленоватая. Для мозга очень полезно.-- Пример 2 --
Чаще обращайтесь к argumentum ad populum: «<mark>Все мои знакомые говорят</mark>, что пользуются YotaPhone и ездят на ё-мобилях».
Хотя с точки зрения семантики mark более значим, чем span, это всё равно тег визуального форматирования.
mark автоматически заданы стили background-color: yellow; и color: black;.
<s></s>
s зачёркивает текст.
Используйте s, когда нужно зачеркнуть неправильный или устаревший текст. Это может быть старая цена или неактуальное предложение. Олдскульные любители форумов и Хабра используют перечёркивание в шутках, построенных на оговорке.
2+2=<s>5</s> 4
К s применяется свойство text-decoration: line-through;.
Этот тег нужен исключительно для визуального форматирования и не учитывается поисковыми роботами и скринридерами. Чтобы последние объявляли зачёркивание, спецификация рекомендует задавать псевдоклассам ::before и ::after нужное значение свойства content.
Вместо s можно использовать CSS. Задайте элементу text-decoration: line-through;.
-- HTML --
Невероятное предложение! Коробок спичек всего за <span>1000 $</span> 999 $.-- CSS --
.crossout {
text-decoration: line-through;
}
В браузере строка отображается так:
Раньше тексты можно было зачеркнуть с помощью тега strike. Сейчас он исключён из спецификации.
👉 s не подходит, если нужно нужно определить, когда и почему был удалён текст. В этом случае используйте del.
<u></u>
u (underline) подчёркивает текст.
Случаев использования u не так много. Чаще всего его используют для выделения слов с орфографическими ошибками и для подчёркивания имён собственных в китайском языке. Это могут быть географические названия, организации, имена.
Во втором случае в тег взято название страны 德國 — Германии.
-- Случай 1 --
Мышь (кр<u>о</u>дётся).-- Случай 2 --
我來自<u>德國</u>。
К содержимому u применяется свойство text-decoration: underline;.
Этот тег отвечает за визуальное форматирование.
👉 Не используйте u, если подчёркнутый текст можно перепутать со ссылкой.
<ins></ins> и <del></del>
ins (insert) определяет добавленный в документ текст.
Используйте ins когда нужно показать, какой текст был добавлен во время последнего обновления страницы.
С этим тегом можно использовать атрибуты cite="" и datetime="". Вcite пишут адрес документа, который объясняет, почему текст добавлен или отредактирован.
В datetime пишут дату и время редактирования или удаления текста. Формат: год-месяц-деньTчас:минуты:секунды:часовой пояс.
<ins cite="https://ru.wikipedia.org/wiki/Falcon_Heavy" datetime="2018-03-06T01:32:03Z">Апдейт. Falcon Heavy успешно запустили.</ins>
Браузер подчеркнёт этот текст.
del (delete) определяет удалённый или потерявший актуальность текст.
Тег del понадобится, если нужно показать различия между несколькими версиями страницы.
Для del доступны те же атрибуты, что и для ins: cite="" и datetime="".
<del>Маск не запустит Falcon Heavy.</del>
В браузере текст отобразится как зачёркнутый.
Когда в документе заменяют часть содержимого, то ins используют вместе с del.
<del>Маск вряд ли запустит Falcon Heavy.</del>
<ins cite="https://ru.wikipedia.org/wiki/Falcon_Heavy" datetime="2018-03-06T01:32:03Z">Первый испытательный запуск Falcon Heavy был успешно произведён 6 февраля 2018 года.</ins>
Этот код глазами браузера.
ins и del нужны для логического форматирования.
<q></q>
q (quote) — короткая цитата.
Используйте q, когда дословно цитируете кого-то в предложении.
Для q можно задать атрибут cite="", в котором указывается источник цитаты.
Митник прав: <q cite="https://www.livelib.ru/book/1000092721-iskusstvo-obmana">Это естественно — стремиться к абсолютной безопасности, но это желание заставляет многих людей соглашаться с ложным чувством защищённости</q>.
Тег q нужен для логического форматирования текста. Так поисковый робот поймёт, что в тексте есть цитаты из других источников.
Браузеры добавят для такого текста двойные кавычки.
q {
display: inline;
}q:before {
content: open-quote;
}q:after {
content: close-quote;
}Так браузер отобразит текст внутри q.
Отображение <q></q> в Chrome
Минутка типографики. Браузеры автоматически ставят английские двойные кавычки “…”. Их используют в английском для оформления цитат.
q {
quotes: "\201c" "\201d";
}Русская типографика отличается от английской. Вместо английских кавычек принято использовать французские — ёлочки. Они выглядят так: «…».
Чтобы заменить стандартные кавычки, задайте для свойства quotes значение “\00ab” “\00bb”;.
q {
quotes: "\00ab" "\00bb";
}Вуаля.
👉 Если нужно выделить большую цитату, которая занимает несколько строк или целый абзац, используйте тег blockquote.
<cite></cite>
cite — источник цитаты.
Оборачивайте в cite цитируемые названия книг, статей, игр, фильмов, сериалов и любые ссылки на другие источники. Исключение — имена авторов. Для имён используйте b.
Аарон Густафсон написал книгу <cite>Adaptive Web Design</cite> в 2011 году. В ней он …
Содержимое тегаcite отображается по умолчанию курсивом.
Тег cite семантический.
<abbr></abbr>
abbr (abbreviation) — аббревиатура или акроним.
Аббревиатура — слово, образованное сокращением слова или словосочетания. Примеры: ГЭС и ФСБ.
Акроним — вид аббревиатуры. Акронимы образуются начальными звуками слов, которые входят в сокращение. Примеры: W3C, A11Y и Бенилюкс.
В abbr можно можно раскрыть аббревиатуру в атрибуте title="".
<abbr title="Hypertext Markup Language">HTML</abbr> — это стандартизированный язык разметки документов в вебе.
Браузер подчеркнёт слово пунктирной линией, а при наведении появится всплывающая подсказка.
В чёрной оптимизации title использовали не по назначению. Из-за этого современные скринридеры игнорируют содержимое атрибута. Поэтому лучше раскрывать аббревиатуру при первом упоминании в самом тексте без title="".
<dfn>Hypertext Markup Language (HTML)</dfn> — это стандартизированный язык разметки документов в вебе.
Тег abbr семантический.
Помните, одна аббревиатура — один abbr. Если сокращение повторяется, то не надо его ещё раз оборачивать в этот тег.
👉 Раньше для акронимов использовали отдельный тег acronym, но он был исключён из последней версии стандарта. Так что пользуйтесь abbr и не ломайте голову над видом аббревиатуры.
<dfn></dfn>
dfn (definition) — термин.
Используйте этот тег для терминов, которые упоминаете впервые.
В dfn можно вкладывать abbr, если это термин-аббревиатура.
<dfn><abbr>HTML</abbr></dfn> — это стандартизированный язык разметки документов в вебе.
Вместе с dfn можно использовать атрибут title="". В нём приводится определение термина.
Во втором примере в dfn вложен abbr. В этом случае аббревиатура раскрывается в атрибуте title="".
-- Пример 1 --
<dfn>Капибара</dfn> — полуводное травоядное млекопитающее из семейства водосвинковых.-- Пример 2 --
<dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> — это стандартизированный язык разметки документов в вебе.
В браузере текст станет наклонным.
dfn — тег логического форматирования.
<code></code>
code — фрагмент компьютерного кода.
Используйте code для названий элементов языков программирования или целых строк кода.
Тег <code>code</code> используется для того, чтобы показать фрагмент JS-кода.
Отображается как текст, написанный моноширинным шрифтом.
code можно использовать внутри pre, если нужно сохранить исходное форматирование. В этом случае сохранятся авторские пробелы и переносы.
<pre>
<code> ul
each val in [1, 2, 3, 4, 5]
li= val
</code>
</pre>
Получим такое форматирование:
Тег code нужен для логического форматирования.
<samp></samp>
samp (sample) — результат вывода компьютерной программы или скрипта.
Тег samp полезен, когда в тексте цитируются системные ошибки и приводятся примеры вывода данных системой.
<p>Поиск выполнен.</p>
<p>
<samp>Обработано объектов: 82.<br>
Найдено подходящих объектов: 2.
</samp>
</p>
Браузеры сделают текст моноширинным.
samp можно комбинировать с pre и code.
<pre>
<code>console.log(2.3 + 2.4)<br></code>
<samp>4.699999999999999</samp>
</pre>
Получим такой текст:
samp — тег логического форматирования.
👉 Тег tt (TeleType) выполняет похожую функцию. Не используйте его. Он устарел и исключён из стандарта.
<kbd></kbd>
kbd (keyboard) — названия клавиш.
Используйте kbd, если пишите названия клавиш и голосовые команды.
Чтобы выйти, нажмите сначала <kbd>Esc</kbd>, потом <kbd>:</kbd>, затем <kbd>q</kbd> и <kbd>Enter</kbd>.
Если нужно написать сочетание из нескольких клавиш, то вложите дочерние kbd в общий контейнер.
Скопируйте, нажав <kbd><kbd>Ctrl</kbd>+<kbd>C</kbd></kbd>.
Текст внутри kbd написан моноширинным шрифтом.
kbd может содержать тег samp или быть вложенным в него.
В kbd вкладывают samp, если нужно показать входные данные в виде текста, который отображается системой. Простой пример — это названия кнопок или пунктов и подпунктов меню в программах. В примере так указан путь к нужному пункту меню:
Найдите пункт с настройками по пути
<kbd>
<kbd><samp>File</samp></kbd> →
<kbd><samp>Settings</samp></kbd>
</kbd>
Так отобразит текст браузер.
В samp вкладывают kbd, когда нужно показать как система интерпретировала пользовательский ввод.
<p>
<samp>yarn start:theproject does not exist, did you mean:</samp>
</p>
<blockquote>
<samp>
<kbd>yarn start:the-project</kbd>
</samp>
</blockquote>
Браузер использует для текста всё тот же моноширинный шрифт:
Тег kbd нужен для логического форматирования.
<var></var>
var (variable) — переменная.
Используйте var для математических и программных переменных. В этот тег можно оборачивать любые фразы, которые легко заменить конкретными значениями.
-- Пример 1 --
У нас есть <var>число 1</var> и <var>число 2</var>.-- Пример 2 --
Она написала <var>E</var> = <var>m</var><var>c</var><sup>2</sup>.
Браузеры выделят var курсивом.
👉 Для сложных математических формул и расчётов используйте специальный язык разметки MathML.
<small></small>
small — дополнительная информация.
Используйте small для небольших сносок и комментариев. Это могут быть предостережения, оговорки, информация о лицензии, авторских правах и тому подобное.
<p><small>© 2013-2018, команда капибар</small></p>
Размер small зависит от основного размера шрифта и гарнитуры. К тегу применяется свойство font-size: smaller;, которое уменьшает шрифт на одну условную единицу.
Можно вкладывать один тег small в другой.
<p>Всем, всем, всем!
</p>
<p>
<small> У нас самая выгодная ставка по ипотеке.
<small>Предложение действительно, если ваш доход выше 100 веточек в месяц.
</small>
</small>
</p>
В этом случае размер текста будет меньше с каждым уровнем вложенности.
👉 Раньше small использовался для физического форматирования вместе с big. В последней спецификации он приобрёл семантическое значение, а big был исключён. Вместо big спецификация рекомендует использовать CSS.
<sup></sup> и <sub></sub>
sup (superscript) — надстрочный текст.
Надстрочным текстом пишут сноски или математические знаки и символы.
-- 1 пример --
В день нужно платить всего 0,666 % <sup>*</sup>-- 2 пример --
a<sup>n</sup> × a<sup>k</sup>= a<sup>n+k</sup>
Надстрочный текст расположен над базовой линией, а его высота в два раза меньше основного. К sup по умолчанию применяются свойства vertical-align: super; и font-size: smaller;.
sub (subscript) — подстрочный текст.
Подстрочный текст используется в формулах.
H<sub>2</sub>SO<sub>4</sub>
Подстрочный текст меньше в высоту и располагается ниже базовой линии. По умолчанию sub заданы свойства vertical-align: sub; и font-size: smaller;.
👉 Для сложных математических формул используйте язык разметки MathML.
<ruby></ruby>
ruby — верхняя или нижняя текстовая аннотация.
Тег связан с агатом — типографским шрифтом, размер букв в котором равен 5,5 пунктам.
В теге указывается, как произносятся иероглифы в китайском, японском и других восточно-азиатских языках.
Внутрь ruby вкладываются теги rt и rp.
В rt размещается аннотация к тексту.
Тег rp нужен для аннотаций для браузеров, которые не поддерживают ruby. Если браузер поддерживает ruby, то текст не отобразится.
<ruby>
東 <rt>tō</rt>
京 <rt>kyō</rt>
</ruby>
Браузеры разместят один текст над другим и уменьшат надстрочный шрифт.
Токио!
Можно вкладывать один элемент ruby в другой. В этом примере указана транскрипция слов на хирагане и английском языке.
<ruby>
<ruby>東
<rt>とう</rt>南
<rt>なん</rt>
</ruby>
<rt lang=en>Southeast</rt>
</ruby>の方角
Текст в браузере отобразится так:
«Юго-восточное направление»
Тег ruby нужен для визуального форматирования.
<bdo></bdo> и <bdi></bdi>
bdo (bi-directional override) — изменение направления текста.
Тег bdo будет полезен, если на сайте несколько языков, один из которых читается справа налево или наоборот. Справа налево пишут в арабском языке и иврите.
В bdo обязательно нужно указывать атрибут dir="", который задаёт направление текста:rtl — справа налево;ltr — слева направо.
<bdo dir="rtl">קביברה</bdo> в переводе с иврита означает «капибара».
В браузере предложение выглядит так:
bdi (bi-directional isolate) — отмена изменения направления текста.
Используйте bdi для слов, которых не должно касаться изменение направления текста. Это полезно, когда направление текста заранее не известно или есть слова из языка с другим направлением.
В примере в тексте на иврите есть слово на английском, которое нам не нужно разворачивать.
-- HTML --
<div><bdi>C++</bdi> היא שפת תכנות מרובת פרדיגמות המבוססת על שפת התכנות C, שפותחה בשנות ה־80.-- CSS --
.content-rtl {
direction: rtl;
}
По умолчанию для bdi задан атрибут dir="auto".
Поведение bdi можно заменить стилями. Примените к span правило unicode-bidi: isolate;. Только помните, что в этом случае браузер не сможет понять семантику, которая передаётся с помощью bdi.
👉 На сентябрь 2018 bdi поддерживается браузерами частично.
<time></time>
time — дата и время в машиночитаемом формате.
Используйте time, если в тексте указаны точные даты и время. Это может быть время отправки комментария или сообщения, расписание, архив, календарь.
Этот тег не стоит использовать, если:
Внутри time можно использовать несколько атрибутов:datetime="" — дата и время в машиночитаемом формате;pubdate="" — дата публикации документа;title="" — дополнительная информация.
Время указывается внутри time или в атрибуте datetime. Во втором примере в datetime указаны число и месяц.
-- Пример 1 --
<time>2 ноября 2018 года</time>.-- Пример 2 --
Акции Tesla упали из-за поведения Илона Маска в прямом эфире в <time datetime="09-07">в эту пятницу</time>.-- Пример 3 --
Мем опубликован <time title="Понедельник, 12-50">7 часов назад</time>.
Браузер отобразит эти строки как обычный текст. Содержимое атрибута title станет всплывающей подсказкой.
Формат времени в datetime="" жёстко определён.
- Год: 1985.
Должен состоять из четырёх и более цифр. - Год и неделя: 1984-W38.
W — номер недели. - Год и месяц: 1985-10.
- Год, месяц, день: 1985-10-25.
- Месяц и день: 10-25.
- Часы и минуты: 1:15.
- Часы, минуты, секунды: 1:15:39.
- Часы, минуты, доли секунд: 1:54:39.929.
Доли нужно округлять до трёх знаков. - Дата и время, разделённые «T» или пробелом: 1985-10-25T1:15. Время можно указывать с секундами и долями секунд: 1985-10-25T1:15:39.
- Часовой пояс можно задать несколькими способами: Z или +0000, +00:00, -0800, -08:00.
Двоеточие можно не использовать. - Местная дата и время: 1985-10-25T1:15Z.
- Временной интервал: P2T4h28M3S.
P, количество дней, T, количество часов (H), минут (M) и секунд (S). Дни и часы можно не указывать. - Временной интервал можно указать другим способом: 1w 2d 2h 30m 10.501s.
w — недели, d — дни, h — часы, m — минуты, s — секунды.
Можно писать слитно, а буквы могут быть в любом регистре.
В спецификации есть полный список форматов записи времени.
time нужен для логического форматирования и важен для поисковиков. Благодаря этому тегу ссылки в поисковой выдачи размещаются в хронологическом порядке.
Браузеры автоматически преобразовывают дату из григорианского календаря в другую систему исчисления времени. Например, японский браузер покажет <time>16:00</time> как «16:00時». «時» означает «час».
И немного информационного дизайна. В блоге UX-дизайнера Михаила Озорнина есть советы о том, как писать дату и время в интерфейсах.
Фразовые теги — это важная часть HTML-разметки. Эти теги отвечают за визуальное и логическое форматирование. Благодаря этому тексты становятся понятными для пользователей и разных технологий.
Визуальное форматирование помогает пользователям быстрее читать, ориентироваться в текстах и находить важные фразы. Логическое форматирование нужно для браузеров, вспомогательных и речевых технологий и помогает им интерпретировать тексты.
Всего лишь пара фразовых тегов сделает код структурированным и предсказуемым, а страницы доступными.
Если у разметки чёткая структура, то в ней сможете разобраться не только вы, но и другие разработчики. Это избавит команду от лишней головной боли и борьбы с легаси мельницами. Для поисковиков это тоже важно. У страниц с чёткой структурой больше шансов продвинутся вверх в поисковой выдаче.
Предсказуемость разметки означает, что браузеры отобразят страницу так, как это описано в стандартах.
Наконец, благодаря фразовым тегам вспомогательные технологии могут понимать тексты.
HTML — Фразовые теги для текста / ProgLang
Фразовые теги для текста были выделены для определенных целей, хотя они отображаются аналогично другим базовым тегам типа <b>, <i>, <pre> и <tt>, которые Вы видели в предыдущей главе. В этом уроке мы рассмотрим все важные в HTML теги для текста, поэтому давайте начнем.
Наклонный текст
Все, что расположено в теге <em>…</em>, отображается как наклонный текст. С помощью тега наклонного текста в HTML выделяют текст, на котором хотят акцентрировать внимание читателя.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример наклонного текста в HTML</title>
</head>
<body>
<p>В следующем слове <em>применяется</em> наклонный шрифт.</p>
</body>
</html>
Получим следующий результат:
Выделенный текст
Все, что расположено в теге <mark>…</mark>, выделяется желтым фоном. С помощью этого тега можно в HTML выделить текст, который нуждается во внимании читателя.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример выделенного текста в HTML</title>
</head>
<body>
<p>Следующее слово <mark>выделено</mark> желтым фоном.</p>
</body>
</html>
Получим следующий результат:
Жирный текст
Все, что расположено в теге <strong>…</strong>, отображается жирным текстом. С помощью этого тега можно в HTML выделить текст жирным шрифтом, тем самым указав на важные слова в тексте.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример жирного текста в HTML</title>
</head>
<body>
<p>Следующее слово <strong>выделено</strong> жирным шрифтом.</p>
</body>
</html>
Получим следующий результат:
Текст аббревиатура
Вы можете создавать аббревиатуры с помощью тега <abbr>…</abbr>, помещая в его текст. Если присутствует атрибут title, то он должен содержать полное описание и ничего больше.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример аббревиатуры в HTML</title>
</head>
<body>
<p>Вы изучаете <abbr title = "HyperText Markup Language">HTML</abbr>.</p>
</body>
</html>
Получим следующий результат:
Элемент сокращения
Элемент <acronym> позволяет указать, что текст заключенный между тегами <acronym>…</acronym>, является сокращением (аббревиатурой).
В настоящее время основные браузеры не меняют внешний вид содержимого элемента <acronym>.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример сокращения в HTML</title>
</head>
<body>
<p>Вы изучаете <acronym>HTML</acronym>.</p>
</body>
</html>
Получим следующий результат:
Направление текста
Тег <bdo> — используется для переопределения текущего направления текста и имеет двунаправленное переопределение. В предыдущем уроке мы рассматривали похожий атрибут dir, который позволяет указать браузеру направление потока текста.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример направления текста в HTML</title>
</head>
<body>
<p>Текст слево направо.</p>
<p><bdo dir = "rtl">Текст справа налево.</bdo></p>
</body>
</html>
Получим следующий результат:
Специальные условия
Тег <dfn> — позволяет указать, что Вы вводите специальный термин, он еще называется в HTML элемент определения. Его использование похоже на курсивный шрифт в середине абзаца.
Как правило, Вы должны использовать элемент <dfn> при первом вводе ключевого слова. Последние версии браузеров отображают содержимое элемента <dfn> курсивом.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример специального условия в HTML</title>
</head>
<body>
<p>Следующее слово <dfn>специальное</dfn> условие.</p>
</body>
</html>
Получим следующий результат:
Цитата в тексте
Если Вы хотите процитировать отрывок из другого источника, то должны поместить его между тегами <blockquote>…</blockquote>.
Текст внутри тега цитаты <blockquote> обычно имеет отступы от левого и правого краев окружающего текста и иногда использует курсивный шрифт.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример оформления цитаты в HTML</title>
</head>
<body>
<p>Ниже представлен текст цитаты:</p>
<blockquote>Этот текст заключен в тег цитаты.</blockquote>
</body>
</html>
Получим следующий результат:
Короткие цитаты или двойный кавычки в HTML
Тег цитаты <q>…</q> используется, когда Вы хотите добавить в HTML двойную кавычку в предложение.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример двойных кавычек в HTML</title>
</head>
<body>
<p>Следующий текст <q>помещен в двойные кавычки</q>.</p>
</body>
</html>
Получим следующий результат:
Цитирование в HTML
Если Вы цитируете текст, то можете указать источник, размещающий его между открывающим тегом <cite> и закрывающим тегом </cite>.
Как правило, в публикации для печати содержимое тега цитирования <cite> отображается по-умолчанию курсивом.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример цитирования в HTML</title>
</head>
<body>
<p>Следующий текст <cite>будет процитирован</cite>.</p>
</body>
</html>
Получим следующий результат:
Программный код
Любой код программирования, который Вы хотите отобразить на веб-странице, должен быть помещен внутри тегов <code>…</code>. Обычно содержимое тега <code> представлено в моноширинном шрифте, как и программный код в большинстве книг по программированию.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример программного кода в HTML</title>
</head>
<body>
<p>Узнайте программный код: <code>h2, h3, h4 { font-size: 20px; } </code>.</p>
</body>
</html>
Получим следующий результат:
Клавиатурный текст
Когда Вы пишите о компьютерах и хотите сообщить читателю, что нужно нажать какую-либо клавишу, то можете использовать элемент <kbd>…</kbd>, чтобы указать, что следует нажать или вводить. Как правило, отображается моноширинным шрифтом.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример клавиатурного текста в HTML</title>
</head>
<body>
<p>Нажмите сочетание клавиш <kbd>CTRL+F5</kbd>, чтобы обновить веб-страницу и очистить кеш.</p>
</body>
</html>
Получим следующий результат:
Переменные программирования
Тег <var> указывает, что содержимое этого элемента является переменной, часто используется вместе с элементами <pre> и <code>.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример переменных в HTML</title>
</head>
<body>
<p><code>document.write("<var>name</var>")</code></p>
</body>
</html>
Получим следующий результат:
Результат программы
Тег <samp>…</samp> указывает, что содержимое этого элемента является результатом выполнения программы, приложения, скрипта и т.д. Опять же, он используется при оформлении программирования или кодирования.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример результата программы в HTML</title>
</head>
<body>
<p>В результате программа выведит на экран сообщение <samp>Hello World!</samp></p>
</body>
</html>
Получим следующий результат:
Текст адреса
Тег <address>…</address> используется для размещения адреса.
Пример
<!DOCTYPE html>
<html>
<head>
<title>Пример текста адреса в HTML</title>
</head>
<body>
<address>141411, г.Москва, ул.Пахучкина, д.8</address>
</body>
</html>
Получим следующий результат:
Поделитесь:
| Справочник HTML
HTML-элемент <acronym> определяет, что данная последовательность символов, является акронимом или аббревиатурой.
Аббревиатура и акроним оба являются сокращением некоего сочетания слов. И аббревиатура и акроним представляются набором букв.
Универсальный атрибут title может использоваться в элементе <acronym>, чтобы предоставить расшифровку акронима при наведении на него указателя мыши.
Примечание: Этот элемент был убран из спецификации HTML5, поэтому его не рекомендуется использовать. Вместо него используйте элемент <abbr>.
Синтаксис
<acronym>Текст</acronym>Атрибуты
Для этого элемента доступны универсальные атрибуты и события.
Стилизация по умолчанию
Браузеры по разному выделяют текст внутри элемента <acronym>:
- Некоторые, например, Internet Explorer и Chrome не меняют стиль элемента и он не отличается от обычного тега <span>.
- Opera, Firefox и некоторые други браузеры подчеркивают добавляют к тексту пунктирное подчёркивание.
- Незначительная часть браузеров помимо подчёркивания точками также меняют начертание текста на капитель (small caps). Во избежание такого поведения, как вариант, необходимо добавить
font-variant: noneв CSS стиль.
Совет: Веб-разработчикам рекомендуется не полагаться на стиль элемента отрисовываемый браузером по-умолчанию.
Пример использования:
Элемент <acronym>
Пример HTML:
Попробуй сам
Популярность языка JavaScript порождена его широкими возможностями по взаимодействию с элементами веб-страницы через <acronym title="Document Object Model, Объектная модель документа">DOM</acronym>.Различия между HTML 4.01 и HTML5
Тег <acronym> не поддерживается в HTML5.
Спецификации
| Спецификация | Статус |
|---|---|
| HTML 4.01 (W3C) | Рекомендация |
Поддержка браузерами
| Элемент | ||||||
| <acronym> | 3+ | 1+ | 1.3+ | 1+ | 1+ | 1+ |
| Элемент | ||||
| <acronym> | 1+ | 6+ |
Тег HTML
примеров
Она ознаменовала аббревиатуры следующим образом:
Can I get this <acronym title=»as soon as possible»>ASAP</acronym>?
Попробуйте »
Поддержка браузеров
Все основные браузеры поддерживают <аббревиатуру>.
Примечание: IE 5.5 или более ранних версиях IE браузер не поддерживает тег <аббревиатуру>.
Определения тегов и инструкции
HTML5 не поддерживает тег <аббревиатуру>. Пожалуйста , используйте <сокр> вместо тега.
<Сокращение> тэг определяет аббревиатуры.
Если акроним это слово, оно может быть считана, например НАТО, НАСА, как можно скорее, с графическим интерфейсом.
Принимая только аббревиатуры помечены, вы будете в состоянии браузеров, проверки орфографии, системы перевода и поиска индексаторах двигателя обеспечивают полезную информацию.
Советы и примечания
Совет: В некоторых браузерах, при перемещении мыши с тегом <аббревиатурой> от первой буквы аббревиатуры, название атрибута <аббревиатурой> теги могут быть использованы для отображения полной версии аббревиатур ,
Различия между HTML 4.01 и HTML5
HTML5 не поддерживает тег <аббревиатура> тег, поддержка HTML 4.01 <аббревиатурой>.
Стандартная недвижимость
В HTML 4.01, <аббревиатура> Тег поддерживает следующие стандартные атрибуты:
| 属性 | 值 | 描述 |
|---|---|---|
| class | classname | 规定元素的类名 |
| dir | rtl ltr | 规定元素中内容的文本方向 |
| id | id | 规定元素的唯一 id |
| lang | language_code | 规定元素中内容的语言代码 |
| style | style_definition | 规定元素的行内样式 |
| title | text | 规定元素的额外信息 |
| xml:lang | language_code | 规定 XHTML 文档中元素内容的语言代码 |
Для полного описания, перейдите к стандартной собственности .
Особенности проведения мероприятий
В HTML 4.01, <аббревиатура> Тег поддерживает следующие атрибуты событий:
| 属性 | 值 | 描述 |
|---|---|---|
| onclick | script | 当鼠标被单击时执行脚本 |
| ondblclick | script | 当鼠标被双击时执行脚本 |
| onmousedown | script | 当鼠标按钮被按下时执行脚本 |
| onmousemove | script | 当鼠标指针移动时执行脚本 |
| onmouseout | script | 当鼠标指针移出某元素时执行脚本 |
| onmouseover | script | 当鼠标指针悬停于某元素之上时执行脚本 |
| onmouseup | script | 当鼠标按钮被松开时执行脚本 |
| onkeydown | script | 当键盘被按下时执行脚本 |
| onkeypress | script | 当键盘被按下后又松开时执行脚本 |
| onkeyup | script | 当键盘被松开时执行脚本 |
Для полного описания, перейдите атрибутов события .
Что означает аббревиатура HTML «span» расшифровывается?
Я предполагаю, что <div> на самом деле может означать: «division», поскольку он создает разделение в документе, разделяя содержимое до и после него. Я прав?
Но <span> немного более неясен по своему значению. Я немного погуглил по этому поводу и нашел несколько интересных вариантов: «Super Passive Analyzer Node», «SPAce Node», «Simple Plain Access Node».
Кто-нибудь знает правильную аббревиатуру для <span> ?
html
xhtml
tags
semantics
markup
Поделиться
Источник
alonso.torres
08 декабря 2010 в 19:38
3 ответа
- Что означает аббревиатура AISAC?
В CRI ADX2 sound authoring tool он поддерживает систему под названием ‘AISAC’ , и есть блог, представляющий эту систему: управление параметрами в реальном времени с помощью AISAC , но я не могу найти никакой информации о значении этого слова ‘AISAC’. Является ли это слово аббревиатурой, и если да,…
- Что означает аббревиатура GLFW стоять?
Что означает аббревиатура GLFW? http://www.glfw.org/ — это основной сайт, но я не могу найти там никакой подсказки. Даже здесь на SO у него есть тег, но в описании аббревиатура не объясняется.
19
Это не аббревиатура, это просто «spans» содержание, которое находится внутри тега.
Поделиться
Donut
08 декабря 2010 в 19:39
13
Довольно трудно выяснить, что творилось в головах создателей HTML4, где впервые появился SPAN. Я отследил первоначальный проект стандарта , но там ничего не сказано об именовании, только определение:
SPAN является встроенным элементом и может использоваться в абзацах, элементах списка и
т. д., Когда вы хотите присвоить группе слов информацию о классе или языке.
SPAN не может использоваться для группировки элементов блочного уровня. SPAN не имеет присущего
влияет на рендеринг до тех пор, пока вы не примените стиль, например, с помощью атрибута стиля или
связанной таблицы стилей.
Вероятно, это просто производное от глагола ‘to span’. Но я хотел бы найти ссылку:)
Обновление
Также из спецификации HTML4 (на этот раз самой новой ):
Каждая версия HTML попыталась отразить больший консенсус среди игроков отрасли, чтобы инвестиции, сделанные контент-провайдерами, не были потрачены впустую и чтобы их документы не стали нечитаемыми в течение короткого периода времени.
Поэтому элемент SPAN, вероятно, сначала поддерживался определенным браузером, после чего он был перенят другими браузерами и в конечном итоге принят в качестве стандарта. Таким образом, 10 баллов тому, кто может назвать этот браузер и создать 199x IRC журналов чатов разработчиков этих браузеров:)
Поделиться
thomaspaulb
08 декабря 2010 в 20:06
0
Span означает ширину и протяженность «whatever»
Поделиться
TheLifeOfSteve
08 декабря 2010 в 19:41
- Что означает аббревиатура Socket.IO io?
Я новичок в socket.IO и задаюсь вопросом, Что означает какая-то аббревиатура. Что означает IO внутри кода ? Что же на самом деле в нем хранится? Что такое хранение io.socket s? io.sockets.on(‘connection’, function (socket) { socket.on(‘message’, function(message){…
- Что означает аббревиатура LUA стоять?
Многие пишут LUA , имея в виду язык программирования, разработанный с 1993 года в Папском Католическом университете Рио-де-Жанейро (PUC-Rio). Так что же означает эта аббревиатура?
Похожие вопросы:
Что означает аббревиатура «ext» в библиотеках Python?
Во многих библиотеках Python я вижу модуль под названием ext, например sqlalchemy.ext . Мне просто было любопытно, что означает эта аббревиатура и для чего обычно используется модуль.
Что означает «opt» (как в каталоге «opt»)? Это аббревиатура?
Что означает opt (как в каталоге opt)? Я обычно вижу этот каталог в системах Unix с инструментами разработки внутри. Это аббревиатура?
Почему тег <span> так назван
Возможный Дубликат : Что означает аббревиатура HTML “span” расшифровывается? почему тег span назван так, не могли бы вы сказать мне, почему у него такое название ? Я искал в google, но…
Что означает аббревиатура AISAC?
В CRI ADX2 sound authoring tool он поддерживает систему под названием ‘AISAC’ , и есть блог, представляющий эту систему: управление параметрами в реальном времени с помощью AISAC , но я не могу…
Что означает аббревиатура GLFW стоять?
Что означает аббревиатура GLFW? http://www.glfw.org/ — это основной сайт, но я не могу найти там никакой подсказки. Даже здесь на SO у него есть тег, но в описании аббревиатура не объясняется.
Что означает аббревиатура Socket.IO io?
Я новичок в socket.IO и задаюсь вопросом, Что означает какая-то аббревиатура. Что означает IO внутри кода ? Что же на самом деле в нем хранится? Что такое хранение io.socket s?…
Что означает аббревиатура LUA стоять?
Многие пишут LUA , имея в виду язык программирования, разработанный с 1993 года в Папском Католическом университете Рио-де-Жанейро (PUC-Rio). Так что же означает эта аббревиатура?
Что означает аббревиатура «Spitter»?
Читал на Spring Boot JPA. На термин Spitter ссылаются много раз. Я знаю, что делает плевательница. Однако что означает эта аббревиатура? Я знаю, что этот вопрос не технарь, но он не дает мне покоя,…
Что означает аббревиатура fdim?
Все математические функции C, кажется, имеют понятное название, но я не могу найти, что означает аббревиатура fdim. (fdim вычисляет положительную разность его двух входов с плавающей запятой).
Что означает ‘d’ в /dt в postgres
Что означает ‘d’ в \dt в postgres? Есть ли что-то, что расшифровывается как аббревиатура? Я думаю, что это важно знать, чтобы лучше запомнить.
: элемент Abbreviation — HTML: язык разметки гипертекста
Элемент HTML Abbreviation ( ) представляет собой аббревиатуру или акроним; необязательный заголовок атрибут может предоставить расширение или описание для сокращения. Если присутствует, заголовок должен содержать это полное описание и ничего больше.
Этот элемент поддерживает только глобальные атрибуты. Атрибут title имеет особое семантическое значение при использовании с элементом ; он должен содержать полное удобочитаемое описание или расширение аббревиатуры.Этот текст часто отображается браузерами как всплывающая подсказка при наведении курсора мыши на элемент.
Каждый используемый вами элемент не зависит от всех остальных; предоставление заголовка для одного не добавляет автоматически один и тот же текст расширения к другим с таким же текстом содержимого.
Типичные варианты использования
Разумеется, не обязательно, чтобы все сокращения были размечены с использованием . Однако есть несколько случаев, когда это полезно:
- Если используется аббревиатура и вы хотите предоставить расширение или определение вне потока содержимого документа, используйте
- Чтобы определить аббревиатуру, которая может быть незнакома читателю, представьте термин, используя
title, либо встроенный текст, обеспечивающий определение. - Когда необходимо семантически отметить присутствие аббревиатуры в тексте, полезен элемент
- Вы можете использовать
Грамматические соображения
В языках с грамматическим числом (то есть языках, где количество элементов влияет на грамматику предложения) используйте тот же грамматический номер в атрибуте title , что и внутри элемента . Это особенно важно для языков с более чем двумя числами, таких как арабский, но также актуально для английского языка.
Назначение этого элемента — исключительно для удобства автора, и все браузеры отображают его встроенным ( дисплей : встроенный ) по умолчанию, хотя его стиль по умолчанию варьируется от одного браузера к другому:
- В некоторых браузерах, например в Internet Explorer, его стиль не отличается от стиля элемента
- Opera, Firefox и некоторые другие добавляют пунктирную подчеркивание к содержимому элемента.
- Некоторые браузеры не только добавляют пунктирную линию подчеркивания, но и помещают ее в маленькие заглавные; чтобы избежать этого стиля, добавьте что-то вроде
font-option: noneв CSS не позаботится об этом случае.
Семантическая разметка сокращения
Чтобы разметить сокращение без предоставления расширения или описания, используйте без каких-либо атрибутов, как показано в этом примере.
HTML
Использовать HTML весело и легко!
Результат
Сокращения стилей
Вы можете использовать CSS, чтобы установить собственный стиль, который будет использоваться для сокращений, как показано в этом простом примере.
HTML
Используя CSS , вы можете стилизовать свои сокращения!
CSS
abbr {
вариант шрифта: все маленькие заглавные буквы;
} Результат
Обеспечение расширения
Добавление атрибута заголовка позволяет предоставить расширение или определение аббревиатуры или акронима.
HTML
Шутка Ашока сделала меня LOL большим
время.
Результат
Определение сокращения
Вы можете использовать в тандеме с для более формального определения сокращения, как показано здесь.
HTML
HTML
- это язык разметки, используемый для создания семантики и структуры
веб-страницы.
A Спецификация
( spec ) - это документ, в котором
подробно, как технология или API предназначена для работы и как это
Доступ.
Результат
Полное написание аббревиатуры или аббревиатуры при первом их использовании на странице полезно для того, чтобы помочь людям понять их, особенно если содержание носит технический или отраслевой жаргон.
Пример
Нотация объектов JavaScript ( JSON ) - это облегченный формат обмена данными.
Это особенно полезно для людей, которые не знакомы с терминологией или концепциями, обсуждаемыми в содержании, для людей, которые плохо знакомы с языком, и для людей с когнитивными проблемами.
Таблицы BCD загружаются только в браузере
Вот когда их использовать с сокращениями »
В тегах HTML
Раскрытие: Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальный сбор за некоторые услуги, которые мы рекомендуем на этой странице.Узнать больше
- Элемент
- Что такое семантическая разметка? (И почему вы должны научиться его писать)
- Что делает тег HTML
Abbr: вот когда его использовать с сокращениями? - Элемент используется вместе с атрибутом title, чтобы связать полнотекстовое объяснение с аббревиатурой или акронимом. Посетители веб-сайта не видят текст в атрибуте title, но браузеры, поисковые системы и вспомогательные технологии используют эту информацию.
- Дисплей
- встроенный
- Использование
- семантическое | textual
Пример кода
Этот веб-сайт посвящен HTML . Этот сайт содержит HTML .
Аббревиатуры и акронимы
В идеале тег следует использовать всякий раз, когда у вас есть сокращение или акроним. По крайней мере, его следует использовать в первый раз, когда вы вводите необычные или неочевидные акронимы или сокращения.
При использовании тега всегда следует использовать атрибут title , который указывает значение аббревиатуры или акронима.
Устаревший тег
Старые спецификации HTML включали отдельный элемент . Теперь это не рекомендуется в HTML5, и вместо этого аббревиатуры следует размечать с помощью элемента .
Элемент
Если вы используете незнакомое или необычное сокращение, вы можете также рассмотреть возможность включения элемента , чтобы предоставить дополнительную информацию о слове или фразе.
Адам — технический писатель, специализирующийся на документации и учебных пособиях для разработчиков.
Браузер Поддержка abbr
Атрибуты abbr
| Имя атрибута | Значения | Примечания |
|---|---|---|
| title | Содержит значение или объяснение аббревиатуры или акронима. |
Навигация по сообщениям
| HTML | Язык разметки гипертекста Академия и наука »Электроника и многое другое… | Оцените его: | ||||||
| HTML | Документ на языке разметки гипертекста Вычисления »Расширения файлов | |||||||
| HTML | Hit The Mother Load Разное »Приколы | Оцените это: | ||||||
| HTML | Правительство | Оцените: | ||||||
| HTML | Hey It’s My Lunch Разное »Funnies | Hello To My Love 90 002 Разное »Приколы | Оценить: | |||||
| HTML | Опасности пощекотать гортань Разное» | 9026 9026 9026 | ||||||
| HTML | Hey Too Much Layout Разное »Приколы | Оценить: | Разное Кому | Оцените: | ||||
| HTML | Горячие Помидоры Melt Lips Разное »Funnies | HTML | Трудно заняться любовью Разное »Приколы | Оцените это: | ||||
| HTML | Гамбургер, помидоры, майонез и салат | Nutrition | Питание | Оценить: | ||||
| HTML | Эй, попробуй мой язык Разное »Приколы | Оцените его: | ||||||
| HTML | Как познакомиться с девушками 903 902 | Оцените: | ||||||
| HTML | га rry взял мой обед! Разное »Приколы | Оцените: | ||||||
| HTML | Гипертекстовый язык разметки Академия и наука» Язык и литература — и многое другое… | Оцените: | ||||||
| HTML | Испытания надежды Много жизней Сообщество »Религия | |||||||
| HTML | Язык гипертекстовой разметки Правительственный »FDA | Оцените его: | ||||||
| HTML | Оцените: | |||||||
| HTML | Как мариновать Lox Разное »Funnies | Как рассмешить Разное »Funnies | Оцените: |
Текст: Сокращения, цитаты и код
Сокращения
abbr используется для разметки аббревиатуры, сокращенной формы слова или фразы.
Расширенная фраза, которую представляет аббревиатура, может быть определена в значении атрибута title . Это необязательно, но рекомендуется.
Этот веб-сайт составляет около HTML и CSS .
Рекламируйте здесь!
На давнем, начитанном и уважаемом ресурсе веб-разработки.
Котировки
blockquote и q используются для котировок. blockquote обычно используется для автономных, часто многострочных котировок, тогда как q используется для более коротких, встроенных котировок.
Если источник цитаты можно найти в Интернете, можно использовать атрибут cite , чтобы указать на его происхождение.
Я спросил Боба о цитатах в Интернете, и он сказал Я знаю о цитатах не меньше, чем о голубях
.К счастью, я нашел HTML Dog, и он сказал:
цитата и q используются для цитат. blockquote обычно используется для отдельных, часто многострочных цитат, тогда как q используется для более коротких, встроенных цитат.
Цитаты
очень хорошо работают с элементами HTML5 figure и figcaption , обеспечивая удобный семантический способ сгруппировать цитату с цитатой:
<рисунок>
[Большая старая цитата об эволюции]
Чарльз Дарвин
Но не будем на этом увлекаться — подробнее см. Статью о секционировании.
Цитаты
Чтобы сделать вещи красивыми и запутанными, помимо атрибута cite , существует также тег cite . Это можно использовать для определения названия произведения, например книги.
Согласно Библии , через шесть дней Бог сказал: к черту это для шуток, я сплю
.
Код
код используется для обозначения любой формы кода компьютера .Кроме того, var может использоваться для переменных (которые могут быть переменной в чем угодно, а не только в коде — это может быть переменная в уравнении, например), samp для образца вывода и kbd (клавиатура) для пользователя ввод .
Если вы добавите строку givevaderachuckle = true; в подпрограмму destroy_planet , а затем введите ilovejabba < / kbd> в консоль, большой плохой зеленый лазер Звезды Смерти вытравит Slug Lover! на поверхности планеты.
Предварительно отформатированный текст
pre - это предварительно отформатированный текст , и необычным в тегах HTML является то, что он обращает внимание на каждый символ в нем, включая пробелы (в то время как другие элементы будут игнорировать, например, последовательный пробел или разрыв строки). Чаще всего он используется для блоков кода, где могут иметь значение интервалы, такие как отступы.
& lt; div & gt;
& lt; h2 & gt; Заголовок & lt; / h2 & gt;
& lt; p & gt; Какой-то абзац, абзац, вещь, штука.& lt; / p & gt;
& lt; / div & gt;
Например, на этом сайте широко используются коды до и с кодом . Блоки кода, такие как приведенный выше, представляют собой элементов кода внутри элементов до . Встроенные ссылки на теги и свойства - это просто элементы кода , часто внутри элементов и для ссылки на раздел справки.
HTML abbr Тег. Узнайте, как размечать сокращенные… | Саманта Минг | The Startup
Стиль по умолчанию немного отличается в разных браузерах.В Chrome и Firefox он будет подчеркнут, а при наведении на него появится всплывающая подсказка с переданным вами значением title .
Текст «TIL» отображается как подчеркнутый
Если вы откроете эту страницу в Safari, подчеркивание не будет. Кроме того, подчеркивание присутствует только в том случае, если у вас есть атрибут title .
Благодаря уникальному тегу он также упрощает настройку стиля. Вы можете сделать что-то вроде этого
abbr {
text-decoration: подчеркивание синим пунктиром;
цвет: синий;
} abbr: hover {
cursor: help;
} GIF, показывающий эффект эффекта «cursor: help»
Из-за кроссбраузерности я бы рекомендовал вам наложить собственный стиль для вашего тега .Таким образом, у вас будет единый вид между браузерами 🤓
Еще в 1997 году велись ожесточенные споры о аббревиатуре и аббревиатуре . Война началась, когда Netscape создал тег , а Microsoft - . Ни одна сторона не хотела сдвинуться с места! И наш посредник, W3C, отказался вмешиваться и занять позицию. Битва продолжалась много лет, в результате чего многие разработчики не знали, что использовать. Похоже, что у Microsoft есть преимущество благодаря доминирующему присутствию Internet Explorer.Но затем появился HTML5 ...
W3C, наконец, решил вмешаться и сказал: «Никто не выигрывает, когда семейные распри, Мы все проигрываем, когда семейные распри, Что может быть лучше, чем один миллиардер? Два »… Оппс, извините, это был текст песни Jay Z's Family Feuds, но я почти уверен, что это было именно так
В любом случае, короче! устарел, поэтому используйте 👍
. Когда вы определяете термин, вы можете заключить его в тег .Поэтому, если вы используете аббревиатуру и объясняете ее, вы можете смешивать эти теги следующим образом:
HTML
< / dfn>
- это стандартный язык разметки для документов, предназначенных для отображения в веб-браузере
.
Вывод примера кода
Семантический HTML важен, потому что он позволяет вам передать смысл вашего кода. Помню, когда я впервые начал изучать программирование, я просто обернул весь свой текст в
Но оборачивание всего тега
😉 Верно! Нужно всегда применять их знания 😎Как разработчики, наша задача - обеспечить доступность нашего веб-сайта или приложения для всех.И способ сделать это - использовать правильный семантический HTML-тег 💛 Точно так же, как если вы работаете в ресторане, вы не откажетесь от платежеспособных клиентов 😆 (это верно, все дело в деньгах! Коммунальные услуги сами себя не окупают )
Итак, я вас всех взволновал, используя HTML . Он семантический и при наведении курсора имеет приятную всплывающую подсказку. Перед тем, как вылить шампанское ... есть небольшая проблема 😅
Проблема с Мобилом. Наведение отлично работает на рабочем столе, где есть указывающее устройство.Но как только вы переключитесь на мобильное устройство, всплывающая подсказка не будет работать. Но не беспокойтесь! Я нашел несколько креативных решений 👏
Решение 1. Отображение не сокращенного термина
Вот очень простое решение. Давайте просто отобразим полный термин без сокращений, когда они будут на экране меньшего размера.
TIL
А с помощью CSS мы берем не сокращенный термин, указанный в атрибуте title , и выводим его на нашу страницу в скобках.
abbr [название] :: после {
content: '(' attr (title) ')';
} Вывод кода для отображения не сокращенного термина
И мы также можем использовать медиа-запросы, чтобы избавиться от не сокращенного термина, когда он достигает большего размера экрана.
@media screen и (min-width: 992px) {
abbr [title] :: after {
content: '';
}
} Кредит: Аурелио Де Роса
Решение 2. Отображение не сокращенного термина с помощью касания
Приятно, что мы отображаем не сокращенный термин на экранах меньшего размера.Но все мы знаем, что на мобильных устройствах недвижимость еще более ранняя, поэтому мы, возможно, не захотим забивать наш экран ненужным текстом. В этом случае мы можем использовать наше состояние hover , чтобы отображать только не сокращенный термин только при нажатии.
abbr [название]: hover :: after {
content: '(' attr (title) ')';
} GIF демонстрирует наведение на сокращенный текст
Мы можем еще улучшить это, добавив поддержку клавиатуры. Мы можем указать, что тег abbr является фокусируемым при последовательной навигации с клавиатуры, с помощью tabindex = "0" , а затем запускать наш не сокращенный контент при фокусировке.
TIL abbr [title]: focus :: after {
content: '(' attr (title) ')';
} Кредит: Ire Aderinokun
Решение 3: всплывающая подсказка JavaScript
Вместо использования CSS вы также можете просто использовать JavaScript для запуска всплывающей подсказки. Если вы используете Bootstrap, вы можете использовать компонент Tooltips.
Определенно было бы неплохо, если бы существовало собственное решение для устранения проблем на мобильных или не указывающих устройствах.К сожалению, в настоящее время нет. Но семантический HTML по-прежнему очень важен, и, как разработчики, мы должны делать все возможное, чтобы использовать его, когда это возможно. На данный момент нам просто нужно понять проблемы и использовать наши творческие соки, чтобы их обойти. Семантический HTML полностью !!! 🏆
Таблица, показывающая, что браузеры полностью поддерживают Chrome, Firefox, Safari, Edge и Internet Explorer
HTML атрибут abbr - учебные пособия по HTML
abbr
p Назначение атрибута HTML abbr - указать аббревиатуру для ячейки заголовка таблицы.
Поддерживаемые элементы
HTML атрибут abbr поддерживает td и th.
Синтаксис
.....
.....
Тип значения
Тип значения атрибута HTML abbr - текст.
Значение
Строка / текст, задающая сокращенный текст.
Значение по умолчанию
Нет значения по умолчанию для атрибута HTML abbr.
Поддерживаемые типы документов
HTML 4.01 строгий, HTML 4.01 переходный, набор фреймов HTML 4.01.
Пример HTML-атрибута abbr с td
abbr td пример
<таблица>
Великобритания
Столица - Лондон.
США
Столица - Вашингтон, округ Колумбия
Результат
Посмотреть этот пример в отдельном окне браузера
Пример HTML-атрибута abbr с td.
Пример HTML-атрибута abbr с th
Документ без названия
Страна
Столица государства
Великобритания
Столица - Лондон.
США
Столица - Вашингтон, округ Колумбия
Результат
Посмотреть этот пример в отдельном окне браузера
Пример HTML-атрибута abbr с th.
Предыдущий: Что такое атрибут HTML
Следующий: Атрибут accept-charset HTML
против - Бен Медоукрофт.com
Если вы недавно читали спецификацию HTML 4, пытаясь понять разницу между элементами abbr и acronym, возможно, вы немного запутались, я знаю. Эта статья содержит объяснение разницы между двумя тегами и объяснение того, когда уместно использовать один или другой. Тогда первым делом нужно объяснить, что означает каждое из слов, для этого я воспользовался помощью своего надежного словаря.
- сокращение
- Сокращенная форма слова или фразы, используемая в основном в письменной форме для представления полной формы; например, У.K. для Соединенного Королевства. Сравните сокращение.
- аббревиатура
- Слово, образованное начальными частями имени, например НАТО от Организации Североатлантического договора или Комминтерн от Коммунистического Интернационала.
Из приведенных выше определений ясно, что аббревиатура - это особый класс аббревиатуры, аббревиатура - более общий из двух. Однако спецификация HTML весьма непоследовательна в использовании примеров для этих двух элементов.
Код HTML 4.01 Спецификация (раздел 9.2.1) утверждает:
Элементы ABBR и ACRONYM позволяют авторам четко указывать случаи появления сокращений и акронимов. В западных языках широко используются такие сокращения, как «GmbH», «NATO» и «F.B.I.», а также такие сокращения, как «M.», «Inc.», «et al.», «И т. Д.»
Как можно видеть, несоответствие между определением акронима в W3 и словарным определением может быть трудно определить из приведенного выше текста. Чтобы еще немного прояснить этот вопрос, я дам еще одно определение.
- инициализм
- Аббревиатура фразы, состоящая из начальной буквы каждого слова во фразе; отличается от аббревиатуры тем, что не произносится как отдельное слово; например, B.B.C., C.I.A.
Теперь это указывает на несоответствие (между определением спецификации и определением, используемым на английском языке) в спецификации W3. В спецификации приведены примеры использования тега акронима с инициализмами, такими как F.B.I. , когда словарное определение инициализма четко отличает его от акронима.
Некоторые примеры использования
и Классы добавлены для поддержки стилизации элементов с использованием таблиц стилей, они не добавляют никакой семантики таким же образом, я использовал осмысленные имена, поскольку они полезны с точки зрения разработки. CSS Элемент аббревиатуры
Комминтерн
НАТО Элемент Abbreviation (с несколькими классами)
CSS
HTML
евро Звуковое оформление этих элементов с использованием
акроним {говорить: нормальный;}
сокр.