Exploring Uncommon HTML tags

Introduction

Welcome, fellow developers! In the vast landscape of web development, HTML stands as a cornerstone. While we're all familiar with the usual suspects like

and

, there exists a trove of lesser-known HTML tags waiting to be explored. In this blog, we'll peel back the layers of HTML to reveal lesser-known tags that might just be the missing pieces in your development. So, let's start to see one by one.

details and summary Tags:

The and tags are perfect for creating interactive and collapsible content. Wrap your content inside the tag, and use to provide a brief overview or title. Users can then toggle the visibility of the enclosed content.

<details>
  <summary>Click to reveal more</summary>
  <p>This is the hidden content you can reveal or hide.</p>
</details>

mark Tag:

Highlighting text is a common requirement, and this tag serves this purpose. It allows you to visually emphasise specific parts of your content.

<p>This is a <mark>highlighted</mark> text example.</p>

progress Tag:

Displaying progress bars is made easy with the tag. It's especially useful when you want to indicate the completion status of a task.

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

figcaption Tag:

Enhance the presentation of figures and images by using the

tag. It provides a space to add a caption directly associated with the figure.

<figure>
  <img src="image.jpg" alt="A beautiful image">
  <figcaption>Caption describing the image</figcaption>
</figure>

abbr Tag:

When using abbreviations or acronyms, the tag helps by providing an expanded version when the user hovers over it.

<p>
    <abbr title="World Health Organisation">
        WHO
    </abbr> 
    plays a crucial role in global health.
</p>

time Tag:

Representing dates and times in a structured manner is simplified with the tag. It helps search engines and browsers understand the content better.

<p>
    Join us on 
    <time datetime="2024-01-17">
        January 17, 2024
    </time> 
    for an exciting event.
</p>

cite Tag:

When referencing the title of a creative work (e.g., a book, movie, or song) within your content, the tag provides semantic meaning and helps improve accessibility.

<blockquote>
  <p>In the words of Shakespeare, <cite>to be or not to be</cite>.</p>
</blockquote>

Conclusion

To wrap it up, remember: small tags, big impact. These lesser-known HTML tags may be simple, but their potential to enhance your web projects is anything but. Happy coding!