11 Lesser-Known HTML Tags That Can Enhance Your Web Development Skills

HTML (Hypertext Markup Language) is the backbone of web development, allowing us to structure and present content on the internet. While most developers are familiar with popular HTML tags like <div> and <p>, there are lesser-known tags that can enhance the functionality and aesthetics of web pages. In this article, we'll explore 14 HTML tags that you may not be aware of but can bring added value to your web development projects.

1. <details> and <summary>

The <details> and <summary> tags work together to create collapsible content sections on a web page. They provide a way to hide and reveal additional information, enhancing the user experience and saving space on the page.

• The <details> tag is used to create a container for the collapsible content. It acts as a wrapper for the content that can be expanded or collapsed.
• The <summary> tag is used as the heading or title for the collapsible section. It is typically placed inside the <details> tag and provides a clickable element that toggles the visibility of the content.
• When the collapsible section is collapsed, only the <summary> element is visible, usually with an arrow or a customizable marker indicating that it can be expanded. When the user clicks on the <summary> element, the content inside the <details> tag is revealed or hidden, depending on its previous state.
• The <details> and <summary> tags can be styled using CSS to customize their appearance, such as changing the arrow icon or adding animations to the expanding and collapsing effects.
• These tags are especially useful for displaying additional information, such as FAQs, long descriptions, or hidden content that can be optionally revealed by the user.

For example:

The above example creates a collapsible section on the web page. Initially, only the text Show More is visible. When the user clicks on it, the <p> element containing the sentence This is some additional content that will be revealed when the user clicks on the 'Show More' text will be displayed below the summary.

2. <mark>

The <mark> tag is used to highlight or mark a specific portion of text within a document. It is typically used to indicate relevance, importance, or to draw attention to specific information.

• The <mark> tag is an inline element that visually highlights the enclosed text by applying a background color or other styling, depending on the browser's default rendering.
• This tag is commonly used in search results, where it helps users quickly identify the keywords or search terms that match their query within the displayed content.
• The <mark> tag does not provide any semantic meaning to the enclosed text. It is purely presentational and should be used sparingly to avoid overusing visual emphasis.

For example:

In this example, the phrase quick brown fox will be visually highlighted by the browser, typically with a yellow background or other distinctive styling.

3. <time>

The <time> tag is used to represent a specific date, time, or duration. It provides semantic meaning to the enclosed content and can be used for various purposes, such as displaying event dates, publication timestamps, or durations of time.

• The <time> tag is an inline element and should be used to enclose a specific time or date within the HTML document.
• It requires the use of the datetime attribute, which specifies the date and/or time in a machine-readable format following the ISO 8601 standard. This format ensures consistency and helps search engines, screen readers, and other tools understand the intended meaning.
• The <time> tag can be used in various scenarios, such as displaying publication dates, event times, or durations.

For example:

In this example, the <time> tag is used to mark up the publication date of an article, with the datetime attribute specifying the machine-readable format. This provides semantic meaning to the date and helps search engines and assistive technologies interpret it accurately.

4. <output>

The <output> tag is used to show the result of a calculation or an action performed by the user on a webpage. It's often used together with forms and JavaScript to display dynamic content.

• It is an inline element that can display the results of calculations or dynamic content.
• The <output> tag requires a for attribute to associate it with the input element that generated the output.
• It can also be used to display the value of form inputs or the outcome of user actions.

For example:

In this example, the <output> tag is used to display the result of a calculation performed based on user input. The form includes two number input fields, and when the user clicks the Calculate button, the result of the calculation is shown in the <output> element. JavaScript can be used to perform the calculation and update the <output> element dynamically.

5. <meter>

The <meter> tag is used to represent a measurement within a predefined range. It allows you to visually display measurements, such as progress bars or ratings, in a more meaningful way.

• The <meter> tag requires two attributes: value and min and max. The value attribute specifies the current value of the meter, while min and max define the minimum and maximum values of the range.
• Additionally, you can use the low, high, and optimum attributes to define thresholds for the meter. The low attribute represents the lower boundary of the range, high represents the upper boundary, and optimum specifies the optimal value within the range.
• By default, browsers render the <meter> tag as a horizontal bar, with the filled portion indicating the value. However, you can customize its appearance using CSS to match your design requirements.
• The <meter> tag can be useful in various scenarios, such as progress tracking, ratings, file upload limits, or any situation where you want to visually represent a value within a specified range.

For example:

In the above example, the <meter> tag represents a value of 75 within a range of 0 to 100. The low attribute is set to 30, high to 70, and optimum to 80, allowing browsers to apply different styles based on the value's position within the range.

6. <sub> and <sup>

The <sub> and <sup> tags are used to represent subscript and superscript text respectively in HTML. They are typically used to display smaller text below or above the regular text, often used for mathematical equations, chemical formulas, footnotes, and other similar content.

