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.

FREE
Digital
Training

Learn how to audit your own website to save the hefty consultation fees and time spent repeating work.

Coming soon

Discussion
[fusion_tb_comments avatar="circle" headings="show" heading_size="2" padding="40" hide_on_mobile="small-visibility,medium-visibility,large-visibility" animation_direction="left" animation_speed="0.3" /]

Related Posts

If you enjoyed this article, consider exploring our other articles below.