Html аббревиатуры. Менее известные семантические элементы. Билли, который не любит W3C

Элемент аббревиатуры HTML () представляет собой аббревиатуру или аббревиатуру; необязательный атрибут title может предоставить расширение или описание аббревиатуры. Если присутствует, title должен содержать это полное описание и ничего больше.

Статья Как отметить сокращения и сделать их понятными - это руководство по обучению использованию и связанных с ним элементов.

Атрибуты

Этот элемент поддерживает только глобальные атрибуты . Атрибут title имеет специфический смысловый смысл при использовании с элементом ; он должен содержать полное понятное для человека описание или расширение аббревиатуры. Этот текст часто отображается браузерами в виде подсказки, когда курсор мыши витает над элементом.

Каждый элемент вы используете, не зависит от всех остальных; предоставление title для одного не автоматически присоединяет тот же текст расширения к другим с тем же текстом контента.

Замечания по использованию

Типичные варианты использования

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

Грамматические соображения

В языках с грамматическим числом (то есть, на языках, где количество элементов влияет на грамматику предложения), используйте один и тот же грамматический номер в атрибуте title как внутри вашего элемента . Это особенно важно на языках с более чем двумя номерами, таких как арабский, но также актуальным на английском языке.

Стиль по умолчанию

Цель этого элемента - исключительно для удобства автора, и все браузеры отображают его встроенный (display : inline) по умолчанию, хотя его стиль по умолчанию варьируется от одного браузера к другому:

  • Некоторые браузеры, такие как Internet Explorer, не строят его иначе, чем элемент .
  • Opera, Firefox и некоторые другие добавляют пунктирную черту к содержимому элемента.
  • Несколько браузеров не только добавляют пунктирное подчеркивание, но и помещают его в маленькие кепки; чтобы избежать этого стиля, добавив что-то вроде font-variant : none в CSS не позаботится об этом случае.

Примеры

Маркировка аббревиатуры семантически

Чтобы пометить аббревиатуру без предоставления расширения или описания, просто используйте без каких-либо атрибутов, как показано в этом примере.

HTML

Using HTML is fun and easy!

результат

Условные сокращения

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

HTML

Using CSS, you can style your abbreviations!

CSS

abbr { font-variant: all-small-caps; }

результат

Обеспечение расширения

Добавление атрибута title позволяет указать расширение или определение аббревиатуры или аббревиатуры.

HTML

Ashok"s joke made me LOL big time.

результат

Определение аббревиатуры

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

HTML

HTML is a markup language used to create the semantics and structure of a web page.

A Specification (spec) is a document that outlines in detail how a technology or APIis intended to fun ction and how it is accessed.

результат

Доступность

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

пример

JavaScript Object Notation (JSON) is a lightweight data-interchange format.

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

Характеристики

Совместимость с браузером

Особенность Веб-просмотр Android Chrome для Android Edge mobile Firefox для Android Операционная система Android iOS Safari Интернет-магазин Samsung
Базовая поддержка да да да 4 да да да

1. До Firefox 4 этот элемент реализовал интерфейс HTMLSpanElement вместо стандартного интерфейса HTMLElement .

Давайте обратим свои взоры к теме сокращений на веб-страницах, а точнее понятности этих сокращений читателям. В данной статье рассматриваются теги abbr и acronym и нюансы, связанные с ними.

Внимание!!! В спецификации HTML5 элемент acronym объявлен полностью устаревшим и его настоятельно рекомендуют исключить из употребления. Взамен предлагается использовать элемент abbr (уточнения от 10.11.2011) .

Разбираемся с терминалогией

Аббревиатура (итальянское abbreviatura - сокращение, от латинского abbrevio - сокращаю) - это сокращённая форма слова или группы слов, используемая вместо целого слова или словосочетания. Например: WWW , HTTP , URI , abbr. и др. Акроним (греч. akros - высокий, onyma - имя) - это аббревиатура, образованная из частей слов исходного словосочетания (обычно начальных букв), произносимая как единое слово, а не побуквенно, как остальные виды аббревиатур. Например: modem , radar , или laser .

Аббревиатуры и акронимы должны быть понятны всем и всегда

Довольно часто мы используем различные сокращения, начиная от " замкомпоморде ", и заканчивая " ЖОПА " (это совсем не то, о чем вы подумали). Но также, давольно часто, многие люди не имеют понятия о том, что эти сокращения означают. Поэтому, используя какой-либо термин являющийся аббревиатурой или акронимом, нужно давать им пояснения. Причем если вы ввели термин вначале, растолковав его, то это не значит, что человек не забудет его смысл через 2 минуты, по этому пояснения должны быть всегда рядом.

HTML теги и

HTML 4 предоставляет нам два элемента логического форматирования, используемых для выделения аббревиатур и акронимов - abbr и acronym , соответственно. У данных тегов есть атрибут title в котором дается разъяснение термина. Любой нормальный браузер при наведении курсора мыши на такой термин отобразит всплывающую подсказку, заданную атрибутом title .

