• Abbreviations and acronyms in HTML. Lesser known semantic elements See what "TAG" is in other dictionaries

    The web today is more and more semantic. But what does "semantic" mean? Why is it important?

    Semantic HTML expresses the meaning of a document. It's more about what the text is than how it looks. Good semantic markup helps both humans and computers better understand the content of a document and its context.

    Semantic markup is much easier to interpret. It is search engine optimization friendly. Works great with modern browsers, reduces the amount of code needed to express content and improves the readability of that code.

    Ok, so semantic markup is good, but how to use it. The best place to start is by replacing the regular tags with more expressive ones. Let's see eight elements that will allow you to enter this game.

    Like your blocky cousin
    , tag used to indicate a citation.

    Why not just use quotes? Quotation marks do not always imply quoting. Sometimes they are used for semantic emphasis, irony, or to denote the name of something - and in this context, they are used correctly. However, if you are quoting something, clearly expresses your intent.

    And

    In the good old days, tags And denoted the text highlighted, respectively, in italics and bold. As the idea of ​​decoupling semantics from presentation gained momentum, these tags began to be viewed with suspicion. They were replaced with tags And denoting respectively emphasis and strong emphasis.

    In HTML5, these tags finally get a great semantic interpretation. tag marked text that has a different tone or mood. This is useful, for example, for describing thoughts or technical terms. Tag marks text that is stylistically different from normal text but does not have any emphasized semantic meaning. How is this different from using ? The key is that does not carry any semantically distinct meaning.

    used for abbreviations! It can be especially useful in documents where there are a lot of them. This tag has an optional attribute title, in which you can specify the full version of the text.

    lol idk g2g ttyl

    Let's take a look at the classic date localization problem. In the US October 5, 2013 is written as 10/05/13, in Britain it is 05/10/13, in South Africa it is 2013/10/05, in Russia it is 05/10/13. All of these options make the task of automatically recognizing dates extremely difficult.

    Tag allows you to specify the date and time in a machine-readable format. The previous example could look something like this: . HTML parsers will be able to accurately understand the date, no matter what format we specify it in. Tag also allows you to optionally specify the time in 24th format: ;

    Ever done this?

    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…


    No more. HTML5 introduced the element , which marks text that is highlighted for reference purposes because of its high importance.

    Yes, . You are probably using , maybe even , have you ever used other types? In HTML5 can be used with a whole bunch of new types:
    • email
    • number
    • range
    • search
    • color
    This is great, but first you need to make sure that your target browsers support all this. This is still a problem.

    Have you ever made a menu from an unordered list?

    • open
    • Save
    • Quit

    Don't do that again! For this there is

    , which is an unordered list of commands. This tag has an attribute type, which can take the values: popup or toolbar.

  • open
  • Save
  • Quit
    •

    Bonus

    Most front-end developers use HTML when writing, but many do not know its true meaning. A non-breaking space does not break a line. This means that if two words are joined by a non-breaking space, they will always be together on the same line. Sometimes this is very important. Here are some examples:
    • Units: 12m/s
    • Time: 8 PM
    • Proper names: Dairy Queen
    There is also a non-breaking hyphen ( ‑ ) for similar purposes.

    Finally

    HTML is becoming more and more semantic day by day. Using all of these elements is a good start to writing more accessible markup. For a fuller picture, take a look

    Element HTML abbreviations () is an abbreviation or abbreviation; The optional title attribute can provide an extension or description for the abbreviation. If present, the title must contain this full description and nothing else.

    Article How to mark abbreviations and make them understandable is a tutorial for learning how to use and related items.

    Attributes

    This element only supports global attributes . The title attribute has a specific meaning when used with an element ; He must contain a full human-readable description or extension of the abbreviation. This text is often displayed as a tooltip by browsers when the mouse cursor hovers over an element.

    Each element you use, does not depend on everyone else; providing a title for one does not automatically append the same extension text to others with the same content text.

    Usage Notes

    Typical use cases

    Of course, it is not required that all abbreviations be marked with . However, there are a few cases where this is useful:

    Grammar considerations

    In languages ​​with grammatical number (that is, languages ​​where the number of elements affects the grammar of the sentence), use the same grammatical number in the title attribute as inside your element . This is especially important in languages ​​with more than two numbers, such as Arabic, but is also relevant in English.

    Default style

    The purpose of this element is purely for the convenience of the author, and all browsers display it inline ( display : inline ) by default, although its default style varies from one browser to another:

    • Some browsers, such as Internet Explorer, do not build it differently than the element .
    • Opera, Firefox, and a few others add dashes to the content of an element.
    • Several browsers not only add the dashed underline, but also put it in little caps; to avoid this style, adding something like font-variant : none in CSS won't take care of this case.

    Examples

    Marking an abbreviation semantically

    To tag an abbreviation without providing an extension or description, simply use without any attributes, as shown in this example.

    HTML

    Using HTML is fun and easy!

    result

    Conditional abbreviations

    You can use CSS to set a custom style that will be used for the abbreviations, as seen in this simple example.

    HTML

    Using css, you can style your abbreviations!

    css

    abbr ( font-variant: all-small-caps; )

    result

    Ensuring expansion

    Adding a title attribute allows you to specify an extension or definition for an abbreviation or abbreviation.

    HTML

    Ashok's joke made me lol big time.

    result

    Abbreviation Definition

    you can use in tandem with for a more formal definition of the abbreviation, as shown here.

    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 function and how it is accessed.

    result

    Availability

    A full description of an acronym or acronym the first time it is used on a page helps people understand it, especially if the content is technical or industry jargon.

    example

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

    This is especially helpful for people who are unfamiliar with the terminology or concepts discussed in the content, people who are new to the language, and people with cognitive problems.

    Characteristics

    Browser Compatibility

    PeculiarityAndroid webviewChrome for Androidedge mobileFirefox for AndroidAndroid operating systemiOS SafariSamsung Online Store
    Basic supportYesYesYes 4 YesYesYes

    1. Prior to Firefox 4, this element implemented the HTMLSpanElement interface instead of the standard HTMLElement interface.

    Description

    Tag indicates that the character sequence is an abbreviation. With the help of the title attribute, a transcript of the abbreviation is given, which makes it possible to understand the abbreviation for those people who are not familiar with it. In addition, search engines index the full-text version of the abbreviation, which can be used to increase the ranking of the document.

    Browsers don't highlight text inside , with the exception of Opera prior to version 15, which adds a dashed underline to text.

    Syntax

    Text

    Attributes

    Adds a tooltip to the text in which you can give an explanation of the abbreviation.

    Closing tag

    Required.

    HTML5 IE Cr Op Sa Fx

    ABBR tag

    CGI denotes the protocol by which any external program interacts with the web server. Using CGI on the server, you can execute programs in any programming language and display the result of their action as a web page.

    The result of this example is shown in Fig. 1.

    Rice. 1. Type of tooltip when hovering the mouse over the abbreviation text

    Browsers

    Internet Explorer up to and including version 6 does not support the tag , instead it is recommended to use the tag .

    Let's turn our attention to the topic of abbreviations on web pages, or rather the comprehensibility of these abbreviations to readers. This article discusses the abbr and acronym tags and the nuances associated with them.

    Attention!!! In the HTML5 specification, the element acronym declared completely obsolete and strongly recommended to be removed from use. Instead, it is proposed to use the element abbr(clarifications from 11/10/2011) .

    Getting to grips with terminology

    An abbreviation (Italian abbreviatura - abbreviation, from Latin abbrevio - I cut) is an abbreviated form of a word or group of words used instead of a whole word or phrase. For example: WWW , HTTP , URI , abbr. etc. An acronym (Greek akros - high, onima - name) is an abbreviation formed from parts of the words of the original phrase (usually initial letters), pronounced as a single word, and not letter by letter, like other types of abbreviations. For example: modem , radar , or laser .

    Abbreviations and acronyms should be clear to everyone and always

    Quite often, we use various abbreviations, ranging from "zamkompomorde" to "ASS" (this is not at all what you think). But also, quite often, many people have no idea what these abbreviations mean. Therefore, using any term that is an abbreviation or acronym, you need to give them explanations. Moreover, if you entered the term at the beginning, having explained it, this does not mean that a person will not forget its meaning in 2 minutes, so explanations should always be nearby.

    HTML tags And

    HTML 4 provides us with two logical formatting elements used to highlight abbreviations and acronyms - abbr and acronym , respectively. These tags have a title attribute that explains the term. Any normal browser will display the tooltip specified by the title attribute when hovering the mouse over such a term.

    Example: WWW Modem

    www modem

    Billy who doesn't like W3C

    IE (up to version 6) does not support the ABBR tag(sorry for this so soon, without preparation :-)

    In the list of elements familiar to him, only the element ACRONYM is indicated. But I am sure that this will be fixed in the seventh version of the browser.

    Of course, you can give up on this and use the acronym tag instead of the abbr tag, but then don't be surprised if the user's voice agent pronounces the letter abbreviation URI not letter by letter, but in one word, and you get the name Uri from the film / f "Adventures of Electronics". But you can also find a workaround, for example, insert a SPAN element inside the ABBR:

    css

    And it is better to automate this process by performing inserts using a script, after loading the document and only for IE. And what is very important, there will be no need to change correct the original text of the document.

    Setting up a CSS marathon

    Because abbr and acronym are logical formatting elements, browsers may display them differently on the page. For example, Mozilla Firefox and Opera display these elements with a black underline as dots, Konqueror italicizes these elements, and IE does not visually highlight them (acronym).

    Therefore, it does not hurt to set styles that would unify the display of these elements in different browsers.

    For example, like this:

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

    Read more: