DEV Community

Rohan Kiratsata
Rohan Kiratsata

Posted on

10 Awesome HTML Tags You Didn't Know About

Hello fellow developers! Today I'm going to tell you the 10 best HTML tags that you didn't know about. There are a lot of HTML tags that we are not familiar with. So let's jump into it.

1. Abbreviation <abbr>

The abbr tag is used to display an abbreviation or acronym. It provides an description or expansion of words.

<p>Example of abbr tag :</p>
    <p>
<abbr title="Cascading Style Sheets">CSS</abbr> is used to style your <abbr title="Hyper Text Markup Language">HTML</abbr>
</p>
Enter fullscreen mode Exit fullscreen mode

Live Demo:

CSS is used to style your HTML

2. Kbd <kbd>

The kbd tag defines the textual user input from keyboard, voice input, or any other textual input. You can also add your own CSS.

<p>Shortcut for Copy is <kbd>Ctrl</kbd> + <kbd>C</kbd></p>
Enter fullscreen mode Exit fullscreen mode

Live Demo:

Shortcut for Copy is Ctrl + C


3. Color Picker <input type="color">

Input element of type color provides a user interface element which lets user to choose a color.

<p>
    Choose Color : <input type="color" name="colorPicker" value="#222"> 
</p>
Enter fullscreen mode Exit fullscreen mode

Example Output:

Color Picker Image

4. Meter <meter>

The meter tag represents either a scalar value within a known range or a fractional value.

Remaining Storage : 
<meter id="storage" min="0" max="100" value="30">
</meter>
Enter fullscreen mode Exit fullscreen mode

Example Output:

Meter Tag Image


5. Address <address>

The address tag indicates that the enclosed HTML provides contact information for a person or organization.

<address>
  <a href="mailto:john@website.com">John@website.com</a><br>
  <a href="tel:+111234567890">(11) 123-456-7890</a>
</address>
Enter fullscreen mode Exit fullscreen mode

Live Demo:

John@website.com

(11) 123-456-7890


6. Option Group <optgroup>

The optgroup tag is used to add the definition or heading between group of option inside select tag.

<select id="Cities">
    <optgroup label="India"></optgroup>

    <option value="Mumbai">Mumbai</option>
    <option value="Delhi">Delhi</option>
    <option value="Ahmedabad">Ahmedabad</option>

    <optgroup label="America"></optgroup>

    <option value="New York">New York</option>
    <option value="Nevada">Nevada</option>
    <option value="California">California</option>
</select>
Enter fullscreen mode Exit fullscreen mode

Example Demo:

OptGroup Example


7. Deleted Text <del>

This Tag is used to represent a text that has been deleted from a document.

<p>HTML is <del>Programming</del> Markup language </p>
Enter fullscreen mode Exit fullscreen mode

Live Demo:

HTML is Programming Markup language


8. Inserted Text <ins>

This Tag is used to represent a text that has been Inserted from a Document.

<p>HTML is <del>Programming</del> <ins>Markup</ins> language </p>
Enter fullscreen mode Exit fullscreen mode

Live Demo:

HTML is Programming Markup language


9. Details <details>

The details tag creates a collapse widget in which information is visible only when is toggled to "open" state.

<details>
    <summary>Click on Me</summary>
    This is the example details tag in HTML. <br>
    PS: I can hack NASA using HTML.
</details>
Enter fullscreen mode Exit fullscreen mode

Live Demo:

Details Example Image 0

Details Example Image


10. Mark <mark>

The mark tag is used to highlight or mark the text.

<p>Example of Object Oriented Programming Languages are 
    <mark>Java, C++, Python, JavaScript</mark> 
    and Example of Procedural Programming Languages are 
    <mark>C, FORTRAN, PASCAL</mark></p>
Enter fullscreen mode Exit fullscreen mode

Live Demo:

Example of Object Oriented Programming Languages are Java, C++, Python, JavaScript and Example of Procedural Programming Languages are C, FORTRAN, PASCAL


So that's it for today.There are many more Unknown HTML tags, so keep exploring and keep coding. I would like to hear your views and suggestions.

KEEP CODING...KEEP HUSTLING

Discussion (0)