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:
<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.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>
