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.

H2O, a2 + b2

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.

By Rijwan Ansari

Research and Technology Lead | Software Architect | Full Stack .NET Expert | Tech Blogger | Community Speaker | Trainer | YouTuber. Follow me @ https://rijsat.com Md Rijwan Ansari is a high performing and technology consultant with 10 plus years of Software Development and Business Applications implementation using .NET Technologies, SharePoint, Power Platform, Data, AI, Azure and cognitive services. He is also a Microsoft Certified Trainer, C# Corner MVP, Microsoft Certified Data Analyst Associate, Microsoft Certified Azure Data Scientist Associate, CSM, CSPO, MCTS, MCP, with 15+ Microsoft Certifications. He is a research and technology lead in Tech One Global as well as leading Facebook community Cloud Experts Group and SharePoint User Group Nepal. He is a active contributor and speaker in c-sharpcorner.com community, C# Corner MVP and his rank at 20 among 3+ millions members. Additionally, he is knee to learn new technologies, write articles, love to contribute to the open-source community. Visit his blog RIJSAT.COM for extensive articles, courses, news, videos and issues resolution specially for developer and data engineer.

41 thoughts on “Some unique, uncommon but very useful HTML elements (tags)”
  1. Nice post. I was checking continuously this blog and
    I’m impressed! Very useful information specially the ast part 🙂 I care
    for such info a lot. I was looking for this particular information for a long time.
    Thank you and best of luck.

  2. Thank you forr this very good posts. I was wanting to know whether you were planning
    of publishing similar posts to this. Keep up writing superb contemt articles!

  3. Nice post. I waas checking continuously this blog annd I’m impressed!

    Very useful information specially the last part
    🙂 I care for such info a lot. I wass looking for this particlar information for a long time.
    Thank you and best of luck.

  4. I’m very happy to discover this page. I need to to thank you for
    ones time just foor this fsntastic read! I definitely
    really liked every litgle bit off it and I have you bookmarked to
    check out new things in yokur blog.

  5. Hello There. I found your blog using google. This is an extremely well written article.

    I’ll make sure to bookmark it and return to read
    more of your useful information. Thanks for the post.

    I’ll certainly return.

  6. I simply wannt to input that you have ? good website ?nd I enjoy the
    design and also artcles ?n it!

  7. Your mode of describing all in this piece of writing iis in fact pleasant, alll be capable of simply be aware of
    it, Thanks a lot.

  8. Wow, amazing blog layout! How long have you been blogging for?
    yoou made blogging look easy. The overall look of your weeb site is excellent,as well as the content.

  9. Howdy! I could have sworn I’ve been to tis blog before but after browsing through some of the post I realized it’s new to me.
    Nonetheless, I’m definitely delighted I found it and I’ll be bookmarking and checkiung back frequently!

  10. This is the perfect blog for anybody wwho hopes tto find out about this topic.
    You definitely put a brand new spn on a topic which has been discussed forr decades.Wonderful
    stuff, just excellent!

  11. This is thee perfect blog for anybody who hopes to find out about this topic.
    You definitepy put a brand new spin on a topic which has been discussed for decades.Wonderful stuff, just excellent!

  12. Hello there! Woupd yyou mind if I share your blog
    with my twitter group? There’s a lot of people that I think would really appreciate your content.Please let me know.
    Thanks!

  13. Hello everyone, it’s my first visit at this website,and piece of writing is genuinely
    fruitful designed ffor me, keep up posting such
    articles or reviews.

  14. This is the perfect blog for anybody who hopes
    to find out about this topic. You definitely put a brand
    new spinn on a topic which has been discussed for decades.Wonderful stuff,
    just excellent!

  15. I’m very happy to discover this page. I need to tto thank
    you for ones time just for this fantastic read!

    I definitely really liked every little bit of it and I have you bookmarked to check out new things in your blog.

  16. Hello to every one, since I amm genuinely keen of reading this website’s post to be updated regularly.
    It carries nice data.

  17. I think this is one of the most important information for me.
    And i aam glad reading your article. But wanna remark on few general things, The web site
    style is perfect, the articles is really great!

  18. Hello everyone, it’s my first visit at this website, and piece of writing is
    genuinely fruitful designed for me, keep uup posting such articles or reviews.

  19. Your mode of describing all in this piece of writing is in fact pleasant, all be capable of simpl be aware off it, Thanks a lot.

  20. Greetings! Very helpful advice in this particular article!
    It’s the little changes thast make the most important
    changes. Many thanks for sharing!

  21. Well complosed articles like yours renews my faith in today’s writers.You’ve written information I can finally agrse on and also use.Many thanks for sharing.

  22. With havin so much content and articles do you ever run into any issues of plagorism or copyright infringement? My website has a lot of exclusive content I’ve either authored myself or outsourced but it looks like a lot of it is popping it up all over the internet without my authorization. Do you know any methods to help prevent content from being ripped off? I’d truly appreciate it.

Leave a Reply

Your email address will not be published. Required fields are marked *