HTML is a simple language, but its vocabulary is larger than you might realize. Learn all about some of the more unusual tags you can use.
Key Takeaways
- Use and tags to create expandable sections, providing a user-friendly experience and maintaining a clean design.
- Highlight important content with the tag, drawing attention to keywords, phrases, or search results on your webpage.
- Add semantic meaning to dates and times using the tag, improving accessibility for users with disabilities who use screen readers.
By exploring these unique tags, you can enhance the functionality of your web apps, making them stand out from the crowd.
1. <details> and <summary>
Imagine you have extensive information or content that you don't want to overwhelm a reader with immediately. The <details> and <summary> tags come to the rescue!
These tags work together to create an expandable section with a title or summary that your website users can click to reveal. By default, the content within the details element will not display, keeping your page neat and organized.
Your visitors can easily click on the summary to access the hidden information.
<details>
<summary>Click to reveal more information</summary>
<p>This content will be hidden by default but will appear when the user
clicks the summary.</p>
</details>
With these tags, you can hide large sections of text, code, or other information, providing a user-friendly experience while maintaining a clean design. They may even help you refine your skills as an interface designer.
2. <mark>
The <mark> tag lets you highlight specific parts of your content, making them visually stand out. When you use the <mark> element, browsers typically apply a yellow background color to the text inside, drawing the reader's attention to it.
This feature is particularly useful when you want to emphasize keywords, important phrases, or search results on your webpage.
<p>
You can use the <mark>mark</mark> tag to highlight important words or
phrases.
</p>
For instance, if your website has search functionality, you can use the <mark> tag to highlight the search query matches in the results, making it easier for users to find relevant information.
3. <s>
Have you ever encountered situations where content becomes outdated or no longer relevant, but you still want to display it for historical purposes or to indicate changes over time?
Enter the <s> tag! It stands for strikethrough and renders any content within the element with a line through the middle.
<p>
This product is <s>out-of-stock</s> currently available at a discounted
price!
</p>
In this example, the out-of-stock text will display with a line through it, indicating that the product's stock status has changed.
4. <time>
When you want to add semantic meaning to dates and times in your content, the <time> tag comes in handy.
Using the datetime attribute, you can specify a machine-readable version of the date or time, which helps browsers, search engines, and screen readers understand the context.
<p>
The Declaration of Independence was signed on
<time datetime="1776-07-04">July 4, 1776</time>.
</p>
By using the <time> tag, you give your content more structure and make it accessible to a wider range of users, including those with disabilities who use screen readers.
5. <bdi>
Managing text in multiple languages on your webpage can sometimes be challenging, especially when each part requires different formatting.
The <bdi> tag comes to the rescue by isolating a part of text that the browser should treat differently due to different language requirements.
<p>
<bdi>5,000</bdi> people attended the conference.
</p>
In this example, the <bdi> element wraps the number 5,000. This ensures that, if the surrounding text is in a different language or requires different formatting, it won't interfere with the number.
6. <ruby>, <rt>, <rp>
For East Asian typography, where pronunciation guides, furigana, or other annotations are commonly used above or below characters, the <ruby>, <rt>, and <rp> tags come into play.
<p>
I'm learning
<ruby>漢<rt>かん</rt></ruby>字<rp>(</rp><rt>Kanji</rt><rp>)</rp>.
</p>
In this example, the <ruby> element contains the character 漢 (Kanji), and the <rt> element contains the pronunciation かん (kan). The <rp> elements provide fallback parentheses for browsers that do not support ruby annotations.
7. <wbr>
When you have long words that may break your layout, the <wbr> tag is here to help. It suggests an opportunity for a line break (word break opportunity) in a long word, where the browser may choose to wrap the text.
<p>
This is an example of a long url: https://www.example.org/<wbr>with/a/long/path/and/a?query=string.
</p>
In the example above, the long URL includes a <wbr> element which lets the browser break it into two lines if necessary, preserving the layout of the surrounding content.
8. <sub> and <sup>
For scientific or mathematical notations, chemical formulas, or footnotes, you can use the <sub> and <sup> tags for subscript and superscript text, respectively.
<p>
The chemical formula for water is H<sub>2</sub>O,
and the Pythagorean theorem is
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>.
</p>
This example uses the <sub> tag to display the 2 in H2O as a subscript, while the <sup> tags display the exponents in the Pythagorean theorem.
9. <meter>
Need to represent scalar measurements within a known range, such as disk usage, ratings, or exam scores? The <meter> tag has got you covered.
Using the value, min, and max attributes, you can define the current value, the minimum value, and the maximum value of the measurement, respectively.
<meter value="75" min="0" max="100">75%</meter>
In this example, the <meter> element represents an exam score of 75%.
10. <dialog>
When you need to create a dialog box or a window overlay for modals or well-behaved modal pop-up interactions, the <dialog> tag is the way to go. You can use the open attribute to show the dialog box by default.
<dialog open>
<p>This is a dialog box!</p>
<button>Close</button>
</dialog>
In this example, a simple dialog box containing a paragraph and a close button shows when the page loads, thanks to the open attribute. You can customize the content and behavior of the dialog box using JavaScript for more advanced interactions.
11. <optgroup>
Use the <optgroup> tag to group related options within a <select> dropdown element. It allows you to organize and categorize options for easier navigation and selection.
- The <optgroup> tag is a container element that groups related <option> tags within a <select> element.
- It helps organize options by creating visual grouping or categorization within the dropdown menu.
- The <optgroup> tag requires a label attribute, which specifies the name or title of the option group.
- It can contain one or more <option> tags as its child elements, representing the individual options within the group.
For example:
<select>
<optgroup label="Asia">
<option value="kr">South Korea</option>
</optgroup>
<optgroup label="Europe">
<option value="de">Germany</option>
</optgroup>
</select>
This example groups the select dropdown into two sections: Asia, and Europe. Each group contains tags representing different countries within that region.
Enhance Your Proficiency in Web Development
Learning these lesser-known HTML tags can greatly improve your web development skills. Despite their lack of recognition, they offer valuable features for specific contexts.
Adding these tags to your skill set enhances interactivity, accessibility, and streamlines web development process. Remember, even though they may be unfamiliar, they have a significant impact on your journey as a web developer.