Top 10 HTML Awesome tags

Devnote team
January 9, 2022
4
686 Views
0 Comments

In this tutorial, we will learn the Top 10 HTML Awesome tags. we will learn Abbreviation, Kbd, Color Picker, Meter, Address, Option Group, Delete, Inserted Text, Details, and Mark. all tags in HTML5 are new awesome tags. will in this tutorial cover only 10 HTML Awesome tags like: (Abbreviation, Meter, Color Picker, Kbd, Option Group, Delete, Address, Details, Mark, and Inserted Text).

Also read: How To Create a Simple Animation Movie Using HTML

Abbreviation

The Abbreviation() tag is an abbreviation or an acronym tag, like “HTML”, “CSS”, “ASAP”, and “ATM”. The abbreviation/acronym is used when the user is over the element.

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Abbreviation tag</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <p><abbr title="Hyper Text Markup Language">HTML</abbr> And <abbr title="Cascading Style Sheets">CSS</abbr></p>
</body>
</html>

Output:

Abbreviation tag

HTML And CSS

Meter

The meter tag defines a scalar measurement with a known range or a fractional value. And tag should not be used to indicate progress. meter tag is used Disk usage, the relevance of a query result, etc.

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Meter tag</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <label for="diskC">C Drive:</label>
    <meter id="diskC" value="2" min="0" max="10">10</meter><br>
    <label for="diskD">D Drive:</label>
    <meter id="diskD" min="0" max="100" value="80">80</meter>
</body>
</html>

Output

Meter tag 10
80

Color Picker

Also read: Animated Indian flag using CSS

HTML color picker to browse millions of colors and color harmonies. color picker type="color" clicking and dragging your cursor inside the picker area to highlight color with check Hex, RGB, HSL, or CMYK values.

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Color tag</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <input type="color" class="form-control form-control-color" name="color" value="#11ff01" title="Choose color">
</body>
</html>

Output

Color tag

Kbd

The kbd tag is used to define the keyboard input element. kdb use The content inside is displayed in the browser’s default monospace font. The HTML element represents a span of inline text denoting textual.

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>KBD tag</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <kbd>Keyboard input</kbd>
    <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>
</body>
</html>

Output

KBD tag Keyboard input

Press Ctrl + C to copy text (Windows).

Press Cmd + C to copy text (Mac OS).

Option Group

The optgroup tag is used to group related options in a select element. The optgroup tag creates a grouping of options within a select element. list of options, and groups of related options are easier to handle for a user.

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>optgroup tag</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <select name="cars" id="cars">
        <optgroup label="Suzuki"></optgroup>
    
        <option value="Swift">Swift</option>
        <option value="Baleno">Baleno</option>
        <option value="Alto">Alto</option>
    
        <optgroup label="Hyundai"></optgroup>
    
        <option value="Creta">Creta</option>
        <option value="Hyundai i20">Hyundai i20</option>
        <option value="Venue">Venue</option>
    </select>
</body>
</html>
optgroup tag

Delete

The del tag is used to define the text that has been deleted from a document. Browsers will display a line through on text. The del tag in HTML stands for delete. The del tag requires a starting and ending tag.

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Delete tag</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <p>PHP is the <del>Hypertext</del> <ins>Preprocessor</ins> language.</p>
</body>
</html>

Output

Delete tag

PHP is the Hypertext Preprocessor language.

Address

The address tag uses the contact information of the author/owner. The contact information can be a Mobile number, email address, URL, physical address, social media handle, etc.

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Address tag</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <address>
        <a href="mailto:info@devnote.in">info@devnote.in</a><br>
        <a href="tel:+919876543210">+91 (987)-6543-210</a><br>
        <a href="https://youtube.com/designerrk">Youtube</a><br>
        <a href="https://linkedin.com/devnote16">Linkedin</a><br>
      </address>
</body>
</html>

Output

Address tag
info@devnote.in
+91 (987)-6543-210
Youtube
Linkedin

Details

The details tag uses additional details that the user can open and close on demand. details tag by default, the widget is closed. And when opened, it expands and displays the additional details. the details tag to create an interactive widget that the user can open and close to display additional details.

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Delete tag</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <details>
        <summary>Click here</summary>
        devnote.in is a web tutorial. <br>
        The details tag use additional details that the user can open and close on demand.
    </details>
</body>
</html>

Output

Delete tag
Click here devnote.in is a web tutorial.
The details tag use additional details that the user can open and close on demand.

Mark

The mark tag uses an HTML element to represent text which is marked or highlighted. The mark tag is defined text that should be highlighted. The mark tag also supports the default attributes in HTML.

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Mark tag</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <p>PHP freamwork: <mark>WordPress, Laravel, CI, Cake php </mark></p>
</body>
</html>

Output

Mark tag

PHP freamwork: WordPress, Laravel, CI, Cake php

Inserted Text

The ins tag is like deleting a tag, or inserting text that has been inserted into a document. ins tag is default browsers will usually underline inserted text.

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Inserted tag</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <p>PHP is the <del>Hypertext</del> <ins>Preprocessor</ins> language.</p>
</body>
</html>

Output

Inserted tag

PHP is the Hypertext Preprocessor language.

Categories:

CSSHTML

Other Articles

Related Posts

Devnote provides a collection of tutorials about PHP, Laravel, WordPress, Django, MySQL, Bootstrap, Jquery, Ajax, APIs, CRUD operations, etc.

Devnote © , All Rights Reserved.

Page Links

Category

Follow Us

Facebook Instagram Twitter Youtube Linkedin Pinterest
Morbi, Gujarat, India - 363641