HTML Advanced Tags


As in the previous tutorial, we have learned about some HTML basic Tags and in this tutorial, we will learn some Advance HTML Tags which you must know as a web developer. Without wasting any time let's jump to the tags and how to use them.

This will be the main template for our source code where we will write our source code inside the body tag.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tags in HTML Simplified Seris</title>
</head>
<body>

    <!-- Our content will goes here -->

</body>
</html>


Now, let's start with some Advanced HTML Tags. And as we have learned copy the given code and paste it into the body tag of index.html. Now you can also check these tags by copying them.

1). Meter

<meter> defines the scale for measurement within the given range and a fractional value.

Value 5 out of 10:
<meter value="5" min="0" max="10"></meter>

Output:

meter tag in HTML example, html advance tags, html meter tag


2). Progress

<progress> is used to create a progress bar.

20% value out of 100: <progress value="20" max="100">20%</progress>

Output:


3). Time

<time> is used to define time in our webpage.

<p>Time start from: <time>10:00</time> to <time>21:00</time> every day</p>

Output:


4). kbd

<kbd> tag is used to show the keyboard key.

<p>Press: <kbd>ctr</kbd> + <kbd>C</kbd> for copy to clipboard</p>

Output:


5). Datalist

<datalist> provides the autocomplete feature for the input text.

<input list="languages" id="" name="" />
    <datalist id="languages">
        <option value="HTML">
        <option value="CSS">
        <option value="JavaScript">
    </datalist>

Output:


6). Details

It show/hide the details of summary tag.

<details>
        <summary>Do Epic Shit</summary>
        <p>In his first book, Ankur Warikoo talks about success and failures, the importance of habits, self-awareness,
            entrepreneurship, money and relationships.</p>
</details>

Output:


7). Abbreviation

<abbr> defines the abbreviation or acronym.

<p> Hover on <abbr title="Search Engine Optimization">SEO</abbr> to know the abbrivation</p>

Output:


8). Cite

<cite> it is basically used to render text in italic.

<p> <cite>HTML Simplified</cite> by Raju Webdev</p>

Output:


9). Canvas

<canvas> mainly used to draw graphics on a web page.

<canvas id="myCanvas" width="200" height="100" style="border: 1px solid black;"></canvas>

(We will learn about id, width, height, and style very soon.)

Output:


HTML Advance Tags PDF Download

Download Now



Post a Comment

1 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad