Usability-first Search Engine Optimization

Common Semantic HTML Mistakes: Are You Making Them? (And Why You Shouldn’t)

Semantic HTML mistakes: A bad case of divitis
This is what it looks like when divs cry.

Just as well structured content adds to the user-experience for your site’s visitors, semantic markup adds to your website’s user-experience for search engines.

No, it isn’t the end all be all of on-page SEO—not by a long shot—but if you’re like me and believe that well structured information architecture can help indexing and rankings by adding context to your content, then remember to cross your semantic t’s and dot your semantic i’s.

Semantic ailments to avoid

Divitis

Divs are used to divide layouts into logical segments; when no semantically appropriate tags exist. Pre-HTML5 there were no <header> or <footer> tags, so, when using an HTML 4 or XHTML doctype, think IDs for these sections as well as for sidebars, main columns, and other logical sections of your layouts. Don’t lose opportunities for semantic goodness if they’re available.

Multiple H1s:

In XHTML and pre-HTML5 (which, by far are still today’s most widely used versions of HTML) one of the most common semantic markup errors is the use of multiple H1’s on a single page. The H1 tag is used for the primary heading of a page (usually referred to as the page’s title or headline in the offline world), and is meant to be used only once, right before your main content.

A new dimension to HTML semantics is the fact that the HTML5 specification now recommends what was once a poor semantic choice in HTML 4.01: more than one H1. Multiple primary headings make sense with HTML5, since pages are more—and differently—segmented, but regarding H1’s pre-HTML5, “There can be only one“.

Missing heading levels:

If you have H4’s in your markup, you’d better be using H3’s. Don’t skip heading levels. If you need smaller font-sizes for your subheadings, open your style sheet and make the appropriate changes.

Table layouts:

I like to think this one almost isn’t even worth mentioning over a decade into the 21st century. HTML tables for tabular data, i.e., spreadsheet type stuff?, yes; for page layout? Not so much.

CSS positioning isn’t as difficult as it seems at first—especially if you have an experienced, helping hand to get you through common browsers inconsistencies with 2 or 3 easy and elegant fixes.

A key point to remember regarding CSS positioning: 90% of your positioning can be taken care of with floats and margins alone. Littering your style sheets with an over-abundance of explicit positioning properties isn’t necessary for most layouts, and will only make your styles more difficult to understand later on.

Block elements within inline elements:

Often a source of confusion for those new to HTML is the difference between inline and block-level elements.

BR abuse:

If you’re throwing a line-break, or <br>, into your content every few words, chances are you should be using HTML lists. If you’re using multiple br’s in a row, chances are you should be adding styles

But how does semantic markup affect SEO?

“The right words in the right places” alone isn’t enough to help your human visitors get the most from your content, and neither is it for ranking algorithms. I’m over-generalizing here to make a point.

Which is:

While structure is a visual concept usable for humans, search engines get contextual cues from semantic meaning embedded within your headings, subheadings, definitions lists and all other semantically rich HTML elements.

Semantics, SEO, and the future

If you aren’t up to speed with manually coding your own HTML and CSS, you might want to jump in now. Why? With Schema.org, the controversial Semweb power-play made by the 3 search giants, the semantic Web is on the verge of becoming more of a reality than the ideology it’s been for the last decade+.

The semantic Web is the next level of semantics affecting search (as well as most other things Web) so don’t get left at the gait with your divs between your legs.

Mixing proverbs? Bad. Semantic HTML? Good.

Learn more about semantic HTML.

About matt

Matthew Edward is the founder of Springboard SEO, a usability-first search engine optimization company in Montreal.