Пример: WWW Modem

WWW Modem

Билли, который не любит W3C

IE (вплоть до 6 версии) не поддерживает тег ABBR (извините, что так сразу, без подготовки :-)

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

Конечно, можно махнуть на это рукой и использовать вместо тега abbr тег acronym , но тогда не удивляйтесь если голосовой агент пользователя будет произносить буквенную аббревиатуру УРИ не побуквенно, а одним словом, и получится имя Ури из Х/Ф "Приключения электроника" . Но можно найти и обходной путь, например, вставить внутрь ABBR элемент SPAN:

CSS

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

Наводим CSS-марафет

Так как abbr и acronym элементы логического форматирования, то браузеры могут по разному отображать их на странице. Например, Mozilla Firefox и Opera отображают данные элементы с черным подчеркиванием в виде точек, Konqueror - выделяет курсивом, а IE никак визуально не выделяет (acronym).

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

Например, так:

ABBR, ACRONYM {
border-bottom: 1px dotted #F04B2D;
cursor: help;
font-style: italic;

ТЭГ

термоэлектрический генератор

техн.

Словарь: С. Фадеев. Словарь сокращений современного русского языка. - С.-Пб.: Политехника, 1997. - 527 с.

ТЭГ

триэтиленгликоль

ТЭГ

тромбоэластограмма

мед.

Источник: http://cardio-burg.ru/magazin/magazin.php?nnn=2000_2&cont=20002s8

ТЭГ

терапевтический эвакуационный госпиталь

мед.

Словарь: Словарь сокращений и аббревиатур армии и спецслужб. Сост. А. А. Щелоков. - М.: ООО «Издательство АСТ», ЗАО «Издательский дом Гелеос», 2003. - 318 с.


Словарь сокращений и аббревиатур . Академик . 2015 .

Синонимы :

Смотреть что такое "ТЭГ" в других словарях:

    Тэг - (тэг, англ. tag «ярлык, этикетка, бирка; метить») метка как ключевое слово, в более узком применении идентификатор, для категоризации, описания и поиска данных, задания внутренней структуры. Примеры применения: Элемент языка разметки… … Википедия

    тэг - сущ., кол во синонимов: 3 дескриптор (5) таг (2) ярлык (25) Словарь синонимов ASIS. В.Н. Тришин … Словарь синонимов

    Тэг - п. в Сыктывдинском р не. Назван по р. Тэгъю, прав, притоку Вычегды, возле которого расположен: коми тэг «сера», ю «река». Тэгъю «река, возле которой имеются выходы серы». В этом районе раньше добывали природную серу для хозяйственных надобностей… … Топонимический словарь Республики Коми

    ТЭГ - 3.1.45 ТЭГ (tag): Служебный элемент, который размещен в начале заголовка и хранится вместе с данными, не может быть использован как самостоятельный элемент. Источник … Словарь-справочник терминов нормативно-технической документации

    ТЭГ - см. Термоэлектрический генератор … Большой энциклопедический политехнический словарь

    ТЭГ - … Википедия

    ТЭГ - термоэлектрический генератор … Словарь сокращений русского языка

    тэг идентификатора протокола - — [ГОСТ Р 54325 2011 (IEC/TS 61850 2:2003)]] Тематики релейная защита EN tag protocol identifierTPID … Справочник технического переводчика

    Ай-Тэг-Юган - Характеристика Длина 35 км Бассейн Карское море Водоток Устье 33 км по левому берегу протока Могот Лейм Посл Расположение … Википедия

    Термоэлектрический генератор - (ТЭГ) термоэлектрогенератор, устройство для прямого преобразования тепловой энергии в электрическую, принцип действия которого основан на эффекте Зеебека (см. Термоэлектрические явления). В состав ТЭГ входят: термобатареи, набранные из… … Большая советская энциклопедия

Элемент code используется для указания компьютерного кода или языка программирования, такого как PHP , JavaScript, CSS , XML и т.д. Для кратких фрагментов внутри предложения можно просто разместить элемент вокруг фрагмента кода следующим образом:

onclick directly in the HTML.

Для более значительных образцов кода, которые занимают несколько строк, можно использовать предварительно форматированные блоки, как показано в "лекции 15" , "Разметка текстового контента в HTML ".

Хотя не существует определенного метода указания, какой язык программирования или код показан в элементе code , можно использовать атрибут class . Обычная практика (упомянутая в проекте HTML 5) состоит в использовании префикса language- и затем добавлении названия языка. Поэтому пример выше будет выглядеть следующим образом:

It is bad form to use event handlers like onclick directly in the HTML.

Некоторые языки программирования имеют названия, которые не так просто представить в классах, такие как C# (C-шарп). Правильный способ записи в этом случае будет "class="language-c\#"" , что может создавать трудности и приводить к опечаткам. Я бы рекомендовал использовать класс , состоящий только из букв и дефисов, и записывать его полностью. Поэтому в данном случае используйте лучше "class="language-csharp"" .

