HTML (Hypertext Markup Language) is the backbone of the web, and it consists of a wide range of tags that are commonly used to structure web content. While you may be familiar with popular HTML tags like <div>, <p>, and <a>, there are several lesser-known tags that can be incredibly useful in certain situations. In this blog post, we'll introduce you to 7 HTML tags you may not be familiar with, along with code examples for each one.
1. <details> and <summary>
The <details> and <summary> tags allow you to create expandable sections of content. Users can click on the summary to expand or collapse the details. This is useful for creating FAQ sections or hiding lengthy content.
<details>
<summary>Click to reveal more information</summary>
<p>This is hidden content that can be expanded or collapsed.</p>
</details>
2. <mark>
The <mark> tag is used to highlight text within a block of content. It's commonly used to emphasize or draw attention to specific words or phrases.
<p>This is a <mark>highlighted</mark> word in a sentence.</p>
3. <time>
The <time> tag is used to represent dates and times in a machine-readable format. It's particularly helpful for indicating when an article was published or an event is scheduled.
<p>The conference will take place on <time datetime="2023-12-26">December 26, 2023</time>.</p>
4. <abbr>
The <abbr> tag is used to define abbreviations and acronyms. When users hover over the abbreviated text, a tooltip displays the full expansion of the abbreviation.
<p><abbr title="World Wide Web">WWW</abbr> is an essential part of the internet.</p>
5. <progress>
The <progress> tag is used to create a progress bar for tasks that are in progress. You can set the value attribute to specify the current progress.
<progress value="70" max="100">70% complete</progress>
6. <meter>
The <meter> tag is used to display a gauge or meter for measurements within a specified range. It's commonly used for displaying values like ratings or battery levels.
<meter value="4" min="0" max="5">4 out of 5 stars</meter>
7. <wbr>
The <wbr> tag is used to suggest a line break opportunity within a word. It's useful for specifying where long words can break when wrapping text.
<p>This is a longwordthatmightbreakhere<wbr>andcontinue.</p>
These are just a few of the less commonly used HTML tags that can enhance your web development skills and improve the user experience on your website. While they may not be needed in every project, having these tags in your toolkit can be valuable when the right situation arises. Experiment with them and explore how they can make your web content more dynamic and user-friendly.
Top comments (2)
Really, I don't use those tags before. Thanks
I made a small HTML tags memory game, you should try it ! There’s an explanation for each tags as well.
html-tag-memory-test.netlify.app/