Introduction

This blog will take you on a journey through some lesser-known HTML tags and fascinating & super-useful tricks.

Tags:

<dl> - The Definition List:

• Use Case: <dl> is perfect for creating glossaries, dictionaries, or any content that pairs terms with their definitions.

• Example:

•   <dl>
      <dt>Galaxy</dt>
      <dd>A vast system of stars, gas, dust, and dark matter held together by gravity.</dd>
  
      <dt>Neptune</dt>
      <dd>The eighth planet from the sun, known for its stunning blue color.</dd>
    </dl>
  

• Output:

<details> - Expandable Content:

• Use Case: <details> is great for hiding or revealing additional space-related content, such as FAQs. It improves user experience by reducing clutter.

•   <details>
      <summary>Click to reveal astronaut biographies</summary>
      <p>Learn about the brave individuals who ventured into space!</p>
    </details>
  

  Output:

<datalist> - Enhancing Form Inputs:

• Use Case: <datalist> is used to provide users with a list of predefined options as they type into input fields, making form completion quicker and error-free.

• Example:

•   <input list="planets">
    <datalist id="planets">
      <option value="Mercury">
      <option value="Venus">
      <option value="Earth">
      <option value="Mars">
    </datalist>
  

  Output:

<bdo> - Bidi Override:

• Use Case: <bdo> is used to override the text direction, which can be particularly useful when dealing with languages that are read from right to left (RTL).

• Example:

•   <p>This telescope's name is <bdo dir="rtl">Telescopi</bdo></p>
  

  Output:

<map> - Image Maps:

• Use Case: <map> is employed to create interactive image maps with clickable regions.

• Example:

•   <img src="constellations.jpg" usemap="#constellations">
    <map name="constellations">
    <!-- coords="100,100,50" defines a circle with its center at (100,100) and a radius of 50 pixels. -->
      <area shape="circle" coords="100,100,50" href="orion.html" alt="Orion">
    </map>
  

<progress> - Progress Bars:

• Use Case: <progress> is used to display the progress.

• Example:

•   <progress max="100" value="75"></progress>
  

  Output:

Tricks:

1. 🌈Color Picker🎨

    <b>Color Picker below!!</b> 
    <input type="color">
   

2. 🎤Voice Recognition📱

   This only works on mobile devices

    <input type="text" x-webkit-speech/>
   

3. Capture User's Camera📷

   For mobile devices, we can use an input tag.

   For desktops, the default behavior is uploading a file.

    <!-- video files-->
    <input type="file" capture="environment" accept="video/*">
    <!-- image files -->
    <input type="file" capture="user" accept="image/*">
   

4. 🚫Disable Right Clicking on an element🖱️

    <section oncontextmenu="return false">Can't right click here</section>
   

Summary

We explored unique tags and tricks:

Tags:

1. <dl>: Great for making lists with explanations.

2. <details>: Hides and shows extra info with a click.

3. <datalist>: Suggests words while typing in forms.

4. <bdo>: Helps with text direction, like right-to-left languages.

5. <map>: Turns images into clickable maps.

6. <progress>: Shows task progress with a loading bar.

Tricks:

• Color Picker: This lets you pick colors easily.

• Voice Recognition: Only works on mobile for voice input.

• Capture User's Camera: For taking pictures or videos.

• Disable Right Clicking: Prevents right-clicking on elements.