Вывод взаимодействия с компьютером

Два элемента samp и kbd можно использовать для ввода и вывода взаимодействия с компьютерной программой. Например:

One common method of determining if a computer is connected to the internet is to use the computer program ping to see if a computer likely to be running is reachable.

kittaghy% ping -o google.com
 PING google.com (64.233.187.99): 56 data bytes
 64 bytes from 64.233.187.99: icmp_seq=0 ttl=242 time=108.995 ms
 --- google.com ping statistics ---
 1 packets transmitted, 1 packets received, 0% packet loss
 round-trip min/avg/max/stddev = 108.995/108.995/108.995/0.000 ms
 

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

Элемент kbd указывает ввод взаимодействия пользователя с компьютером. Хотя это традиционно ввод с клавиатуры (поэтому используется сокращение "kbd" ), он должен также использоваться для указания других типов ввода, таких как ввод с голоса.

Переменные

Элемент var используется для указания переменных в текстовом контенте. Он может включать алгебраические математические выражения или находиться в программном коде. Например:

The value of x in 3x+2=14 is 4.


my $welcome = "Hello world!";

Цитирование

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

The saying Everything should be made as simple as possible, but not simpler is often attributed to Albert Einstein, but it actually a paraphrasing of a quote which is much less easy to understand.

Веб сегодня все больше и больше семантический. Но что означает «семантический»? Почему это важно?

Семантический HTML выражает значение документа. Он больше о том, чем является текст, чем о том, как он выглядит. Хорошая семантическая разметка помогает и человеку и компьютеру лучше понять содержимое документа и его контекст.

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

Ок, итак семантическая разметка - это хорошо, но как ее использовать. Лучше всего начать с замены обычных тегов на более выразительные. Давайте посмотрим восемь элементов, которые позволят вам войти в эту игру.

Подобно своему блочному двоюродному брату
, тег используется для обозначения цитирования.

Почему же просто не использовать кавычки? Кавычки не всегда подразумевают цитирование. Иногда они используются для смыслового выделения, иронии или обозначения названия чего-либо - и в этом контексте, они используются правильно. Однако, если вы цитируете что-то, явно выражает ваше намерение.

и

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

В HTML5, наконец, эти теги получили отличную семантическую интерпретацию. Тегом помечается текст, у которого отличается тон или настроение. Это полезно, например, для описания мыслей или технических терминов. Тег помечает текст, который стилистически отличается от обычного текста, но не имеет какого-либо выделенного семантического значения. Чем это отличается от использования ? Ключ в том, что не несет какого-либо семантически отличного смысла.

используется для сокращений! Он может быть особенно полезен в документах, где их много. У этого тега есть необязательный атрибут title , в котором можно указать полную версию текста.

lol idk g2g ttyl

Давайте взглянем на классическую проблему локализации дат. В США 5 октября 2013 года записывается как 10/05/13, в Британии это 05/10/13, в Южной Африке это 2013/10/05, в России это 05.10.13. Все эти варианты делают чрезвычайно трудной задачу автоматического распознавания дат.

Тег позволяет указывать дату и время в машинночитаемом формате. Предыдущий пример мог бы выглядеть примерно так: . HTML-парсеры смогут точно понять дату, несмотря на то, в каком формате мы ее указали. Тег также позволяет опционально указывать время в 24-м формате: ;

Когда-нибудь так делали?

Three hundred pages of boring, useless text. The one thing you need to know and will never be able to find again if you don"t highlight it. More boring stuff…


Больше не надо. В HTML5 появился элемент , которым помечается текст, выделенный для справочных целей из-за его высокой важности.

Да, . Вы, вероятно, используете , , может быть даже , а вы когда-нибудь использовали другие типы? В HTML5 может использовать с целой кучей новых типов:
  • email
  • number
  • range
  • search
  • color
Это здорово, но сначала необходимо убедиться, что ваши целевые браузеры все это поддерживают. С этим пока проблема.

Вы когда-нибудь делали меню из ненумерованного списка?

Больше так не делайте! Для этого есть

, который представляет собой неупорядоченый список команд. У этого тега есть атрибут type , который может принимать значения: popup или toolbar .

  • Open
  • Save
  • Quit
  • Бонус

    Большинство фронтенд-разработчиков используют при написании HTML, но многие не знают его истинного значения. Неразрывный пробел не разрывает строку. Это означает, что если два слова соединены неразрывным пробелом, они всегда будут вместе на одной строке. Иногда это очень важно. Вот несколько примеров:
    • Единицы измерения: 12 m/s
    • Время: 8 PM
    • Имена собственные: Dairy Queen
    Так же существует неразрывный дефис (), для аналогичных целей.

    В заключение

    HTML день ото дня становится все более и более семантическим. Использование всех этих элементов - неплохой старт для написания более доступной понятной разметки. Для более полной картины гляньте Windows