Ditch the dreaded

. Semantic HTML elements we should use instead

First of all let's clear up the meaning of semantic HTML. The semantics of an entity describes what the purpose of it 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. There should only ever be one <h1> element on the page because this heading element has a role that describes the role it performs (as a heading).

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 affects where your site will come 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.

• Accessibility

Using elements that better describe the role they perform make 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 which 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 to often.

<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 code might contain multiples of them. An example of this is a blog post preview card or a blog post itself but really you could use it whenever you have a piece of content that has a heading to describe it and the content representative of the heading. Both include a header for the article and some content. You can also nest <article> elements inside each other.

<article class="product">  <h2>    Coffee  </h2>  <article class="product-info>    <h2>      Product information    </h2>    <p>      Very delicious coffee!    </p>  </article></article>

<header>

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 <h2>. I have also used it in a landing page of a modern site that includes the main heading element <h1> and possibly some images, text, links or other introductory content.

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>.

<header class="blog-header">  <h2>    Blog section header  </h2>  <img src="blogimage.webp" alt="a nice descriptive alternative"></header>

or

<article>  <header>    <h2>      Article header    </h2>    <a href="https://dev.to/somwhere">      Link    </a>  </header>  ...</article>

<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). It should be a logical choice for wrapping a section of your web page that also requires a heading element. If you require an element wrapper for styling purposes it is better to stick to the <div>.

<section id="blog-articles">  <h2>    Section header  </h2>  ...any other content related to the section</section>

<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 set 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.

<nav id="main-nav">  <ul>    <li>      <a href="https://dev.to/">      </a>    </li>    <li>      <a href="https://dev.to/blog">      </a>    </li>  </ul></nav>

<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.

It also has an important role for users requiring a screen reader to navigate your site because they are able to to instruct their browser to skip straight to the <main> element and the content it includes.

<nav id="main-nav">  <ul>    ...navigational links  </ul></nav><header id="landing">  <h1>    ...Some descriptive page header  <h1>  <p>    ...explanation  </p>  <a href="https://dev.to/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

<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.

Commonly it is used as the container for the mobile navigational links or any sidebar of content that can be opened by the user. This fits the definition of providing content that is related to the documents main content but it is not required to understand the content. It could also be used in an article to provide a definition or a further explanation the relates to the content.

<article>  <h2>    Article header  </h2>  <p>    I really enjoy writing JavaScript.  </p>  <aside>    JavaScript is a high-level dynamically typed programming language.  </aside>  <p>    I also really like semantic HTML.  </p></article>

or

<aside id="sidebar">  <ul>    <li>      <a href="https://dev.to/">        Home      </a>    </li>    <li>      <a href="https://dev.to/contact">        Contact      </a>    </li>  </ul></aside>

<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 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 hold the information to display when the widget is in the 'open' state.

<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 tap room so stay tuned.</details><details>  <summary>    Are your beers gluten free?  </summary>     All of our beers are gluten free and vegan friendly!</details>

<figure> & <figcaption>

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 caption for the element. You could also include other elements such as <p> tag that are relevant to the 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.

<article>  <h2>    Article header  </h2>  <p>    ...some introductory text  </p>  <figure>    <img src="post1.webp" alt="a nice descriptive alternative" />    <figcaption>      Photo taken by Kieran Roberts    </figcaption>  </figure>  <p>    ..rest of the article  </p></article>

<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 inlcude 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.

<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>

<abbr>...</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, 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 in your site. I have included this in my portfolio when describing web-development terms such JavaScript (js) and TypeScript (ts). The title attribute provides the full description of the acronym when the users hover over the acronym.

<p>  I really enjoy working with<abbr title="JavaScript"> js </abbr>but I am now beginning to learn <abbr title="TypeScript"> ts </abbr>.</p>

<footer>...</footer>

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.

<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 for more helpful tips as well as my own progress through web development.