11 Lesser-Known HTML Tags for Advancing Your Web Development Skills

Published a year ago

Let's explore some lesser-known HTML tags that can make your web apps shine and stand out.

As a web developer, you're probably familiar with basic HTML tags like <div>, <p>, and <img> that shape the structure and content of your web pages. But did you know that HTML offers even more cool features? Let's explore some lesser-known HTML tags that can make your web apps shine and stand out.

1. Expandable Sections with <details> and <summary>: Imagine you have a lot of information to share, but you don't want to overwhelm your visitors. That's where the <details> and <summary> tags come in. They work together to create a collapsible section that users can click to reveal. Check out this example:

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

2. Highlight with <mark>: Want to make certain parts of your text stand out? The <mark> tag lets you highlight content, like important keywords or search results, making them more noticeable:

<p>You can use the <mark>mark</mark> tag to highlight important words or phrases.</p>

3. Show Changes with <s>: When something is no longer relevant, but you want to keep it visible, use the <s> tag to strike through the text and indicate a change:


<p>This product is <s>out-of-stock</s> currently available at a discounted price!</p>

4. Semantic Dates with <time>: For meaningful dates and times, the <time> tag helps browsers and screen readers understand their context. Specify a machine-readable version using the datetime attribute:


<p>The Declaration of Independence was signed on <time datetime="1776-07-04">July 4, 1776</time>.</p>


5. Handle Multilingual Text with <bdi>: When dealing with different languages and formatting, the <bdi> tag isolates text, ensuring it's treated correctly:


<p><bdi>5,000</bdi> people attended the conference.</p>


6. East Asian Typography with <ruby>: For pronunciation guides or annotations, use the <ruby>, <rt>, and <rp> tags:


<p>I'm learning <ruby>漢<rt>かん</rt></ruby>字<rp>(</rp><rt>Kanji</rt><rp>)</rp>.</p>


7. Manage Long Words with <wbr>: Prevent layout breakage by suggesting line breaks within long words:


<p>This is an example of a long url:
https://www.example.org/<wbr> with/a/long/path/and/a?query=string.</p>


8. Subscript and Superscript with <sub> and <sup>: Use these tags for scientific notations or footnotes:


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


9. Display Measurements with <meter>: Represent measurements within a known range using the <meter> tag:


<meter value="75" min="0" max="100">75%</meter>


10. Create Dialogs with <dialog>: Craft modal dialog boxes for interactions using the <dialog> tag:


<dialog open> <p>This is a dialog box!</p> <button>Close</button> </dialog>


11. Group Options with <optgroup>: Organize dropdown options with the <optgroup> tag:


<select> <optgroup label="Asia"> <option value="kr">South Korea</option> </optgroup> <optgroup label="Europe"> <option value="de">Germany</option> </optgroup> </select>

By using these unique HTML tags, you can add creative and functional elements to your web development projects, making them more engaging and user-friendly.

© 2024 TechieDipak. All rights reserved.