DEV Community

Cover image for Exploring Uncommon HTML tags
Bhavy Ladani
Bhavy Ladani

Posted on

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

<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!

Top comments (0)