Semantic Markup – Why you should use a professional web designer / web developer

Semantic Markup? I’ve never even heard of it. So, why is it so important to my website? You’ve probably heard somewhere by now that web pages are built using a language called HTML. HTML was originally conceived as a means of describing content within a document (web page), not as a means of styling the content and making it look like anything. Now, with HTML5, it’s more important than ever to write Semantic Code. There are several new HTML elements that were created to assist in defining the contextual meaning within the content on each page. Semantic Markup (AKA Semantic Code) encourages web developers to write code that better describes the content to a computer without taking anything away from a sighted person’s experience.

Manila Folder with computer code on the frontWithout explaining what a piece of content is, a computer has no way of understanding it. The ability for a computer to be able to identify your content’s meaning is important for several reasons:

  • Search engines need to understand what your content is really about. Semantic code generally improves your placement in the search engine ranking, as it is easier for the “search engine spiders” (AKA Bots) to interpret your content.
  • There are a lot of visually impaired people who rely on a special type of browser referred to as “screen readers” to read pages to them. These programs cannot interpret pages very well unless they are written semantically.

Semantic Markup has other benefits too:


  • Semantic code is typically shorter and downloads faster.
  • It will make your pages load quicker. Why is that? Because you won’t have to use as much custom styling in your stylesheets, so they download faster.
  • Semantic code is easier for people to understand too so if a new web designer later takes over your site, they can understand the original intent much more quickly.
  • Because semantic code does not contain design elements it is possible to change the look and feel of your site without recoding all of the HTML.
  • Once again, because design is held separately from your content, semantic code allows anybody to add or edit pages without having to have a good eye for design. You simply describe the content and the cascading style sheet defines what that content looks like.
  • It will also make the arduous task of making a website cross-browser compatible much easier.

Semantic code is also great for SEO! GoogleBot as well as other search engine spiders want to read semantic code. They don’t judge your site by how nice it looks, they honestly don’t even know how your site looks. They look at your code and work out what’s important within the contextually, seeking out specific keywords etc. The less clutter, and better formatted it is, the easier the bots can figure out what’s important about that specific page.

Closing XML TagWithout turning this into a “How To” article, it’s difficult to describe without using at least one example. In HTML, there are what are referred to as the “H Tags”. These are Heading tags that tells bots and screen readers that what you are about to read is a heading. There is also a special hierarchy for these tags ranging from H1 to H6 with H1 having the highest importance, H2 the next highest and so on. Heading tags by default are a larger, thicker font so it also stands out visually on the screen. Many people who are new to coding however will “fake” the visual appearance of the heading tags by using a paragraph with a class of something like “largeText” and that class they’ll instruct in the stylesheets to have the visual appearance of a heading. Doing it this way doesn’t help the search engine bots or screen readers at all. They think it’s just another paragraph and don’t give it the same “weight” or importance that they would a heading tag. This ultimately loses value for those important keywords in your ranking and makes a site confusing for non-sighted users.

Over the last few years, there have been other integrated technologies that have been developed for the purpose of helping bots understand the context of specific pieces of information. This is know as “Rich snippets” which encompass microdata, microformats, and RDFa. Each of these have different levels of support with different search engines at the moment. Of these, microdata is specifically worked into the HTML5 specification and my guess is that it will have the best support moving forward. Not everything needs rich snippets in order for it to make sense, but you do need to have someone that knows when and why they are useful to use for any given project.