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

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