With the abstractions that modern front-end frameworks provide, it’s easy to dismiss plain old HTML as a thing of the past — a mere starting point that necessarily leads to “bigger and better” options. Developers with intimate knowledge of HTML are becoming rarer, and at the same time, experts in accessibility and progressive enhancement are needed like never before.
Despite its lack of “cool factor,” HTML is a dynamic tool that is very much alive and changing. In fact, developers have been using the lessons learned from building front-end applications to improve HTML itself, and as the language evolves, so too does its potential. And when it comes to cleaner, more deliberate development strategies, HTML can be used to replace functionality commonly generated with a hodgepodge of div and span elements, CSS overrides, and React abstractions.
So without further ado, here are a bunch of semantic HTML elements to help you on your quest to build a better web. If you’ve used these elements before, then congratulations. You are a hero and the web needs you. If these elements are new for you, then consider this an invitation to dive further into the intricacies of HTML.
Note: many of these elements have polyfills to support older browsers**, but always consult the documentation before using them.
<area> element, used within a
<map> element, defines a specific region of an image and optionally associates it with a link. Using these elements, you can create links around certain parts of an image.
[<base>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) element creates the root URL to use relative URLs in an HTML document.
It can even be accessed within scripts using
<head> <base href="https://www.myurl.com/" /> </head> <body> <a href="suburl">Visit https://www.myurl.com/suburl</a> </body>
The Citation element defines a reference to a cited creative work.
<img src="the_alchemist_cover.jpg" alt="The Alchemist Book Cover"> <p><cite>The Alchemist</cite> by Paulo Coelho. Published in 1988.</p>
<datalist> element contains a list of
<option> elements that represent key recommended terms for other fields. Take a look at the example below where an
The Details element is basically the native HTML version a dropdown UI component. Additional information is displayed when the element is toggled into an “open” state.
<dialog> element represents an interactive component such as a dismissable warning.
<dialog open>This is an open dialog window</dialog>
<dd>, <dt>, <dl>
These elements provide descriptions, definitions, or values for items in a description list. Newer browsers automatically format terms and definitions with logical indentation.
<dl> <dt>George Michael</dt> <dd>80's Musician</dd> <dt>Madonna</dt> <dd>90's Musician</dd> </dl>
The Definition element is used to indicate the term being defined within other content. The nearest parent element is the definition for the indicated term.
<p><dfn>HTML</dfn> is the standard markup language for creating web pages.</p>
<hgroup> element wraps a multi-level heading, grouping a set of
<hgroup> <h1>Main Header</h1> <h2>Subheader</h2> </hgroup>
From MDN: “The
<kbd> element represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device. By convention, the user agent defaults to rendering the contents of a
<kbd> element using its default monospace font, although this is not mandated by the HTML standard.”
<p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text.</p>
<mark> element defines text that is highlighted for reference or notation purposes
<p>This is not that important. <mark>But this is</mark>.</p>
<meter> element creates a visual representation of a fraction or percentage.
<label for="completion">Completion</label> <meter id="completion" value="2" min="0" max="10">2 out of 10</meter>
<progress> creates a visual representation of the progress of an action.
<label for="file">Downloading progress:</label> <progress id="file" value="32" max="100"> 32% </progress>
Further Reading: The Future of Web Components