Firstly we'll clear up the meaning of semantic HTML. The semantics of an entity describes what its purpose is. By using semantic HTML elements we are able to provide meaning to the structure of our code. If you think about the <div> tag for a second ask yourself this: If you had never heard of this element before what would you think its purpose was?
Difficult right? 🤔
Imagine trying to build a new desk from one of those sets you can buy at a furniture store. It includes everything you need to construct it as well as an informational booklet with all the information related to the desk.
Now imagine each page of the instruction booklet is missing a header. It makes finding the instruction page much more difficult as well as the list of contents in the box, the warranty policy, and so on. You can still find them but you have to look very closely.
The name <div> does not offer any information as to what role it might perform. Now think of the <h1> tag or any heading tag for that matter. The heading element has a role that describes the role it performs (as a heading). There should only ever be one <h1> element on the page.
There are three primary advantages to using semantic HTML elements to you and the users of your site:
- Search Engine Optimization
This refers to the way in which search engines such as Google interpret the content of your site and it can affect where your site will appear in search results. This means that neglecting semantic HTML could have a negative effect on how many users will find and interact with the site.
Using elements that better describe the role they perform makes it easier for screen readers to inform users with disabilities about the content of your site.
- Code readability and maintainability
Using semantic HTML elements can help you with the maintaining and debugging of your code making it clear which part of the code you are looking at. This is especially important if you are working with other developers in the same codebase.
There are many semantic elements we can use that in principle do the same thing but offer the benefits outlined above. Now that we understand what a semantic element is and why they are important, let me show you some semantic elements that we can use to replace the <div> that you might still be using a little too often.
Throughout the article I will include quote definitions for each element using MDN Web Docs before explaining them in simpler terms.
Let's begin 👏.
Semantic Elements
<article><header><section><nav><main><aside><details> & <summary><figure> & <figcaption><blockquote><abbr><footer>
1. <article>
Definition by MDN:
The HTML <article> element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
This element is often used to wrap pieces of content where your codebase might contain multiples of them. An example of this is a blog post preview card or the post itself but really you could use it whenever you have a piece of content that includes a heading to describe it and the content representative of the heading. You can also nest <article> elements inside each other.
Example 👇
<article class="product">
<h2>
Coffee
</h2>
<article class="product-info>
<h3>
Product information
</h3>
<p>
Very delicious coffee!
</p>
</article>
</article>
Definition by MDN:
The HTML <header> element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.
This element is typically useful for grouping elements that represent the header of an article or post together where at least one of the elements includes a heading element such as <h2>. I have also used it in the hero of a landing page of a site that includes the main heading element <h1> and possibly some images, text, links or other introductory content that support the heading.
Although called a header element it is not necessary to use this element at the top of the page and can used in other sectional elements such as <article> and <section>.
Examples 👇
<header class="header">
<h1>
Hero header
</h1>
<img src="heroimage.webp" alt="a nice descriptive alt text">
</header>
or
<article>
<header>
<h2>
Article header
</h2>
<a href="/blog-article">
Link
</a>
</header>
...
</article>
3. <section>
Definition by MDN:
The HTML <section> element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.
Similar to the <div> there is often a better choice than the <section> element. Even so it is an improvement on the <div> when you need to section-off a piece of content that would not be suitable for a <nav> or <article> or similar elements (as long as it is not used for styling purposes).
If you require an element wrapper for styling purposes it is better to stick to the <div> element.
Example 👇
<section id="blog-articles">
<h2>
Section header
</h2>
...any other content related to the section
</section>
4. <nav>
Definition by MDN:
The HTML <nav> element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.
Use it to wrap the primary sets of links that are used to navigate around your page indicating clearly to your screen reader users exactly where the main navigational links of your site are based.
Example 👇
<nav id="main-nav">
<ul>
<li>
<a href="/">
Home
</a>
</li>
<li>
<a href="/blog">
Blog
</a>
</li>
</ul>
</nav>
5. <main>
Definition by MDN:
The HTML <main> element represents the dominant content of the <body> of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.
You will only ever have one <main> element per page of a site that indicates to the user where the primary content of the page exists. This is the content that is left when you ignore secondary content that is repeated across other pages of the site such as the content enclosed in the <nav>, <footer>, <aside> and similar additional elements. These are sometimes called layout components/elements.
It also has an important role for users requiring a screen reader to navigate your site because they are able to instruct their browser to skip straight to the <main> element and the content it includes.
Example 👇
<nav id="main-nav">
<ul>
...navigational links
</ul>
</nav>
<header id="landing">
<h1>
Some descriptive page header
<h1>
<p>
...explanation
</p>
<a href="/blog">
call to action for user
</a>
</header>
<main>
<h2>
Welcome to the main content of the page
</h2>
<article>
<h3>
Article title
</h3>
...
</article>
</main>
<footer>
...
</footer
6. <aside>
Definition by MDN:
The HTML <aside> element represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes.
The <aside> element is to provide some content that is secondary to whatever content it relates to. This means that wherever the element is in the document, it should only contain content that the user does not explicitly require to understand the primary content.
An example is in an article to provide a definition for something or a further explanation the relates to the content. Maybe some links to other articles that expand on a definition further.
Example 👇
<article>
<h2>
Article header
</h2>
<p>
I really enjoy writing JavaScript.
</p>
<aside>
JavaScript is a high-level dynamically typed programming language. You can find more information here ...
</aside>
<p>
I also really like semantic HTML.
</p>
</article>
7. <details> & <summary>
Definition by MDN:
The HTML Details Element (<details>) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the <summary> element.
These two elements are really useful when you require a widget that can be toggled to an 'open' or 'close' state that reveals or hides some content. A typical use case for this is an faq (frequently asked questions) section of a website that allows the user to click on a question to reveal the answer.
It uses no JavaScript meaning it will continue to function properly for your uses even if they have set their browser to ignore it, making your site more accessible. The <summary> tag contains the text that is always visible to the user while the <details> tag holds the information to display when the widget is in the 'open' state.
Example 👇
<details>
<summary>
Do you offer tours of the brewery?
</summary>
Unfortunately at this time we do not offer tours of the brewery. We are currently building our taproom so stay tuned.
</details>
<details>
<summary>
Are your beers gluten-free?
</summary>
All of our beers are gluten-free and vegan-friendly!
</details>
Definition by MDN:
The HTML <figure> (Figure With Optional Caption) element represents self-contained content, potentially with an optional caption, which is specified using the (<figcaption>) element. The figure, its caption, and its contents are referenced as a single unit.
Generally the <figure> element encloses an image (although it is not required) and is usually accompanied by a <figcaption> element that provides the description for the element. You could also include other elements such as the <p> tag that is relevant to the figure.
In my experience it is useful to include the <figure> element when you include a piece of content such as an image, diagram, or piece of code that relates to the content you are writing within some article or post.
Example 👇
<article>
<h2>
Article header
</h2>
<p>
...some introductory text
</p>
<figure>
<img src="post.webp" alt="a nice descriptive alt text" />
<figcaption>
Photo taken by Kieran Roberts
</figcaption>
</figure>
<p>
..rest of the article
</p>
</article>
9. <blockquote>
Definition by MDN:
The HTML <blockquote> Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> element.
Use the <blockquote> when you want to include text in your site that comes from another source. The cite attribute on the <blockquote> element should be used to provide original source of the content.
Example 👇
<blockquote cite="link to the souce">
<p>
This is an inspirational quote from another source
</p>
<footer>
Source author, <cite>content of the citation</cite>
<footer>
</blockquote>
10. <abbr>
Definition by MDN:
The HTML Abbreviation element (<abbr>) represents an abbreviation or acronym; the optional title attribute can provide an expansion or description for the abbreviation. If present, the title must contain this full description and nothing else.
This element is nice for providing a simple but effective tooltip effect to acronyms you might have on your site. I have included this attribute myself in my portfolio for things like JavaScript(js). The title attribute provides the full description of the acronym when the users hover over it.
Example 👇
<p>
I really enjoy working with<abbr title="JavaScript"> js </abbr>and I am now learning <abbr title="TypeScript"> ts </abbr>.
</p>
Definition by MDN:
The HTML <footer> element represents a footer for its nearest sectioning content or sectioning root element. A footer typically contains information about the author of the section, copyright data, or links to related documents.
Typically people include one <footer> at the bottom of the document but we can also include a <footer> for each <article> or <section> element as long as it does not have another <footer> or <header> element as a descendant. Inside the <footer> you can include any kind of text, images, or links related to the placement of the element.
Examples 👇
<footer>
<p>
This is the end of the site
</p>
</footer>
or
<article>
<h2>
Article header
</h2>
<p>
Article content
</p>
<footer>
<p>
Article footer
</p>
<footer>
</article>
Conclusion
I hope you have learned something about semantic HTML that you can take with you into future projects to make your markup more accessible for everyone that interacts with your site!
You can follow me @Kieran6dev where I'm always active and happy to connect with you!
Thanks for reading 👋