• The <sub> tag is an inline element that is used to render subscript text. It is commonly used for mathematical or chemical formulas where certain characters or numbers need to be displayed in a smaller size below the baseline of the surrounding text.
• The <sup> tag is also an inline element used to render superscript text. It is typically used to display characters or numbers in a smaller size above the baseline, such as in exponent notation or footnotes.
• These tags can be nested within other inline elements, such as <span> or <p>, to apply subscript or superscript to specific sections of text.

For example:

In the examples above, the <sub> tag is used to display subscript text, such as in chemical formulas like H₂O for water, while the <sup> tag is used to show superscript text, as seen in mathematical equations like c² = a² + b² for the Pythagorean theorem. These tags are useful for representing specialized notations and formatting within the context of scientific, mathematical, or linguistic content.

7. <cite>

The <cite> tag is used to mark up a reference or citation to a creative work within the content of a web page. It is typically used to indicate the title of a book, article, song, movie, or other artistic or intellectual creations.

• The <cite> tag is an inline element and should be used within a paragraph or block of text where the citation or reference is being made.
• It helps provide semantic meaning and structure to the citation, allowing search engines and assistive technologies to identify and distinguish the cited content.
• By using the <cite> tag, you can indicate that a particular piece of text represents the title or name of a work, providing clarity and context to your readers.
• It is important to note that the <cite> tag should not be used solely for styling purposes. Instead, it should be used when there is a genuine need to mark up a citation or reference within the content.

For example:

In the above examples, the <cite> tag is used to mark up the titles of the novel and the research article, respectively, providing a clear indication of the referenced works within the surrounding content.

8. <kbd>

The <kbd> tag is used to indicate user input, typically keyboard input, within the content of an HTML document. It is often used to represent keys or key combinations that can be pressed by the user.

• The <kbd> tag is an inline element and is used to enclose the text or content that represents the user input.
• It is commonly styled to resemble the appearance of a physical keyboard key, using CSS properties such as background color, border, and font styles.
• The <kbd> tag is particularly useful when documenting keyboard shortcuts or providing instructions for user interactions on a website or in a web application.

For example:

This example visually represents the keyboard shortcut Ctrl + S using the <kbd> tag, making it clear to users which keys need to be pressed to perform the action of saving a document.

9. <bdi>

The <bdi> (Bi-Directional Isolation) tag is used to isolate a span of text that might be in a different language or have a different directionality than the surrounding text. It is particularly useful when working with multilingual content or content with mixed directionality.

• The <bdi> tag is an inline element that indicates to the browser that the text within it should be treated as a separate unit with its own directionality.
• This tag is particularly useful when dealing with user-generated content, such as comments or forum posts, where users might input text in different languages or scripts.
• The <bdi> tag can also be used in conjunction with CSS styling to apply specific styles to the isolated text, providing further flexibility in customization.

For example:

Here, the <bdi> tag is used to separate the Arabic text from the English text, allowing each segment to be displayed with its correct directionality. This tag ensures that the Arabic text is rendered from right to left, while the English text is rendered from left to right, providing proper visual representation for mixed-direction text.

10. <wbr>

The <wbr> tag, short for Word Break Opportunity, is an inline element used to specify a potential line break within a word. It is particularly useful for long words or URLs that may cause layout issues on narrow or small screens.

• The <wbr> tag is not intended to create a visible line break but rather provides a hint to the browser that a line break can occur at that point if necessary.
• It can be used to prevent long words or URLs from overflowing outside their container or causing horizontal scrolling.
• When the browser encounters a <wbr> tag, it evaluates whether a line break is necessary at that point based on available space. If needed, it breaks the word at the specified position.
• The <wbr> tag is especially helpful for responsive design, ensuring that content adapts well to different screen sizes and avoids layout issues caused by long, unbreakable words.

For example:

In the example above, the <wbr> tag is used to break the long word pneumonoultramicroscopicsilicovolcanoconiosis into smaller parts to enhance readability and prevent overflow.

11. <outgroup> tag

The <optgroup> tag is used 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:

In this example, the select dropdown is grouped into three sections: Asia, Europe, and North America. Each group contains tags representing different countries within that region.

Wrapping Up

To sum up, exploring less-known HTML tags can greatly improve your web development skills. While these tags may not be familiar to many developers, they offer unique features that can be incredibly useful in specific situations. Learning and using these tags can open up new possibilities and enhance the overall quality of your web projects. Adding these lesser-known HTML tags to your coding toolbox will bring more interaction, improve accessibility, and make your development process smoother. Remember, even though these tags may not be widely recognized, they have their purpose and can have a significant impact on your web development journey. So, don't hesitate to step outside your comfort zone and discover the potential of these lesser-known HTML tags. Embracing them will elevate your skills and make you stand out as a capable and resourceful web developer. Happy coding!

About the author

Paula Isabel Signo is a technical writer at OSSPH and a web developer. In her free time, Paula contributes to various open-source projects, volunteers in the community, and shares her knowledge by writing articles and tutorials. Connect with Paula here to learn more about her work and interests.