Katie Coen

When you think about coding, you probably think of gibberish words and phrases put together with carrots. Something like… 

<div> or <span>

In reality, some of the coding behind your favorite websites is easier to understand than you think. It’s called HTML semantics.

HTML semantics are elements of coding that say what they mean. There’s no complicated language involved. Each word clearly defines what the content means.

On every webpage, there are different elements, like a header, body, and footer. In HTML semantics, those are the exact words used in the code.

You can see an example above. The word “header” is physically used in the HTML code to represent the heading on the page. You can also see the word “body,” which represents the body of the page with most of the elements.

This is another example, this time focusing on the body of the page. Words like “section” and “article” are used. A section defines a section of the document. Then the article is the text written out on that page. “P” stands for paragraph, which is another semantic.

Why’s it Important?

HTML semantics are necessary for many reasons. It obviously is easier to read and understand for someone who is not an HTML expert. This makes it easier for other people, like web designers, to read the code and review it. This means less mistakes and more outside input that could help improve the project. 

Semantics are also important for blind or visually impaired people. Semrush blog explains that screen readers used by those who cannot see the HTML can communicate semantics more effectively. These screen readers read the code out loud and have an easier time digesting words that are similar to English. 

In addition, these more simple terms and phrases help websites with SEO, or search engine optimization. SEO means making your website more visible on search engines, like Google. Semantics give more information about the context of the website and what it has to offer, which allows search engines to understand the content better. This increases the likelihood of a site to be found online.

So not only can HTML semantics help make coding easily explainable to the average person, but it can also help a website gain more traction. This simpler version of code helps someone learn faster, as they are already familiar with the words. That was definitely the case for me. It made the whole concept more straightforward. If you decide to dip your toes into HTML, semantics makes the adjustment much smoother.