Think of a website. Any website. Chances are you’ve never thought too hard about that particular website or its design but the truth is that somebody somewhere has given the design of that website a lot of thought. The colors, the font and the layout. Especially the layout. This layout or semantic (as it’s called in the biz) has been carefully crafted with the viewer in mind. Let’s take a closer look into what I mean.

Internetingishard.com wrote a great article about semantics so naturally I slow roasted the article and carved out the juicy bits. The basics of semantics is displayed really nicely in the graphics below:

When different website elements are given a purpose and a name, they become more recognizable and easier for the viewer to understand. The point of semantics is to flush out those elements, instead of leaving them to free float around a blank background, they become defined as an article or as a figure and provides clarity to the viewer. As seen above in the header example, by specifying <header> the viewer understands that,

“It denotes introductory content for a section, article, or entire web page. “Introductory content” can be anything from your company’s logo to navigational aids or author information.”

Okay let’s take five here. Everything making sense? Need a recap? Lifewire has a great quote that explains up the meaning of semantics quite nicely,

“Semantic HTML or semantic markup is HTML that introduces meaning to the web page rather than just presentation… tags like <b> and <i> are not semantic, because they define only how the text should look (bold or italic) and do not provide any additional meaning to the markup.”

Going back to the <header> example I believe this is the easiest to illustrate because it’s one of the first bits of semantic HTML you learn before you even know what semantic HTML is. At least it was for me! An example of semantics can be found in my very own coding:

See the big Get To Know Me at the top of the page? That’s a preview of what my website will look like when the code is published. You can see this reflected in the <h1> Get to Know Me </h1> line 10, <header> is the same as <h1>. As mentioned above the header gives meaning, it’s different from the paragraph breaks because it puts it in bold, bigger font and gives it a purpose.

Semantic HTML is incredibly important to utilize when coding, without it none of the code would stand out and everything would be the same. Next time you go on a website take a moment to consider the semantics that have gone into that code. The layout you’re looking at has been carefully constructed with you in mind.