Useful HTML Tags & Attributes with Example

byNiodTech -December 17, 2021

Hello friend, I hope you are doing well. Today in the blog you will learn some important and very useful HTML tags and attributes with examples. As you know there are lots of HTML and CSS designs we have created before.

HTML stands for Hypertext Markup Language.

Some of the most important and useful HTML tags and attributes that we are going to cover in this blog are given below.

Details & Summary Tag.
Select & Option Tag
Select, Optgroup & Option Tag
Input, Datalist & Option Tag
Input, Datalist & Option Tag
Input, Datalist & Option Tag
Input Tag & Attribute
Mark Tag
Progress Tag
Meter Tag
Contenteditable Attributes
Title Attribute

Rather than seeing only HTML tags' names and attributes, I highly recommend you to watch the full video tutorial of the given tags and attribute which has given below. In this video, I have shown all HTML tags and attributes for examples.

Useful HTML Tags & Attributes with Example

I have provided all the source code of these HTML tags and attributes, before jumping into the source code files, you need to know a short explanation of the HTML tags and attributes that you have seen on the video.

As you have seen in the video tutorial. At first, we have seen the Details and a summary tag. When I create details tag only a dropdown icon appears with text and clickable features and anything that we write inside that tag that was disappeared and by clicking on the icon we can see the inside content of the detail tag.

Like this, we can do lots of thing by using these HTML tags and attribute that you have seen on the video.

You Might Like This:

To get the following code of HTML tags and Attributes. You need to create an HTML file. After creating that then you can copy-paste the given codes on your HTML document. You can also download all source code files from the given download button.

HTML CODE:

<!DOCTYPE html><!-- Coding by CodingLab | www.codinglabweb.com--><html lang="en" dir="ltr">  <head>    <meta charset="UTF-8">    <!--<title> Useful HTML Tags and Attributes | CodingLab </title>-->   </head> <body>  <!-- Details & Summary Tag -->  <!-- <details>    <summary></summary>    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.       Reiciendis eos ipsam quam natus corporis dicta eveniet       excepturi facilis maxime aut?     </p>  </details> -->  <!-- ========================================= -->  <!-- Select & Option Tag --> <!-- <select>   <option>HTML & CSS</option>   <option>Login Form</option>   <option selected>Website Design</option>   <option>Profile Cards</option>   <option>Navigation Bar</option> </select> --> <!--Select, Optgroup & Option Tag --><!-- <select> <optgroup label="HTML & CSS">   <option>Codinglab</option>   <option>Login Form</option>   <option>Signup Form</option> </optgroup> <optgroup label="JavaScript">   <option>Sidebar Menu</option>   <option>Digital Clock</option>   <option>Navigation Menu</option> </optgroup></select> --> <!-- ====================================== --> <!-- Input, Datalist & Option Tag --><!-- <input type="search" list="suggestions" placeholder="Search here"><datalist id="suggestions">  <option value="Website Design">Free Source Code</option>  <option>Login Form</option>  <option>Sidebar Design</option>  <option>Digital Clock</option>  <option>Progress Bar</option>  <option>Button Design</option></datalist> --> <!-- 5 Input + Datalist + Option (Tag) -->  <!-- <input list="hello" type="range" min="0" max="5" value="0">   <datalist id="hello">      <option value="0"></option>      <option value="1"></option>      <option value="2"></option>      <option value="3"></option>      <option value="4"></option>      <option value="5"></option>    </datalist> --> <!-- 6 Input + Datalist + Option (tag)  -->  <!-- <input type="date" list="dates" >  <datalist id="dates">    <option value="2022-01-10"></option>    <option value="2022-01-11"></option>    <option value="2022-01-12"></option>  </datalist> -->   <!-- ========================== -->   <!-- 7 Input Tag + Attribute -->    <!-- <input type="datetime-local"> -->    <!-- <input type="time"><br> -->    <!-- <input type="week"><br> -->    <!-- <input type="color" multiple> -->    <!-- <input type="file" name="" value=""> -->     <!-- ======================== -->     <!-- 8 Mark Tag -->    <!-- <p>Lorem ipsum dolor sit amet, consectetur <mark>adipisicing elit. Harum voluptas</mark> inventore hic enim, voluptatibus ipsum natus. Cumque voluptates temporibus nihil veritatis expedita architecto, facere, aspernatur harum, molestiae tempora consectetur praesentium.</p> -->     <!-- 9 Meter Tag -->    <!-- <meter low="60" high="80" max="100" value="50" >Range</meter> -->     <!-- 10 Progress Tag -->    <!-- <progress value="50" max="100"></progress> --> <!-- ====================== -->    <!-- 11 Contenteditable Attributes -->   <!-- <h2 contenteditable="true">This text is editable</h2> -->   <!-- 12 Title Attrubute -->  <!-- <p  title="Hyper text markup language">html</p> -->   <!-- ================= -->   <!--Bonus Form Validation  --><!-- <form action="#">  <input type="text" name="username" id="username" placeholder="Use 3-20 characters" pattern="[a-z]{3,20}" required>  <button type="submit">Submit</button></form> --> </body></html>

Tags HTML Tags and Attributes

Trending

BS Button Goups - Bootstarp Learn

The SQL COUNT, AVG And SUM - SQL Learn

SQL Index - SQL Learn

BS Glyphicons - Boostrap Learn

SQL Backup Database Statement - SQL Learn

Useful HTML Tags & Attributes with Example

Useful HTML Tags & Attributes with Example

You Might Like This:

Contact Form