Some unique, uncommon but very useful HTML elements (tags)

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

1. 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 render in italic and browser add a line break before and after of this tag.

Example: 

<address>  
Written by <a href="mailto:info@rijsat.com">Rijwan Ansari</a>.<br>   
Visit us at:<br>  
RijSat.com<br>  
Buddhanagar, Kathmandu<br>  
Nepal  
</address> 

2. 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 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 associate with clickable link.

Example:

<img src="sampleworkplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">  
<map name="workmap">  
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">  
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">  
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">  
</map> 

Explanation:

We are associating different link to some part of image like computer part of image with computer.html, phone part of same image to phone.html and coffee part of same image to coffee.html.

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

These two html tags are another useful for displaying formulas. The sub tag is for superscripted text and sup tag for subscript text.

H₂O, a² + b²

Example:

<p>Chemical formula of water H<sub>2</sub>O</p>  
<p>Mathematical formula  a<sup>2</sup> + b<sup>2</sup></p>   

4. Picture (<picture>)

We always use img html tag for picture, 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 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 prefers-color-scheme: dark media query.

Example:

<picture>  
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">  
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">  
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">  
</picture>  

Explanation:

Image will be changed based on width as portrayed in above media query.

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

The dfn tag is for definition and kdb for keyboard input. The tag dfn specifies s term that will follow by definition in next contents. The closest parent of the <dfn> tag must also contain the definition/explanation for the enclosed term.

Example:

<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.

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).</p>  
              <p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text (Mac OS).</p> 

6. <q> and <blockquote>

The <q> is used for short quote whereas blockquote 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:

<q>Knowledge is power.</q> – Francis Bacon.  
                <blockquote>  
                  Any fool can write code that a computer can understand. Good programmers write code that humans can understand.  
                </blockquote>  

7. 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:

<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>

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

In many write-ups, we need to include contains 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:

<figure>  
  <img src="diagram.jpg" alt="The diagram for the developer numbers in different years" style="width:100%">  
  <figcaption>ASP.NET applcation popularity.</figcaption>  
</figure> 

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

Meter tag gives visual display for numerical data that has a defined range or can 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>

<label for="disk_c">Disk usage C:</label>  
              <meter id="disk_c" value="2" min="0" max="10">2 out of 10</meter><br>  
  
              <label for="disk_d">Disk usage D:</label>  
              <meter id="disk_d" value="0.6">60%</meter><br>  
              <label for="file">Downloading progress:</label>  
              <progress id="file" value="32" max="100"> 32% </progress>  

 10. Time (<time>)

The time tag is used to specify times. The datetime attribute of this tag is used 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

<p>Office opens from <time>09:00</time> to <time>20:00</time> from Sunday to Friday.</p>  
  
<p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p>

 11. Wbr (<wbr>)

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

Example:

<p>This is a veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery<wbr>longwordthatwillbreakatspecific<wbr>placeswhenthebrowserwindowisresized.</p> 

12. 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:

<p>My favorite programming language is <del>PHP</del> <ins>C#</ins>!</p>  

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

Details <details> tag is used to show additional details based on demands. This can consider 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:

<details>  
                  <summary>Details and summary</summary>  
                  <p>This can consider as a simple accordion or collapsible which can be achieved with simple tag.</p>  
                </details>  

14. 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:

<p>These three elements are used to create a description list:</p>  
  
              <dl>  
                <dt>Coffee</dt>  
                <dd>Black hot drink</dd>  
                <dt>Milk</dt>  
                <dd>White cold drink</dd>  
              </dl>  

Same samples are shown below:

There are some other html elements as well which are less common but result in incredibly useful in web.

Conclusion:

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