Why Native HTML Still Matters
In the age of multiple frameworks and components libraries, it’s easy to forget just how powerful HTML can be.
The modern web platform has evolved, and so many underused HTML elements offer today native behaviour, performance benefits (without JavaScript or 3rd party libraries), and accessibility features.
The HTML elements
In the next part I’ll show some of those underused HTML elements displaying a brief description, showing a code example and some advantages / benefits of using this element.
<details>and<summary><dialog>.showModal() and .close()<template><picture>+ srcset<abbr>,<mark>,<time>
Details and summary
Need a toggable FAQ or a collapsible section / accordion? Don’t need to write a bunch of lines of javascript, use the <details> and <summary> for a full functionality with accessibility and keyboard-navigate widget.
In addition to the usual events supported by HTML elements, the <details> element supports the toggle event, which is dispatched to the <details> element whenever its state changes between open and closed.
Benefits:
- Keyboard accessible
- Toggle behavior baked in
- Great for FAQs, collapsibles, logs
Example:
dialog .showModal() and .close()
Building modals can be tricky with focus traps, overlays, open and close logics.
The <dialog> element can handle it for you with keyboard accessibility built-in and the usage of .showModal() method to display a modal dialog, .show() method to display a non-modal dialog or the .close() method to close the modal. Can be also closed with the Esc key.
Benefits:
- Keyboard-trap and focus management is automatic
- Simple JS API: .showModal(), .show(), .close()
- Accessible out of the box
template
Templates are invisible fragments of DOM that you can clone dynamically in javascript. Serving as a mechanism for holding HTML fragments, which can either be used later via JavaScript or generated immediately into shadow DOM.
Perfect for building client-side UIs or rendering CMS contents without frameworks.
Benefits:
- Building Web Components
- Lazy rendering
- Dynamic content without cluttering the DOM
picture + srcset
The <picture> HTML element contains zero or more <source /> elements and one <img /> element to offer alternative versions of an image for different display/device scenarios.
The srcset attribute is used to offer a list of possible images based on size or the display’s pixel density / pixel per inch (ppi).
Benefits:
- Load appropriate image sizes per screen
- Huge performance gains on mobile
- Ideal for hero images and art direction
abbr, mark, time
The <abbr> HTML element is used for abbreviations or acronyms. You can add a title attribute to show the full meaning when it’s not written out. If used, the title must only include the full description and nothing extra.
Benefits:
- Hover/click shows definition
- Accessibility for screen readers
The <mark> HTML element represents text which is marked or highlighted for reference or notation purposes due to the marked passage’s relevance in the enclosing context.
<mark> accessibility:
The presence of the mark element is not announced by most screen reading technology in its default configuration. It can be made to be announced by using the CSS content property, along with the ::before and ::after pseudo-elements.
Benefits:
- Semantic highlighter
- Useful for filtering, search UI
The <time> HTML element represents a specific period in time. It may include the datetime attribute to translate dates into machine-readable format, allowing for better search engine results or custom features such as reminders.
Benefits:
- Machine-readable for search engines
- Can be used in countdowns, events, articles
Conclusions
Many developers default to using <div> and <span> because that’s how frameworks typically introduce HTML. However, gaining a solid understanding of modern HTML can simplify code, boost performance, and enhance user experience.
Many JavaScript-heavy components (modals, accordions, lazy loaders) can now be built with zero JS using native HTML. Using semantic elements improves accessibility, SEO, and code maintainability.
Extra
For more details on the elements mentioned, check the MDN documentation links below for a more in-depth explanation and more examples:
