Semantic Code

What is Semantic Code?

It simply means that we give our text, pictures, images, and elements “meaning” so that non-human visitors like robots, spiders, crawlers, and other computer programs, know what they are looking at.

Example:

Lets suppose we wanted to create a top level heading, or title, for a document. The appropriate HTML tag would be a <h1> tag and it would look like this:

<h1>A Section Heading</h1>

The <h1> tag lets computer programs know that the text, that is being wrapped by the <h1> tag, has meaning. It is not just regular text. It has a purpose. It is the most important heading in the document. If you wanted to lower level heading, then you would use the <h2> tag to create a hierarchy.

Here is where a lot of designers go wrong. Instead of writing semantic code just use any ol’ tag they can think of and slap some styling to it. Kind of like this:

<span style="font-size:32px; font-weight:bold; ">A Section Heading</span>

The code above is using the <span> tag to disguise itself as a h1 tag. A person viewing the heading text on a computer screen would not be able to tell the difference, but a computer program would.

Why is it important to write code that is semantic?

The better your website is structured, the easier of a time a crawler will have reading and indexing your pages, and understanding your content and determining what is important. As a result, this will aid in giving you better page rank in search results.

If page rank isn’t enough reason to start writing semantic code, then you might want to consider that:

• It aids screen readers in interpreting text to speech for people that are visually impaired.
• It often results in faster page loading times, as it requires less code to achieve the same result.
• It enables you to update the look of your website in the future, since you don’t have to change the structure of the website.
• And lastly, because other web designers that might eventually work on your website and it will make it easier for them to read the code and make modifications to it.