HTML isn't just that basic stuff you learned in your first coding class. It's evolved into a sophisticated language with elegant solutions for problems many developers needlessly solve with JavaScript or CSS. Check out these 14 HTML Tips Every Developer Should Know to deepen your understanding. In this article, we'll explore 5 underrated HTML tags you should be using (but probably aren't).

Too many developers reach for JavaScript and CSS when HTML can handle the job natively. I've seen countless projects where developers build complex accordion components with JavaScript when simple <details> and <summary> tags would do the trick with barely any code. Or they create elaborate responsive image solutions when <picture> already has this built in.

These 5 underrated HTML tags matter for three main reasons. First, semantic and specialized HTML tags make your site more accessible. Native elements come with keyboard navigation, screen reader support, and focus management that custom JavaScript often misses. For developers using Strapi, there's an opportunity to improve web accessibility by adopting semantic HTML practices as suggested in Strapi's blog. Using elements like <header>, <footer>, <article>, <section>, and <nav> enhances accessibility by providing context, helping screen readers and assistive technologies interpret content more accurately.

Second, these tags give you real SEO advantages. According to a study by Google, content in native HTML gets crawled and indexed more easily than content that needs JavaScript to render. The right semantic tag gives search engines clear signals about your content's purpose. For websites targeting multiple languages, using multilingual SEO best practices with semantic HTML can greatly enhance search visibility.

Third, these HTML elements create cleaner, more maintainable code. Native HTML reduces complexity, eliminates unnecessary dependencies, and typically performs better than JavaScript alternatives. Your code becomes more resilient when it uses built-in browser capabilities instead of custom implementations.

The five underrated tags we'll explore are powerful tools for more efficient, accessible, and search-friendly code. Master them and you'll solve common web development challenges more elegantly than before.

In brief:

• Native HTML tags like <details>, <dialog>, and <picture> can replace custom JavaScript solutions while improving accessibility and performance.
• Semantic HTML elements improve SEO by making content more easily crawlable and providing clear signals about content purpose.
• Using specialized tags like <time> and <output> creates machine-readable data that benefits both search engines and users with assistive technologies.
• Modern HTML tags reduce code complexity and dependencies while providing built-in accessibility features that many custom implementations miss.

Tag #1: The <details> and <summary> Elements

The <details> and <summary> elements are HTML gems hiding in plain sight. They create native accordion widgets without a single line of JavaScript. If you've been using JavaScript libraries for expandable content sections, these elements offer a much simpler solution.

Key Benefits

Using <details> and <summary> elements gives you several advantages:

• Zero JavaScript required: Create expandable/collapsible content sections without writing or loading any JavaScript code.
• Built-in accessibility: These elements include built-in keyboard support, proper ARIA roles, and screen reader compatibility automatically.
• Reduced page clutter: Keep your pages clean and focused by hiding secondary content until it's needed.
• Progressive enhancement: Content remains accessible even if JavaScript fails to load or is disabled.
• Semantic markup: Clearly communicates the expandable nature of the content to both users and search engines.

The browser handles all the interaction for you, including toggling the open/closed state when users click or press a key. That means less code to maintain and fewer things that can break.

Practical Code Examples

Creating an expandable section is remarkably simple. Here's how you can implement a basic FAQ section:

1<details>
2  <summary>What is your return policy?</summary>
3  <p>We offer a 30-day money-back guarantee on all purchases.</p>
4</details>
5
6<details>
7  <summary>Do you ship internationally?</summary>
8  <p>Yes, we ship to over 50 countries worldwide with varying shipping rates.</p>
9</details>
10
11<details>
12  <summary>How can I track my order?</summary>
13  <p>Once your order ships, you'll receive a tracking number via email that you can use on our website.</p>
14</details>

The <summary> element serves as the visible header that users can click to expand or collapse the content. Everything else inside the <details> element is hidden until expanded.

You can style these elements with CSS to match your design system:

1details {
2  margin-bottom: 1rem;
3  border: 1px solid #ccc;
4  border-radius: 4px;
5  padding: 0.5rem;
6}
7
8summary {
9  font-weight: bold;
10  cursor: pointer;
11}
12
13details[open] summary {
14  margin-bottom: 0.5rem;
15}

Real-world Applications

These elements shine in several common scenarios:

