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:


  1. <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>


    


  1. <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>



  1. <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>



  1. <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>


  1. <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>




  1. <progress>: This tag creates a progress bar that indicates the status of a task or process.

   Example:

<progress value="50" max="100">50%</progress>



  1. <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>



  1. <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>



  1. <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>



  1. <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

Video Preview

1 2 3 4 6 7 8 9 10

Comments

Popular posts from this blog

Science 9th 2023 Physics

All alt codes