Working With Abbr And Address Tags in HTML5

<abbr> (Abbreviation)

First I want to explain the meaning of abbreviation; it is "A shortened form of a word or phrase". An abbreviation is used in HTML5 to clearly indicate to the reader the sequence of Characters. In short, it provides a brief description of the cell content. When you hover your mouse over abbreviation text then you will see the full detail of abbreviation. It is an inline element and it can also use other inline elements. For example (such as USA of United States of America, UAE of United Arab Emirates, WWW if World Wide Web, Mr. instead of Mister, or Calif instead of California). Most browsers render an <abbr> tag with a dotted line.

Syntax

<abbr
class="class name(s)"
dir="ltr | rtl"
id="unique alphanumeric identifier"
lang="language code"
style="style information"
title="advisory text">
</abbr>

Attributes Introduced by HTML5

accesskey="spaced list of accelerator key(s)"
contenteditable="true | false | inherit"
contextmenu="id of menu"
data-X="user-defined data"
draggable="true | false | auto"
hidden="hidden"
itemid="microdata id in URL format"
itemprop="microdata value"
itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope"
itemtype="microdata type in URL format"
spellcheck="true | false"
tabindex="number"

Attributes Defined by Internet Explorer

accesskey="key" (5.5)
contenteditable="false | true | inherit" (5.5)
disabled="false | true" (5.5)
hidefocus="true | false" (5.5)
language="javascript | jscript | vbs | vbscript" (4)
tabindex="number" (5.5)
unselectable="on | off" (5.5)
 
HTML5 Event Attributes

onabort, onblur, oncanplay, oncanplaythrough, onchange, onclick,oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave,ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended,onerror, onfocus, onformchange, onforminput, oninput, oninvalid, onkeydown,onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart,onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel,onpause, onplay, onplaying, onprogress, onratechange, onreadystatechange,onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit,onsuspend, ontimeupdate, onvolumechange, onwaiting

Events Defined by Internet Explorer

onactivate, onbeforedeactivate, onbeforeeditfocus, onblur, onclick,oncontrolselect, ondblclick, ondeactivate, ondrag, ondragend, ondragenter,ondragleave, ondragover, ondragstart, ondrop, onfocus, onhelp, onkeydown,onkeypress, onkeyup, onlosecapture, onmousedown, onmouseenter, onmouseleave,onmousemove, onmouseout, onmouseover, onmouseup, onmove, onmoveend,onmovestart, onreadystatechange, onresizeend, onresizestart, onselectstart

Examples

    <p>
        <abbr title="California" style="color: Blue; font: 22px">
            Calif</abbr></p>
    <p>
        <abbr>
            WWW</abbr></p>
    <p>
        <abbr title="United States of America" style="color: Red; font-size: 20">
            USA</abbr></p>

<address> (Address)

An Address tag is used to display contact information of authorship or ownership. It's default style is the italics font style in the absence of Cascading Style Sheet (CSS). An <address> tag may not contain another <address> tag. It is usually used in a header or footer of the webpage. The <address> tag cannot contain <article>, <aside>, <nav>, <section>, <header>, <footer>, <hgroup>, <h1>-<h6> or other <address> elements.

Syntax

<address
class="class name(s)"
dir="ltr | rtl"
id="unique alphanumeric identifier"
lang="language code"
style="style information"
title="advisory text">
</address>

Attributes Introduced by HTML5

accesskey="spaced list of accelerator key(s)"
contenteditable="true | false | inherit"
contextmenu="id of menu"
data-X="user-defined data"
draggable="true | false | auto"
hidden="hidden"
itemid="microdata id in URL format"
itemprop="microdata value"
itemref="space-separated list of IDs that may contain microdata"
itemscope="itemscope"
itemtype="microdata type in URL format"
spellcheck="true | false"
tabindex="number"


Attributes Defined by Internet Explorer

accesskey="key" (5.5)
contenteditable="inherit | false | true" (5.5)
disabled="false | true" (5.5)
hidefocus="true | false" (5.5)
language="javascript | jscript | vbs | vbscript" (4)
tabindex="number" (5.5)
unselectable="off | on" (5.5)

Events Defined by Internet Explorer

onactivate, onbeforeactivate, onbeforecopy, onbeforecut, onbeforedeactivate, onbeforeeditfocus, onbeforepaste, onblur, onclick, oncontextmenu, oncontrolselect, oncopy, oncut, ondblclick, ondeactivate, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onfocus, onfocusin, onfocusout, onhelp, onkeypress, onkeyup, onlosecapture, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout,

onmouseover, onmouseup, onmousewheel, onmove, onmoveend, onmovestart, onpaste, onpropertychange, onreadystatechange, onresize, onresizeend, onresizestart, onselectstart, ontimeerror.

Example

<address>
            MCN Solution Pvt. Ltd.<br>
            H-217, Second Floor<br>
            Sector-63, Noida 201301<br>
            India<br>
            <a style="text-decoration: none" href="http://mail.mcnsolutions.net:8383">Email us</a>
        </address>

Code:

<!DOCTYPE>
<html>
<head>
    <title></title>
</head>
<body style="background: silver">
    <p>
        <abbr title="California" style="color: Blue; font: 22px">
            Calif</abbr></p>
    <p>
        <abbr>
            WWW</abbr></p>
    <p>
        <abbr title="United States of America" style="color: Red; font-size: 20">
            USA</abbr></p>
    <h4>
        Address:<address>
            MCN Solution Pvt. Ltd.<br>
            H-217, Second Floor<br>
            Sector-63, Noida 201301<br>
            India<br>
            <a style="text-decoration: none" href="http://mail.mcnsolutions.net:8383">Email us</a>
        </address>
    </h4>
</body>
</html>

Output:

Internet Explorer



Google Chrome



Mozilla FireFox