Post
Ask Question

Working With Abbr And Address Tags in HTML5

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 the USA of United States of America, UAE of United Arab Emirates, WWW if the World Wide Web, Mr. instead of Mister, or Calif instead of California). Most browsers render an <abbr> tag with a dotted line.
 
Syntax
  1. <abbr  
  2. class="class name(s)"  
  3. dir="ltr | rtl"  
  4. id="unique alphanumeric identifier"  
  5. lang="language code"  
  6. style="style information"  
  7. title="advisory text"></abbr>  
Attributes Introduced by HTML5
  1. accesskey="spaced list of accelerator key(s)"  
  2. contenteditable="true | false | inherit"  
  3. contextmenu="id of menu"  
  4. data-X="user-defined data"  
  5. draggable="true | false | auto"  
  6. hidden="hidden"  
  7. itemid="microdata id in URL format"  
  8. itemprop="microdata value"  
  9. itemref="space-separated list of IDs that may contain microdata"  
  10. itemscope="itemscope"  
  11. itemtype="microdata type in URL format"  
  12. spellcheck="true | false"  
  13. tabindex="number"  
Attributes Defined by Internet Explorer
  1. accesskey="key" (5.5)  
  2. contenteditable="false | true | inherit" (5.5)  
  3. disabled="false | true" (5.5)  
  4. hidefocus="true | false" (5.5)  
  5. language="javascript | jscript | vbs | vbscript" (4)  
  6. tabindex="number" (5.5)  
  7. 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   
  1. <p>  
  2.     <abbr title="California" style="color: Blue; font: 22px">  
  3.             Calif</abbr>  
  4. </p>  
  5. <p>  
  6.     <abbr>  
  7.             WWW</abbr>  
  8. </p>  
  9. <p>  
  10.     <abbr title="United States of America" style="color: Red; font-size: 20">  
  11.             USA</abbr>  
  12. </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
  1. <address  
  2. class="class name(s)"  
  3. dir="ltr | rtl"  
  4. id="unique alphanumeric identifier"  
  5. lang="language code"  
  6. style="style information"  
  7. title="advisory text"></address>  
Attributes Introduced by HTML5
  1. accesskey="spaced list of accelerator key(s)"  
  2. contenteditable="true | false | inherit"  
  3. contextmenu="id of menu"  
  4. data-X="user-defined data"  
  5. draggable="true | false | auto"  
  6. hidden="hidden"  
  7. itemid="microdata id in URL format"  
  8. itemprop="microdata value"  
  9. itemref="space-separated list of IDs that may contain microdata"  
  10. itemscope="itemscope"  
  11. itemtype="microdata type in URL format"  
  12. spellcheck="true | false"  
  13. tabindex="number"  
Attributes Defined by Internet Explorer
  1. accesskey = "key"(5.5)  
  2. contenteditable = "inherit | false | true"(5.5)  
  3. disabled = "false | true"(5.5)  
  4. hidefocus = "true | false"(5.5)  
  5. language = "javascript | jscript | vbs | vbscript"(4)  
  6. tabindex = "number"(5.5)  
  7. 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
  1. <address>  
  2.             MCN Solution Pvt. Ltd.  
  3.     <br>  
  4.             H-217, Second Floor  
  5.         <br>  
  6.             Sector-63, Noida 201301  
  7.             <br>  
  8.             India  
  9.                 <br>  
  10.                     <a style="text-decoration: none" href="http://mail.mcnsolutions.net:8383">Email us</a>  
  11.                 </address>  
Code:
  1. <!DOCTYPE>  
  2. <html>  
  3.     <head>  
  4.         <title></title>  
  5.     </head>  
  6.     <body style="background: silver">  
  7.         <p>  
  8.             <abbr title="California" style="color: Blue; font: 22px">  
  9.             Calif</abbr>  
  10.         </p>  
  11.         <p>  
  12.             <abbr>  
  13.             WWW</abbr>  
  14.         </p>  
  15.         <p>  
  16.             <abbr title="United States of America" style="color: Red; font-size: 20">  
  17.             USA</abbr>  
  18.         </p>  
  19.         <h4>  
  20.         Address:  
  21.             <address>  
  22.             MCN Solution Pvt. Ltd.  
  23.                 <br>  
  24.             H-217, Second Floor  
  25.                     <br>  
  26.             Sector-63, Noida 201301  
  27.                         <br>  
  28.             India  
  29.                             <br>  
  30.                                 <a style="text-decoration: none" href="http://mail.mcnsolutions.net:8383">Email us</a>  
  31.                             </address>  
  32.                         </h4>  
  33.                     </body>  
  34.                 </html>  
Output:
 
Internet Explorer
 
ie1.gif
 
Google Chrome
 
Chrome1dfgfd.gif
 
Mozilla Firefox
 
m1.gif


Similar Articles