Top 7 HTML tags that you might probably not know

In this tutorial we will be learning some interesting tags that you don't use in you website.

Tag - 1

Autocomplete an Input or Textarea

<input type="text" list="data_item">
<datalist id="data_item">
    <option value="Hello"></option>
    <option value="CodeWithNiranjan"></option>
    <option value="Subscribe"></option>
    <option value="Like"></option>
    <option value="Share"></option>
</datalist>

Tag - 2

Add color picker to your website

<input type="color" name="" id="">

Tag - 3

Progress bar

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

Tag - 4

Accordion

<details>
    <summary>Open me</summary>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum eos unde, facilis eligendi minima quisquam ipsam amet harum obcaecati nam ex reprehenderit qui laboriosam incidunt fugiat architecto accusantium. Nostrum, nobis.</p>
</details>

Tag - 5

Marker highlighting

Lorem <mark>Hello</mark> ipsum dolor sit amet consectetur adipisicing elit. Eligendi inventore doloremque et, adipisci placeat atque eaque quisquam, quidem repellendus commodi laborum sunt sint odit quod minima esse assumenda quia ad!

Tag - 6

Scrolling effect

<marquee behavior="scroll" direction="left">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Autem neque, numquam laborum ipsa dignissimos officiis asperiores nobis doloribus voluptatum eum assumenda corporis eaque quasi sint. Non tempora voluptas ducimus fugiat molestias consequuntur corrupti cum at est doloremque incidunt officiis, eligendi, sed unde ab atque quas quod veritatis? Illum, perspiciatis dolorum eius, pariatur eveniet veniam quas sit corrupti officiis porro optio excepturi velit dicta sint molestias officia quidem ab eum rem ullam voluptatibus. Fuga explicabo, ducimus iusto earum laborum facilis accusantium autem, voluptatibus maxime consectetur soluta praesentium natus laudantium labore amet iure quis ipsam voluptatum officiis at qui corrupti aspernatur ea!</marquee>
<marquee behavior="scroll" direction="right">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Autem neque, numquam laborum ipsa dignissimos officiis asperiores nobis doloribus voluptatum eum assumenda corporis eaque quasi sint. Non tempora voluptas ducimus fugiat molestias consequuntur corrupti cum at est doloremque incidunt officiis, eligendi, sed unde ab atque quas quod veritatis? Illum, perspiciatis dolorum eius, pariatur eveniet veniam quas sit corrupti officiis porro optio excepturi velit dicta sint molestias officia quidem ab eum rem ullam voluptatibus. Fuga explicabo, ducimus iusto earum laborum facilis accusantium autem, voluptatibus maxime consectetur soluta praesentium natus laudantium labore amet iure quis ipsam voluptatum officiis at qui corrupti aspernatur ea!</marquee>

Tag - 7

font tag

<p><font color="red" face="Verdana" size="+10">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, iure est voluptatem laudantium accusantium omnis cum a ipsam animi repudiandae odit magni unde excepturi dolores blanditiis nemo obcaecati porro eum.</font></p>

Subscribe

Please subscribe CodeWithNiranjan

Thank You