HTML 5 re-visited: What’s in it for SEOs?

Mid of 2010 fellow StateOfSearch blogger Louis Venter had first look at the new and upcoming HTML 5 mark-up. Keep in mind that HTML 5 is not ready yet and it’s still a work in progress – officials say we’ll see it finalized by end of 2012 – but I’m pretty sure it’s more going to be 2013 or so. But that’s not the main thing I want to look at. I just thought it might be nice to point out some of the changes that can have an impact in regards to on-page SEO and how developers (and SEOs) currently do use existing elements and tags.

I found it to be extremely interesting, having a technical background, in which direction the usage of HTML 5 is heading. Even though, and I probably should have put this in my summary, I don’t think its ground breaking – but it does make a lot of sense.

New link-level attributes

As we’re in SEO, let’s have a look at links first: One change that caught my attention is some newly introduced relation attributes for hyperlinks. Similar to the widely known rel=”nofollow” there are some new ones like rel=”author” as well as rel=”license” put into the HTML 5 specification. The goal is being able to further describe link relations (in this case: who is the author or under what license has the content been published?). This is probably not going to change the way links are and have been working, however it won’t hurt to provide that extra info.

Table layouts vs. div containers vs. HTML5

In the very beginning of the WWW a lot of sites we’re using <table>’s to structure their websites (and some still do…). That decreased over time and especially with XHTML coming in, developers moved over and started using various <div> containers and organized those using CSS positions – which makes a lot of sense (you can keep content in order, don’t have the overhead of tables, etc.). Looking at “modern” websites a very classical approach is having a markup similar to this one:

With HTML 5 coming in we now do have tags to especially “mark” these different sections:

Image credentials: A List Apart: HTML 5

So the general approach is having the possibility to really describe parts and sections of a website using a pre-defined tag versus using <div>’s all over the place. This will – hopefully – result in a better understanding of the mark-up when search engines (but also screen readers and similar) access a website.

Updated usage of images

As of now, when it comes down to using images, SEOs heavily rely on using the appropriate alt-attribute to make images “understandable” (and maybe rank) in search engines. This would currently look like this:

Looking at a similar usage in HTML 5 it would eventually look like this:

So the <img>-tag changes from being a short-tag to really having a tag value; interesting stuff. In combination with the updated image tag there’s another element being introduced: <figure> – which can be used to create sub-titles and taglines, nice. And another addition / change in using images is the possibility to include them almost everywhere you want. For example within a paragraph <p> or a container <div>, this might look like this:

Changes in using headline tags

Combining the newly introduced <section> element all together with headline tags as well as with one or more paragraph’s it is now possible to bundle different areas (aka sections) and provide those with a dedicated headline. From HTML 5 on you don’t have to worry about the amount of <h1> tags because it’s seems perfectly valid to have more than one <h1>.

Updated and improved handling of media elements

If you’re not using YouTube to handle your videos you might have noticed that embedding self-hosted videos is a painful thing to do. This is going to be changed in HTML 5 – and same goes for audio. The specifications will introduce dedicated tags named <video> and <audio> to ease that. They’re not fully supported by browsers and search engines like Google, yet – but it’s worth playing around with it.

And the result?

The main thing that HTML 5 brings in is the ability to really use structured elements and therefore provide the possibility to classify contents depending on the tags “surrounding” them. That being said, if you do use those tags correctly, search engines have the chance to weight parts of a website differently by making use of HTML mark-up only.

And there is even more (a element for notifications, updated usage for tags like <em> or <strong>, etc.) so I strongly recommend you keep your eyes open for further stuff to come. And if (smaller) projects do provide the possibility to let you test parts of HTML 5, go for it.

Opt In Image
Know about what is changing in marketing!

Keep up with the latest digital marketing developments, views and how-tos through State of Digital’s digest newsletters. Be the first to hear about events, white papers, e-books, webinars, training and more!

You will receive the free e-book "Content Marketing Essentials" as a thank you!

* Personalize your experience when signed up!

About Bastian Grimm

Bastian Grimm is founder and CEO of Grimm Digital. He mainly works as online marketing consultant with a strong focus on organic search engine optimization (SEO). Grimm specializes in SEO strategy consulting, website assessments as well as large scale link building campaigns.

  • It’s good to see articles and blog posts that promote HTML5 and raise awareness among web professionals, but this one contains a couple of inaccuracies.

    First of all, HTML5 is ready to use now. There are countless site using it already including Newsweek and House of Fraser (see HTML5 Gallery). Developers who haven’t at least got to grips with the outlining algorithm and new structural elements are behind already.

    The spec is a reflection of the state of play in browsers and what authors are doing, not the other way round. If we waited for specs to say “ok, this is finished” we wouldn’t have used any CSS 2.1 until last month.CSS3 use is widespread now too.

    The most glaring error is the part about img elements. There are no plans to change it from its current empty content model to what is described above. Perhaps it was part of the now dead XHTML2.0 specification but I can’t say for sure as I haven’t studied it.

    XHTML was abandonded by the W3C not long after the WHATWG started on HTML5. It had numerous problems including breaking backwards compatibility and forcing documents to be served as application/xml – both bad ideas.

    Images will continue to be optimised using filenames and alt attributes for a long time to come.

    (Please note that this does not preclude the use of XHTML-style syntax. A lot of developers prefer it’s structure and strictness, and browsers cope with it perfectly well).

    One area where HTML5 will help SEO is that the spiders will know where major navigation is, and which bits are main content as opposed to related secondary content.

    The now valid use of multiple h1 tags is not absolute. They must be inside sectioning content for that to work, not all over the page. As an aside I doubt very much whether something as easy to game as heading element content has carried much SEO weight for some time now. (Caveat: I’m a developer not an SEO so could be totally wrong on that).

  • HTML5 introduces another set of skill requirements for onpage SEO specialists. Existing websites need to adapt the new HTML5 attributes as soon as possible or risk losing to HTML5-savvier web developers.