• FAQ pages: Create clean, interactive FAQ sections without JavaScript.
• Documentation sites: Organize detailed technical information in expandable sections.
• Product specifications: Show important details upfront while keeping additional specifications available but collapsed.
• Terms and conditions: Make legal information available without overwhelming the page.
• Settings panels: Group related settings in collapsible sections.

For example, when you build a school website with Strapi, you can use the <details> and <summary> elements to create interactive FAQ sections.

Strapi v5 utilizes various components and design systems within its admin interfaces, enhancing the user experience for content editors.

While browser support for <details> and <summary> is excellent in modern browsers, older browsers like Internet Explorer might need fallbacks. For projects supporting legacy browsers, consider using feature detection for JavaScript alternatives.

By using these semantic elements, you're writing less code and providing a better experience for users with assistive technologies. The browser's built-in accessibility features ensure these elements work well with screen readers and keyboard navigation, making your content more accessible to all users.

Tag #2: The <dialog> Element

The HTML <dialog> element might be the most underappreciated native solution on the web. Still using complex JavaScript libraries for modals and dialog boxes? Time to rethink that. This built-in element creates standardized dialog interfaces without the baggage of external dependencies.

Key Benefits

The <dialog> element beats custom modal implementations in several key ways:

• Built-in focus management: When you open a modal dialog, the browser automatically restricts keyboard focus to elements within the dialog. This prevents users from tabbing outside the dialog while it's open, a common accessibility issue in custom implementations.
• Keyboard navigation support: Native dialogs support closing via the Escape key by default, providing expected user interactions without additional code.
• Light DOM: Unlike many JavaScript modal libraries that create complex DOM structures, the <dialog> element is a simple, lightweight addition to your markup.
• Backdrop handling: When using the showModal() method, browsers automatically create and manage a backdrop that blocks interaction with page content behind the dialog.

Implementation Examples

Implementing a dialog with the native element is refreshingly simple:

1<dialog id="myDialog">
2  <form method="dialog">
3    <h2>Contact Us</h2>
4
5    <label for="name">Name:</label>
6    <input type="text" id="name" name="name">
7
8    <label for="email">Email:</label>
9    <input type="email" id="email" name="email">
10
11    <div class="actions">
12      <button value="cancel">Cancel</button>
13      <button value="submit">Submit</button>
14    </div>
15  </form>
16</dialog>
17
18<button id="openDialog">Open Dialog</button>

The JavaScript needed to control the dialog is minimal:

1const dialog = document.getElementById('myDialog');
2const openButton = document.getElementById('openDialog');
3
4openButton.addEventListener('click', () => {
5  dialog.showModal();
6});

The method="dialog" attribute on the form automatically closes the dialog when a button inside it is clicked, returning the button's value. You can also programmatically close the dialog with dialog.close().

Accessibility Advantages

The <dialog> element enhances accessibility and ease of use in several ways:

• It receives the appropriate ARIA role (dialog or alertdialog) automatically.
• Screen readers announce the dialog when it appears.
• Focus is trapped within the dialog when using showModal().
• When closed, focus returns to the element that opened it.

When comparing native dialogs to custom implementations, the performance benefits are clear. Custom modal solutions typically require:

1. A significant amount of JavaScript for managing focus, keyboard interactions, and backdrop clicks.
2. Additional CSS for styling the overlay, animations, and positioning.
3. Event listeners for keyboard and mouse interactions.
4. ARIA attributes for accessibility.

All of this comes built-in with the <dialog> element, reducing your code footprint and improving performance while providing a better, more accessible user experience.

Content management systems like Strapi v5 use native dialog elements, including dialogs, notifications, and modals, to create more efficient and accessible admin interfaces, enhancing user interactions and accessibility.

Tag #3: The <picture> Element

The <picture> element is a powerhouse in modern HTML for handling responsive images, yet many developers still stick with basic <img> tags and CSS. Here's why <picture> deserves a spot in your daily coding toolkit.

Responsive Image Superpowers

What makes the <picture> element special is how it delivers truly responsive images without complex CSS or JavaScript. Unlike standard <img> tags, <picture> gives you precise control over which image gets served based on different conditions:

• You can specify different image sources for different viewport sizes.
• You can serve different image crops for art direction (not just resizing).
• You can deliver modern image formats like WebP to supporting browsers while providing fallbacks for others.

This moves image optimization decisions into the HTML itself, making them declarative rather than requiring additional code.

According to a 2023 study by web.dev, implementing <picture> tags properly can reduce image payload by up to 25% and significantly improve page load times. That's a substantial performance win with minimal effort.

