Understanding HTML5 Semantics

Coding is intimidating as it is, and it keeps evolving. HTML continues to improve and update. I’m going to walk you through some of the updates and what exactly HTML5 semantics are.

In the beginning stages of HTML, there were no universally accepted names for structural elements. Each coder had its title for these elements. This made it hard for search engines to index web page content correctly. Wanting to display information the browser communicates with the code, it needs specific information to know where to put what. This is where semantics plays a role. HTML5 semantics to be specific.

HTML5 semantics define the purpose of the element. It gives these structural elements a name. Using HTML5 semantics, you help the browser communicate with the code to help better understand the meaning of the content. Using the semantics helps search engines read the page faster as well.

What exactly am I talking about when I say HTML5 semantics? Let me be more specific. Non-semantic codes include and , which serve as place holders to convey to a browser how the content needs to be displayed. These non-semantic codes don’t give any information about the role of the material that it plays on the page. Semantic codes include , , , and . These elements define the role of the content.

Using HTML5 semantics benefits developers because it creates a more visible structure to the code, making it easier to understand and maintain. They also help create a more visible hierarchy. 

Below is a list of HTML5 tags: 

  • <header> –> defined a header for the document or a section
  • <footer> –> defines a footer for the document or a section
  • <nav> –> defines navigation links in the document 
  • <main> –> defines the main content of a document 
  • <section> –> defines a section in the document 
  • <article> –> defines an article in the document
  • <aside> –> defines content aside from the page content 
  • <address> –> defines the contact information for the author
  • <figure> –> defines self-contained content, like illustrations, diagrams, photos, code blocks 

These are just words, and it’s probably still confusing, so I decided to take a couple of websites and identify these tags. 

Above are three websites, MoMa.com, Quinnipiac.edu, and Ulta.com. I used these three websites because they showcased semantic tags in different ways. MoMA uses a generic structure of the at the top, then the , then the section of the website. Within the main article are images, which could be tagged as .

Next is Quinnipiac.edu, I wanted to showcase the , so I scrolled to the bottom of the page and found the footer. I then marked all of the different figures.

The last website is Ulta.com; this site has the same tags as MoMA; however, the structure is different. I wanted to show that these tags are on all websites, but the structure doesn’t have to be the same.

Using HTML5 semantic tags creates a better workflow, and upgrades the quality of your sites. They also improve the site’s accessibility.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s