top 10 HTML Unique Tags
Top 10 time saving HTML Tags you didn’t know about.
Here are ten cool HTML tags that you may not have known about:
<details>: This tag creates an expandable section of content that users can toggle open and closed by clicking on it.
Example:
<details>
<summary>Click to expand</summary>
<p>Hidden content</p>
</details>
<datalist>: This tag is used to provide a list of options for an input field, making it easier for users to select from a predetermined set of choices.
Example:
<label for="fruits">Choose a fruit:</label>
<input list="fruits" id="fruit-input">
<datalist id="fruits">
<option value="Apple">
<option value="Banana">
<option value="Orange">
<option value="Pineapple">
</datalist>
<meter>: This tag creates a graphical representation of a measurement or value within a specified range.
Example:
<meter value="75" min="0" max="100">75%</meter>
<output>: This tag is used to display the result of a calculation or other process.
Example:
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a" value="0">
+
<input type="number" id="b" value="0">
=
<output name="result"></output>
</form>
<picture>: This tag allows you to define multiple versions of an image based on different screen sizes and resolutions, improving page performance and user experience.
Example:
<picture>
<source srcset="image-large.jpg" media="(min-width: 800px)">
<source srcset="image-medium.jpg" media="(min-width: 500px)">
<img src="image-small.jpg" alt="An image">
</picture>
<progress>: This tag creates a progress bar that indicates the status of a task or process.
Example:
<progress value="50" max="100">50%</progress>
<template>: This tag defines a section of code that can be reused multiple times within a document.
Example:
<template>
<div class="person">
<h2></h2>
<p></p>
</div>
</template>
<div id="people-list"></div>
<script>
const peopleList = document.getElementById('people-list');
// Add three people to the list
for (let i = 0; i < 3; i++) {
const person = document.importNode(document.querySelector('template').content, true);
person.querySelector('h2').textContent = 'Person ' + (i+1);
person.querySelector('p').textContent = 'Lorem ipsum dolor sit amet.';
peopleList.appendChild(person);
}
</script>
<time>: This tag is used to indicate a specific date or time, and can be formatted in a variety of ways.
Example:
<p>The concert starts at <time datetime="2023-06-15T20:00">8:00 PM on June 15th</time>.</p>
<track>: This tag is used to add captions or other types of text tracks to a video or audio element.
Example:
<video controls>
<source src="video.mp4" type="video/mp4">
<track kind="captions" src="captions.vtt" srclang="en" label="English">
</video>
<video>: This tag creates a video player within a web page, allowing you to embed and play video content directly on your site.
Example:
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
Poll- Choose language you are learning right now:
HTML
View Document Note
Comments
Post a Comment