Semantic HTML & Why?

Two big reasons to adopted semantic HTML.

  1. There’s a group of users on your website that can’t see it. This is primarily made up of search engine crawlers (SEO) but you should also consider the visually impaired community here, who use screen readers.
  2. Think of future developers! You ever see 35 nested div tags… Now where is the nav bar… Ok, is this the nav or the sidebar… what’s going on here? Have fun figuring it out.

Let’s look at some of the common semantic HTML elements and when to use them.

There are a few tags that make up content sections of the website. These are all block elements.

<header>

The header tag should represent introductory content: logo, search bar. This element is also typically universal across your site.

<main>

The main tag should represent the primary content area of your webpage. This is where the bulk of the content would exist, not related to navigation.

<footer>

The footer tag typically will represent the bottom section of your website. It generally contains legal copy, some utility links, and other relevant organization information.

<section>

A section tag is a general grouping of content that can’t be further specificed with another tag. It’s different from a div tag though because it’s a top level block that represents a group of content. You shouldn’t use section tags within another section tag.

<aside>

An aside tag is generally used for sidebar navigation, but it can be more widely used for any content that is indirectly connected to the page’s main content.

<nav>

The nav tag should only represent navigational elements. When using this tag make sure your nav links are the direct children of the element. You don’t want to wrap nav around links that are nested a few layers deeper.

<article>

Article tags are meant to wrap around content that is reusable in other places. These could be cards, blog content, or biographical content. In other words, the content should be independent, reusable, and unique.

There are a few more tags that represent text content on a website. These are a mix of block and inline elements.

<h1>, …<h6>

Heading tags are probably the most misused tag in HTML. There are strictly used to show a content hierarchy on your webpage. They should not be used for styling. Your heading tags should also form themselves like pyramid. You typically only want one h1, a few h2s, maybe some more h3s, and so on.

<blockquote>

The blockquote tag is typically used to enclose a quote that needs citited. They are almost always style by default with an indentation, but don’t use them to get an indentation… :D

<figcaption>

The figcaption element is used to wrap a caption or legend that describes it’s parent element. These tags should always be used in conjunction with the figure tag.

<figure>

A figure is general a piece of visual content on your website that can include the optional figcaption. A few usage examples are code blocks, videos, audio clips, and charts.

<hr>

The horizontal rule or hr tag comes from the writing world. It generally represents a shift in the content or a change in scene. It is also typically visually represented by a horizontal line break, but it should be used solely for that purpose.

<ul>

The unordered list or ul tag is used to wrap a list of items that aren’t sequential. These are generally represented as a bulleted list, but again they can be represented in any way visually.

<ol>

The ordered list or ol tag is used to wrap a list of item that are sequential. These are generally represented as a numbered list, but you can also remove these numbers.

<li>

A list item or li tag is a single item of an unordered or ordered list. The li tag must be nested in a ul, ol, or menu container.

I hope you enjoyed learning a bit about semantic html. And I hope your adopted this practice in your coding, for web crawlers, for the visually impaired, and for your future colleagues.

Best of luck!