Recently, I was wondering what some of the least used HTML elements are. As web developers, we spend an awful lot of our time writing HTML. The majority of that code is written in programming languages like PHP and JavaScript. But did you know that one of the most important building blocks of our websites is not a programming language at all?
Jeopardy answer: What is HTML?
The culprit is HTML and the clue is in the name: HyperText Markup Language. HTML is a markup language, not a programming language. In short, this means that HTML is a language used to describe things so that a web browser can present them correctly.
For example, we can use HTML to take the same piece of text and describe it in different ways. We describe things using HTML ‘elements’, which are wrapped in angle brackets (<>).
Describe text as a paragraph:
<p>I Make Websites!</p>
Describe text as a heading:
<h2>I Make Websites!</h2>
Describe text as a bullet point in a list:
<ul>
<li>I Make Websites!</li>
</ul>
Finding the least used HTML elements
Web pages are absolutely brimming with HTML elements, but over time, some have proven to be more popular than others. Here’s a sample of some of the most popular HTML elements on my employer’s homepage, which I tested for 131 HTML elements:
- 643 <div> elements (42%) – <div> elements are used as generic ‘boxes’ or ‘blocks’
- 146 <a> elements (9.5%) – <a> elements are used to describe links
- 118 <span> elements (7.7%) – <span> elements describe an inline piece of text
- 60 <p> elements (3.9%) – <p> elements are used for paragraph text
- 41 <img> elements (2.7%) – <img> elements are used to describe images
Solve Agency’s homepage doesn’t feature any of our least used HTML elements
It’s understandable that the web page is dominated by fairly generic elements like <div> and <span>. But HTML is packed with semantic elements that are highly descriptive as well as presentational.
Seeing as we use just a fraction of the available elements over and over, I was curious to find out what some of the least used HTML elements were and whether or not there may be useful elements we’re forgetting about.
Why be descriptive at all?
If you can achieve the same appearance with a fraction of the HTML elements that are available, why bother with all the others? The reality is, some HTML features are useful, but just not overly common.
Some elements that don’t get used too frequently but are still fairly common on the web include <video>, <table> or <audio> elements. Well-structure semantic HTML can be the difference between a webpage performing well in both SEO and accessibility terms, two aspects that are really important.
For example, we know that search engine crawlers place an emphasis on well-structured semantic headings. Heading elements are ranked numerically, <h1> to <h6>. Crawlers now interpret these numbers as structural clues to help interpret a web page. If it’s beneficial for headings to be semantic, then it clearly pays to be semantic with all our HTML.
As such, I’ve found some very descriptive elements that don’t get used as much as they could. When considering whether or not to use them, consider how a search engine crawler (a machine) might interpret your web page. A crawler is less likely to interpret your web page’s formatting, so it may miss an element like a <span>, <div> or <p> that’s been reworked to look like another element.
The 5 HTML elements that you should be using
Address: <address>
The first of our least used HTML elements is the <address> element.
From the W3C specification:
The address element represents the contact information for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the document as a whole.
At first glance, the <address> element seems pretty simple. It’s for contact information, but specifically for the owner of the web page and it may not be restricted to physical addresses. For example, the below code from W3Schools includes email and postal addresses and is valid:
<address>
Written by <a href="mailto:[email protected]">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
The specification requires that you don’t use the <address> element for general postal addresses in your content, this is to avoid confusion over who is the owner of the web page.
Generally, it’s common to see company addresses in the footer of the website within a <p> tag and using <br> tags to set the line breaks.
Consider using the <address> tags to link your details to ownership of the web page. Crawlers may use this information to make a connection between different pages on your site and content around the web.
Learn more about the <address> element
Definition and abbreviation: <dfn> <abbr>
Definitions
The second and third of our least used HTML elements are the <dfn> and <abbr> elements.
From the W3C specification:
The <dfn> element represents the defining instance of a term. The paragraph, description list group, or section that is the nearest ancestor of the dfn element must also contain the definition(s) for the term given by the dfn element.
If you’ve ever written a blog post, web page or any text that defines a term, you’ve probably not taken the opportunity to include the <dfn> element.
The definition element highlights a segment of text that is being defined. The <dfn> tags need to appear within another element, like a <p>, which must also contain the definition of that term as text.
The <dfn> element is essentially saying “whatever element I am inside of, this term inside me is being described by it”. You can use the title attribute to specify what term is being described instead of the text within the <dfn> tags.
Today, search engines are putting emphasis on understanding and satisfying user queries. SEO managers will often stress the importance of FAQ schema in providing helpful information to search engines. It’s quite possible that providing definitions with the <dfn> element could be similarly valid.
Abbreviations
From the W3C specification:
The <abbr> element represents an abbreviation or acronym, optionally with its expansion. The title attribute may be used to provide an expansion of the abbreviation. The attribute, if specified, must contain an expansion of the abbreviation, and nothing else.
In a piece of writing, you might first use a term in full to explain an abbreviation before proceeding to use the abbreviation throughout the rest of the text. The <abbr> element can be used to describe a piece of text as an abbreviation and also use a title attribute to provide the full text to the user.
The <abbr> tags can also be used within the <dfn> tags when you’re defining a term that’s also an abbreviation. This could be particularly helpful with the example definition of HTML below.
HTML is an abbreviation and we would want to define ‘HTML’ rather than ‘HyperText Markup Language’ because users are more likely to query for ‘HTML’.
The <abbr> element has superseded the <acronym> element, which is now deprecated.
Here’s a valid example of these tags working together within a <p> element from W3Schools:
<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> is the standard markup language for creating web pages.</p>
Learn more about the <dfn> element
Learn more about the <abbr> element
Details and summary: <details> <summary>
Our final two least used HTML elements are the <details> and <summary> elements, which work closely together. Firstly, a <details> element is required to wrap around all of the content.
From the W3C specification:
The details element represents a disclosure widget from which the user can obtain additional information.
From the W3C specification:
The summary element represents a summary, caption, or legend for the rest of the contents of the summary element’s parent details element.
The <details> element should contain additional information, definitions or data about an object or topic. The first child element within the <details> element should be a <summary> element which is the summarising term for the object or topic.
In the code example below from W3Schools, details are being given about the Epcot Center, as such, the summary is ‘Epcot Center’ and the rest of elements within the <details> element comprise the details.
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
Another interesting feature of combining these elements is how browsers present them. Browser will show just the summary as a clickable toggle with the rest of the content being shown on click.
The <details> and <summary> elements combine to create an interactive element that’s presentational as well as semantic.
This is essentially accordion functionality without the need for JavaScript. The default styling can be improved with CSS, but for a really slick accordion, JavaScript may still be needed.
Learn more about the <details> element
Learn more about the <summary> element
Conclusion: 5 of the least used HTML elements
HTML is a mark-up language that describes web pages using elements. Whilst some elements are sure to be more useful than others, a handful of elements like the ones mentioned above have become somewhat forgotten.
It’s possible that developers ignore them because their benefit is negligible; why use an <address> element when a <p> with line breaks can achieve the same appearance?
When we write HTML, our decisions on which elements to use may depend on whether or not we’re achieving the appearance we want, not the semantic descriptions our pages need.
The SEO benefits of these least used HTML elements
Whilst hard to measure, there is a good chance that being more semantic with HTML can have an SEO benefit. Search engines are more than capable of reading the HTML in our pages and will understand what the text within those elements is for.
Whilst not proven, the SEO benefits of some of these least used HTML elements could be:
- <address>: a search engine could build association between the owner of a page and other information known about that person or business
- <dfn> and <abbr>: a page could rank better for a term or abbreviation that it defines when a user searches for it
- <details> and <summary>: Summary content may rank more effectively when paired with a term in the <detail> element when a user searches for that term
I hope you found this post about underused HTML elements informative and have maybe found some elements you’d like to use in future. Are there any you think I’ve missed? What are the elements you feel are underused or misunderstood?