Adopting my blog to HTML 5


I am continuing changes to this photo blog with further adoption of HTML 5.

So far I have turned each post to an <article>, the sidebar is now <aside> and menus use the <nav> tag. I still use a lot of <div> tags to support the visual presentation. Admitedly it is a compromise. I have also converted the pagination links at the bottom of the page to a <nav>.

A more interesting change is to wrap each photograph in a <figure> tag and include <legend> tag inside to describe the photograph. I will be watching the performace of this combination with great interest, as there is no other way in any version of HTML to markup images in a sematic way.

Finally a lot of effort went into turning sequential output from WordPress of tags into an unordered list. It may be a small thing, but tags are just a list of links and should be groupped accordingly.

There are certain behaviours in WordPress that prevent me from some changes. Namely, I still have to wrap my photograph’s <figure> tag in a <div> tag otherwise WordPress inserts automatically a <p> tag, which is very annoying. I need to find the logic in the WordPress code and make all (including the new HTML5 tags) block elements exceptions from this behaviour.

I also need to figure out how to get Web Slices to work with HTML 5. It will depend on how IE8 treats the Web Slices markup. If it is purely class based, it should be relatively easy. However if it pairs up <div> tags and named classes than I won’t be able to do this and will have to keep old wrapping <div> structures.