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