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.
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.