Code Implementation

Here's how you can implement a responsive image solution using the <picture> element:

1<picture>
2  <!-- Large desktop screens get this high-res landscape crop -->
3  <source 
4    media="(min-width: 1200px)" 
5    srcset="images/hero-large.webp" 
6    type="image/webp">
7  
8  <!-- Medium screens get a different crop -->
9  <source 
10    media="(min-width: 800px)" 
11    srcset="images/hero-medium.webp" 
12    type="image/webp">
13  
14  <!-- Smaller screens get a more focused vertical crop -->
15  <source 
16    srcset="images/hero-small.webp" 
17    type="image/webp">
18  
19  <!-- Fallback for browsers that don't support WebP or picture -->
20  <img 
21    src="images/hero-fallback.jpg" 
22    alt="Product hero image" 
23    loading="lazy">
24</picture>

In this example, we're not just serving different sizes of the same image—we're potentially serving completely different crops that make sense for each screen size, while also taking advantage of WebP for browsers that support it.

Note that the <img> element within the <picture> is required as a fallback. If a browser doesn't understand the <picture> element, it will simply use the <img> tag instead.

Performance Impact

The performance benefits of properly implemented <picture> elements are substantial. By serving appropriately sized and formatted images, you can dramatically reduce the amount of data your users need to download. Implementing effective image optimization strategies can further enhance these benefits.

This directly impacts your Core Web Vitals, particularly:

• Largest Contentful Paint (LCP): Optimized images load faster.
• Cumulative Layout Shift (CLS): Properly sized images prevent layout shifts.
• First Input Delay (FID): Reducing overall page weight improves interactivity.

These metrics aren't just technical measurements—they directly affect your SEO rankings as Google increasingly emphasizes page experience signals. The reduction in image payload mentioned earlier can make the difference between a page that loads quickly and one that causes users to abandon your site.

What makes <picture> particularly valuable is that it handles these optimizations on the HTML level. The browser can make intelligent decisions about which image to download before it even begins the download process, unlike JavaScript solutions that often require downloading code first, then determining which image to load.

Strapi v5 does not include integrated support for responsive images. Developers should utilize the isImage or isOptimizableImage methods for image handling based on their specific needs.

Tag #4: The <time> Element

The <time> element might look unassuming, but it's one of those HTML gems that adds significant value behind the scenes. While it doesn't change how your dates and times look, it adds machine-readable data that both search engines and users benefit from.

Machine-Readable Timestamps

The real magic of the <time> element comes from its datetime attribute, providing a standardized format for dates and times that machines can parse. This creates structured data that's invisible to users but incredibly valuable to search engines.

1<p>The conference starts on <time datetime="2024-09-15T09:00:00-07:00">September 15 at 9am</time>.</p>

In this example, users see the friendly text "September 15 at 9am," while machines get the precise ISO-formatted date and time. This standardized format eliminates confusion about whether "9/15/24" means September 15 or May 9, depending on regional formatting.

SEO and Accessibility Benefits

Using the <time> element can boost your SEO. According to the 2022 Web Almanac by HTTP Archive, properly marked-up time-related content improves search engine understanding and indexing. This especially matters for:

• Blog posts and news articles (publication dates).
• Event pages (start and end times).
• Product launches and limited-time offers.
• Historical timelines.

For accessibility, screen readers can better interpret and announce dates and times with proper <time> markup. This improves the experience for users with visual impairments who use assistive technologies.

When combined with Schema.org markup, the <time> element becomes even more powerful for SEO:

1<article>
2  <h1>Latest Company News</h1>
3  <p>
4    Published: <time datetime="2024-03-15T14:30:00Z" itemprop="datePublished">March 15, 2024</time>
5  </p>
6  <!-- Article content -->
7</article>

This markup helps search engines understand exactly when content was published, potentially improving its appearance in search results with accurate timestamps.

Practical Applications

Here are some common ways to use the <time> element in projects:

1. Blog post timestamps:

1<p>Posted on <time datetime="2024-03-15">March 15, 2024</time></p>

2. Event scheduling:

1<p>The webinar runs from <time datetime="2024-04-01T13:00:00-05:00">1pm</time> to <time datetime="2024-04-01T14:30:00-05:00">2:30pm EST</time>.</p>

3. Historical references:

1<p>The company was founded in <time datetime="1999-06">June 1999</time>.</p>

4. Business hours:

