Usefull HTML Tags you don't know about

Table of contents

No heading

No headings in the article.

Below are a few examples of lesser-known HTML tags that can be useful in certain situations. It's always good to familiarize yourself with the full range of options available in HTML to find the right tools for your specific needs.

  1. <abbr>: This tag is used to mark up an abbreviation or acronym. It provides a title attribute that expands the abbreviation for users. For example:

     <p>The <abbr title="World Health Organization">WHO</abbr> is an international organization that works to improve global health.</p>
    
  2. <time>: This tag is used to mark up a date or time. It makes it easier for software to parse and understand the content. For example:

     <p>The event will take place on <time datetime="2022-08-20">August 20th, 2022</time>.</p>
    
  3. <meter>: This tag is used to mark up a numeric value within a known range, such as a gauge or progress bar. It can be useful for displaying data like site traffic or user progress on a task. For example:

     <p>Progress: <meter value="0.75" min="0" max="1">75%</meter></p>
    
  4. <output>: This tag is used to represent the result of a calculation, such as a form input. It can be useful for creating interactive forms or other types of dynamic content. For example:

     <form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
       <input type="range" id="a" value="50"> + 
       <input type="number" id="b" value="50"> = 
       <output name="result" for="a b"></output>
     </form>
    
  5. <datalist>: This tag is used to create a list of options for input controls. It can be useful for providing suggestions or autocomplete functionality for form fields. For example:

     <label for="favorite-fruit">Pick your favorite fruit:</label>
     <input list="fruits" id="favorite-fruit" name="favorite-fruit">
     <datalist id="fruits">
       <option value="Apple">
       <option value="Banana">
       <option value="Orange">
       <option value="Mango">
     </datalist>