Don’t Overlook Semantic HTML

Semantic HTML is something that is consistently overlooked by developers. If you are building websites for marketing purposes, the single greatest mistake you can make with SEO (Search Engine Optimization) is not pay attention to the structure of your code. Semantic HTML is defined as the use of HTML to define the meaning of your page, in comparison to the look and feel. A good developer can do both.

There was a time before HTML5 when you would build your page with tags that would define your hierarchy using heading tags (H1, H2, H3, H4, etc) and meta information. Things have changed drastically. Not only should you not shove all your content into header tags, but using the new HTML5 declaration, you can define structure areas that will help search engines digest your site. Using tags like:

Using these tags to define your structure will also aid in responsive design. You should avoid nesting div tags whenever possible. You should spend a lot of time planning out the structure of the site prior to design. Most good sites have this done during the wireframe phase. It is also called “blocking”. That is why it is so important to not have actual content in your initial wireframes but only general content ideas.

Be sure to use clean, readable code. You can find lots of code validators online to check your structure.