Post
Ask Question

Some Unique, Uncommon But Very Useful HTML Elements (Tags)

 
In this article we will explore some of the unique and quite useful html tags which are ignored or less common among web designers or developers. However, they put in extra effort to achieve the same results even though they already have useful elements available.
 

Address (<address>)

 
Almost every website is using some kind address in their pages where they display business or author address with email, phone, url, physical address, and other details. Normally, we use div tag to display address, however we miss the address which is basically for this purpose. The Address <address> element usually renders in italics and the browser adds a line break before and after this tag.
 
Example
  1. <address>    
  2.    Written by <a href="mailto:[email protected]">Rijwan Ansari</a>.<br>     
  3.    Visit us at:<br>    
  4.    RijSat.com<br>    
  5.    Buddhanagar, Kathmandu<br>    
  6.    Nepal    
  7. </address>     

map and area (<map> and <area>)

 
This is another useful tag to define an image map where image will have clickable areas. To be more specific, image map gives the option to specify different parts of an image with clickable links. This map tag gives flexible option for use interactions which would be difficult through text.
 
The map tag is associated with image ie <img> tag to create relationship between map and image. There will be several <area> elements in the map that is associated with a clickable link.
 
Example
  1. <img src="sampleworkplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">    
  2. <map name="workmap">    
  3.   <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">    
  4.   <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">    
  5.   <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">    
  6. </map>    
Explanation
 
We are associating different links to some part of the image like the computer part of the image with computer.html, the phone part of the same image to phone.html and the coffee part of the same image to coffee.html.
 

Sub and Sup (<sub> and <sup>)

 
These two html tags are useful for displaying formulas. The sub tag is for superscripted text and sup tag for subscript text.
 
H2O, a2 + b2
 
Example
  1. <p>Chemical formula of water H<sub>2</sub>O</p>    
  2. <p>Mathematical formula  a<sup>2</sup> + b<sup>2</sup></p>     

Picture (<picture>)

 
We always use img html tag for pictures, however, picture tag gives more flexibility in specifying image resources. Considering modern devices, picture tag enables different sources of same image based on multiple factors like screen width, device orientation, theme etc. Depending upon viewport width, multiple images can be designed to a more realistic view in browser. The picture tag can be used for giving more realistic responsive designs. For illustration, image can be switched based on dark or white theme selection using the preferred-color-scheme: dark media query.
 
Example
  1. <picture>    
  2.   <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">    
  3.   <source media="(min-width:465px)" srcset="img_white_flower.jpg">    
  4.   <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">    
  5. </picture>    
Explanation
 
Image will be changed based on width as portrayed in above media query.
 

Dfn and kbd (<dfn> and <kbd>)

 
The dfn tag is for definition and kdb for keyboard input. The tag dfn specifies a term that will follow by definition in the next content. The closest parent of the <dfn> tag must also contain the definition/explanation for the enclosed term.
 
Example
  1. <p><dfn>CSS</dfn> is the cascade style sheet used for page design.</p>     
Similarly, kdb is used for defining keyboard input which is displayed in the browser’s default monospace font.
  1. <p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).</p>    
  2. <p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text (Mac OS).</p>     

<q> and <blockquote>

 
The <q> is used for short quotes whereas blockquote is for long quotations.
 
User agent styles will link its contents in quote marks automatically. It has an optional cite attribute that can be a link back to the original source.
 
Example
  1. <q>Knowledge is power.</q> – Francis Bacon.    
  2. <blockquote>    
  3.    Any fool can write code that a computer can understand. Good programmers write code that humans can understand.    
  4. </blockquote>    

Var (<var>)

 
In mathematical or programming sentences, it is obvious to have variables with words, therefore, var tag is used to represent the variables in the expression or sentence.
 
Example
  1. <p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base, and <var>h</var> is the vertical height.</p>  

Figure and Figcaption (<figure> and <figcaption>)

 
In many write-ups, we need to include containers like figure, charts, diagram, photos etc. which are simply related but are not mandatory for contexts. Figure tag is suitable in such situations. The figcaption tag is added in figure tag to provide description to the contents. The figcaption is a child of figure element.
 
Example
  1. <figure>    
  2.   <img src="diagram.jpg" alt="The diagram for the developer numbers in different years" style="width:100%">    
  3.   <figcaption>ASP.NET applcation popularity.</figcaption>    
  4. </figure>     

Meter and progress (<meter> and <progress>)

 
Meter tag gives visual display for numerical data that has a defined range or can be used to show percentage as well. The <meter> tag defines a scalar measurement within a known range, or a fractional value. This is also known as a gauge. However, we should use it to show progress because there is another element for that <progress>
 
Example
 
To show disk space use <meter> and download progress use <progress>
  1. <label for="disk_c">Disk usage C:</label>    
  2.     <meter id="disk_c" value="2" min="0" max="10">2 out of 10</meter><br>    
  3.     <label for="disk_d">Disk usage D:</label>    
  4.     <meter id="disk_d" value="0.6">60%</meter><br>    
  5.     <label for="file">Downloading progress:</label>    
  6. <progress id="file" value="32" max="100"> 32% </progress>     

Time (<time>)

 
The time tag is used to specify times. The datetime attribute of this tag is used to convert the time into a machine-readable format so that browsers can offer to add date reminders through the user's calendar, and search engines can produce smarter search results.
 
Example
  1. <p>Office opens from <time>09:00</time> to <time>20:00</time> from Sunday to Friday.</p>    
  2. <p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p>     

Wbr (<wbr>)

 
There are some cases that we might need to specify word break in a text or long url. If a word is too long, the browser breaks itself which might be in the wrong place and can interpret the wrong meaning. In such a case, <wbr> provides a suitable place where it is okay to break. (full: Word Break Opportunity)
 
Example
  1. <p>This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery<wbr>longwordthatwillbreakatspecific<wbr>placeswhenthebrowserwindowisresized.</p>  

Del and Ins

 
Del tag specifies that the content has been deleted and ins, similarly, indicates that a text that has been inserted into a document. Browser usually shows strike line for del tag.
 
Example
  1. <p>My favorite programming language is <del>PHP</del> <ins>C#</ins>!</p>  

Details and summary (<details> and <summary>)

 
Details <details> tag is used to show additional details based on demands. This can be considered as a simple accordion or collapsible which can be achieved with simple tag. The <details> tag is often used to create an interactive widget that the user can open and close. By default, the widget is closed. When open, it expands, and displays the content within. Whereas summary defines a visible heading for details and is used a first child under details.
 
Example
  1. <details>    
  2.     <summary>Details and summary</summary>    
  3.     <p>This can consider as a simple accordion or collapsible which can be achieved with simple tag.</p>    
  4. </details>     

dl, dt and dd (<dl>, <dt> and <dd>)

 
dl – description list
dt - a term/name in a description list
dd - The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name).
 
Example
  1. <p>These three elements are used to create a description list:</p>    
  2. <dl>    
  3.     <dt>Coffee</dt>    
  4.     <dd>Black hot drink</dd>    
  5.     <dt>Milk</dt>    
  6.     <dd>White cold drink</dd>    
  7. </dl>     
Some sample examples are shown in the below image.
 
 
There are some other html elements as well which are less common but result in incredibly useful web design tools.
 

Conclusion

 
In this article we have explored some of the unique html elements which are very useful but generally developers ignore and instead use css to accomplish similar results.


Similar Articles