Top 10 Awesome HTML Tags!

1. Abbreviation: <abbr></abbr>

Example of abbr tag:

<p><abbr title="Cascading Style Sheets">CSS</abbr> is used to style your <abbr title="Hyper Text Markup Language">HTML</abbr></p>

Live Demo:

CSS is used to style your HTML

2. Kbd: <kbd></kbd>

Example of kbd tag:

<p>Shortcut for Copy is <kbd>Ctrl</kbd> + <kbd>C</kbd></p>

Live Demo:

Shortcut for Cut is Ctrl + X

3. Color Picker: type="color"

<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">

Live Demo:

4. Meter: <meter></meter>

<meter id="example" min="0" max="100" value="50"></meter>

Live Demo:

5. Address: <address></address>

<address>
  <a href="mailto:[email protected]">[email protected]</a>
  <a href="tel:+0123456789">(00) 123-456-789</a>
</address>

Live Demo:

[email protected]
(00) 123-456-789

6. Option Group: <optgroup></address>

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

    <option value="Toronto">Toronto</option>
    <option value="Vancouver">Vancouver</option>
    <option value="Montreal">Montreal</option>

    <optgroup label="Turkey"></optgroup>

    <option value="Istanbul">Istanbul</option>
    <option value="Ankara">Ankara</option>
    <option value="Izmir">Izmir</option>
</select>

Live Demo:

7. Delete: <del></del>

<p>HTML is the <del>Programming</del> Markup language</p>

Live Demo:

HTML is the Programming Markup language

8. Inserted Text: <ins></ins>

<p>HTML is the <del>Programming</del> <ins>Markup</ins> language</p>

Live Demo:

HTML is the Programming Markup language

9. Details: <details></details>

<details>
    <summary>Click on Me</summary>
    Hello World! This is techsolutionshere.com
</details>

Live Demo:

10. Mark: <mark></mark>

<p>Hello World! <mark>Java, C++, Python, JavaScript</mark></p>

Live Demo:

Hello World! Java, C++, Python, JavaScript

That’s it. Hope this tutorial is helpful for you!

Thank You!