1<p>Our store is open Monday to Friday, <time datetime="09:00">9am</time> to <time datetime="17:00">5pm</time>.</p>

By implementing the <time> element consistently across your website, you create a more semantically rich experience benefiting both users and search engines. While users won't see any visual difference, the improved machine readability can lead to better search performance and a more accessible website.

Strapi v5 enhances SEO capabilities through the integration of SEO plugins, allowing developers and content creators to manage elements like meta tags and structured data. However, formatting timestamps for SEO purposes requires customization within the CMS or handling by the frontend.

Tag #5: The <output> Element

Ever needed to display calculation results in your web forms? Meet the <output> element, one of HTML's hidden gems that can transform how you handle dynamic form calculations.

The <output> element provides a semantic container specifically designed to display the results of calculations or user actions. Unlike a regular <span> or <div>, it tells browsers and assistive technologies exactly what this content represents.

Dynamic Form Calculations

The main purpose of the <output> element is to show calculation results within a form. Using the for attribute, you can connect the output with its input sources:

1<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
2  <input type="range" id="a" value="50" min="0" max="100"> +
3  <input type="number" id="b" value="50"> =
4  <output name="result" for="a b">100</output>
5</form>

This example shows a simple calculator where the result updates in real-time as the user adjusts the inputs. The for="a b" attribute creates a clear relationship between the inputs and output, improving both semantics and accessibility.

Accessibility Improvements

One of the biggest benefits of the <output> element is its accessibility. According to Scott O'Hara's research, browsers automatically treat <output> as an ARIA live region, meaning screen readers announce changes to its content without any extra code.

If you were to use a regular <span> or <div> for calculation results, you'd need to add ARIA attributes manually:

1<!-- The traditional approach requires extra ARIA attributes -->
2<div aria-live="polite" id="result">100</div>
3
4<!-- The <output> element handles this natively -->
5<output name="result" for="a b">100</output>

This automatic live region behavior ensures that screen reader users know when values change, making your interactive forms more accessible with less effort.

Interactive Code Examples

The <output> element works best in interactive scenarios. Here's a practical example showing a price calculator:

1<form oninput="total.value = (parseFloat(price.value) * parseInt(quantity.value)).toFixed(2)">
2  <label for="price">Unit Price ($): </label>
3  <input type="number" id="price" value="10.00" step="0.01" min="0">
4
5  <label for="quantity">Quantity: </label>
6  <input type="number" id="quantity" value="1" min="1">
7
8  <div class="total">
9    Total Cost: $<output name="total" for="price quantity">10.00</output>
10  </div>
11</form>

The form updates the total cost in real-time as users adjust either the price or quantity inputs, with the result semantically represented as an output value.

Beyond calculation results, the <output> element works great for displaying slider interactions, form validations, or any dynamic value that comes from user input.

While the <output> element has excellent browser support today, it's a relatively newer HTML addition. For older browsers, you can provide simple fallbacks by styling the element as inline or block depending on your needs.

By using this semantic tag instead of generic containers, you create more meaningful HTML that better communicates your content's purpose and improves the experience for all users, especially those using assistive technologies.

Headless CMS platforms like Strapi v5 use semantic principles in their form interfaces to enhance accessibility. This includes proper HTML structures such as fieldsets and labels, improving usability and reducing reliance on custom JavaScript for basic form functionalities.

Implementing These Tags: Best Practices and Fallbacks

Modern browsers generally support semantic HTML elements well, but inconsistencies still exist across different versions and platforms. To make your semantic HTML work everywhere, you need implementation strategies that handle varying support levels.

Browser Compatibility Strategies

When implementing semantic HTML tags, know their current browser support. According to the 2023 State of the Web report, elements like <article>, <section>, and <nav> have excellent support across modern browsers, but others like <details> and <dialog> may need extra consideration.

For optimal implementation:

1. Research current browser support before implementing a tag.
2. Use a progressive enhancement approach.
3. Provide appropriate fallbacks for unsupported browsers.
4. Test across multiple browsers and devices.

Progressive enhancement ensures your content works regardless of browser compatibility. Start with a baseline experience that works everywhere, then enhance it for browsers supporting more advanced features.

As you consider updating your development practices, migrating to a headless CMS can facilitate the transition to semantic HTML and modern web standards.

Feature Detection Techniques

Feature detection works better than browser detection since it tests for specific capabilities rather than making assumptions based on the browser. Here's how to implement feature detection for semantic HTML elements:

