Why Semantic Markup Matters

While most people are concerned by how the website looks to the end user, the structure of the site is also a factor as to the value that you can get out of your website.

Markup

All websites are written using HTML which is a way of describing how a website is structured and should function in a way a computer can understand it.



Even if the HTML is not structured in the correct way, the user probably would not be able to tell the difference between a site with well written versus one with bad. So why is good code important?

Structure and Style

First, we have to identify what the purpose of HTML is. HTML is intended to describe the structure and content of a website. For example, HTML would describe how many links go into a navigation bar, what the title of the page is, the content of an article, and where links navigate to.

The design of a website is handled using special files called CSS files. These files describe what color links should be, how the background should look, how wide certain boxes should be, etc.

The benefit of separating content from style is that it allows the design of an entire site to be altered by only changing one or two files, instead of changing every single file of the website.

Structure

Let's say we have a site that has a title and a paragraph. The HTML code for that site could look like this:

<font size="7" color="blue"><b>Title of section</b></font>

<font size="3"><i>This is a paragraph</i></font>

Basically we have a large, bold, blue header that says "Title of section" and we have a paragraph that is smaller and italicized.

Most browsers could render this correctly, but it is by no means is well written code. Imagine a website full of these headers and paragraphs on several different pages. Now imagine having to go back to every page to change the header color to red.

Better code looks like this:

<h1>Title of section</h1>

<p>This is a paragraph</p>

By separating the structure and style, how the headers and paragraphs should look is handled using the CSS file, and just what the headers and paragraphs say is handled in the HTML file.

Search Engines Like Semantic Code

Not only is it easier to read for the person writing the HTML, semantic code is easier to read for search engines. Search engines can not infer that a larger bold sentence is more important than a smaller italic sentence. By using semantic code and proper tags, we can tell search engines that important parts of the site are wrapped in header tags and normal parts of the site are wrapped in paragraph tags. This allows search engines to properly index your site and can potentially improve your ranking.

Going Further with Semantic Code

Semantic code is not limited by the hierarchy of certain parts of a website. By its definition, semantic code is a way of describing the purpose of a part of a website, not how it should look or where it is positioned.

Let's say we have a site that has articles and an area for a list of related articles. Usually 2/3rds of the site is dedicated to the main content of the site, and 1/3 is dedicated to other content.

To apply style to certain parts of a site, it is necessary to give the different parts specific names. When making the site, it could be tempting to call the part of the site that holds the articles "left-area" and the part that holds the list of related articles "right-area", since that is where those are located.



However, what happens after the site has been up for a few months, the owner decides to move the related articles over to the left? Now the "left-area" is on the right, and the "right-area" is on the left. This can get pretty confusing.



Using semantic markup, the proper way to identify these areas would be to call the area that holds the articles "main-area" and the area that holds the list of related articles "sub-area". Now when the layout of the site changes, there is no confusion. The names describe what these areas are, not where they're located.



There are many more benefits to using semantic markup, but these are a few of the reasons why it's important that your site is coded using these modern methods.