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.
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.
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.
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:
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>.
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.
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.
3 days ago