1// Feature detection for <details> element
2if ('open' in document.createElement('details')) {
3  // <details> is supported
4} else {
5  // Apply fallback for unsupported browsers
6  // [Fallback code here]
7}

For elements like <meter> or <progress>, you can create CSS-based fallbacks:

1/* Fallback styling for browsers that don't support <meter> */
2.meter-fallback {
3  background: #eee;
4  border: 1px solid #ccc;
5  height: 1em;
6  position: relative;
7}
8.meter-fallback-value {
9  background: #4CAF50;
10  height: 100%;
11}

Then apply the fallback conditionally:

1if (!('value' in document.createElement('meter'))) {
2  // Replace <meter> elements with fallback HTML and styles
3  // [Fallback code here]
4}

Strapi v5 provides a robust content management system focusing on installation, setup, and efficient use, though it doesn't specifically address automatic browser compatibility for modern HTML elements in admin interfaces.

When choosing a CMS, exploring the headless CMS comparison on Strapi's blog can guide you in selecting a platform that effectively supports modern web technologies and semantic HTML practices.

Testing and Validation

To ensure consistent behavior across browsers:

1. Test on multiple browsers including Chrome, Firefox, Safari, and Edge.
2. Don't forget mobile browsers, which may have different support levels.
3. Use validation tools to check your HTML structure.
4. Consider using testing services like BrowserStack or Sauce Labs for comprehensive testing.

Tools like the W3C HTML Validator can help identify structural issues with your markup. For JavaScript-based fallbacks, use tools like ESLint to ensure your code follows best practices.

When testing your implementations, pay special attention to:

• Visual rendering differences.
• Functionality of interactive elements.
• Accessibility features.
• Performance impacts of fallbacks.

By combining these strategies—progressive enhancement, feature detection, and thorough testing—you can implement semantic HTML elements confidently, knowing they'll work across the diverse landscape of browsers and devices your users might be using.

Start a Free Cloud Trial

Include 14 days, no credit card, Strapi-optimized stack including database, email provider and CDN without having to manage it all yourself.

• Start a free cloud trial

Embracing Modern HTML for Better Web Development

Sometimes the best tools aren't flashy new frameworks—they're thoughtful improvements to HTML itself. These 5 underrated HTML tags you should be using (but probably aren't) show how native HTML solutions can transform your projects without complex JavaScript.

By adding these semantic elements to your toolkit, you're creating experiences that are more accessible, faster, and better optimized for search engines. The native browser support for expandable content, responsive images, and proper time formatting lets you build sophisticated interfaces with fewer dependencies.

Tim Berners-Lee, who invented the World Wide Web, said: "The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." This philosophy lives in these modern HTML tags, which support accessibility without extensive ARIA attributes or custom JavaScript.

These small HTML improvements deliver big benefits:

• Better performance from reduced JavaScript.
• Improved accessibility for assistive technology users.
• Enhanced SEO through proper semantic structure.
• Faster development with browser-native solutions.
• Future-proof code that follows web standards.

To ensure you're covering all aspects of SEO in your development process, consult this SEO checklist for developers.

Try these tags in your next project. Replace a custom accordion with the <details> element, or improve your responsive images with <picture>. You'll find that modern HTML not only simplifies your code but creates a better experience for everyone who visits your site.

Strapi v5 supports the use of semantic HTML elements, enhancing accessibility, SEO, and code maintainability. It offers SEO tools for managing meta tags and structured data, aiding in the creation of web pages with structured and semantic content.

By adopting semantic HTML elements and utilizing a headless CMS, frontend developers can create more efficient, accessible, and maintainable applications. Semantic HTML elements like <header>, <footer>, <article>, and <nav> improve accessibility and maintainability by providing meaningful structure to content, which is beneficial for screen readers and search engine optimization. A headless CMS offers flexibility, scalability, and enhanced security by decoupling the content management from the presentation layer, allowing developers to use any technology for the frontend. When evaluating options, consider reviewing factors for choosing a headless CMS to find the best fit for your project.

Strapi 5 enhances support for modern web practices and semantic HTML, facilitating the use of semantic HTML elements to improve accessibility and SEO. It also supports structured content and SEO tools for managing meta tags and structured data, essential for modern web development. Learn what's new in Strapi 5 to stay updated on the latest features.

Try these tags in your next project. You'll find that modern HTML not only simplifies your code but creates a better experience for everyone who visits your site.