converting to html5

posted by misterhaan in html5, internet, track7, webdev on dec 21, 2010

somewhere around a month ago, dreamhost made it really easy for me to use mod_pagespeed, the apache module from google that optimizes web page loading time. so i checked the box to turn it on for track7, made sure my pages still worked like before, and was happy to get probably better performance for free.

a couple days ago, my site started showing xml errors! it’s currently using xhtml 1.1 which is unfortunately not at all forgiving and displays ugly errors when something’s not exactly perfect. i first noticed it on my phone, which as far as i know doesn’t include a view source feature or any other way to figure out what’s wrong. today i noticed the same thing in firefox, but there it shows the section of the page source it doesn’t like as part of the error message. i saw that my avatar image had width=64 height=64 added to it. since i’m using xhtml all attribute values need to be in quotes, so it’s complaining that it’s not width="64" height="64" like xml requires. i also noticed the url had been changed to include .pagespeed. in the filename, so i suspected the google page speed module. i turned it off and everything works again. then i remembered i also have to turn it off for m.track7.org and turned it off there too.

i’ve (presumably) had a faster site from the time i enabled page speed until it started breaking my site though, so i want to get it back! to do that i can either try to get mod_pagespeed to quote its attributes so it’s compatible with xhtml or i can switch my site to something that can handle unquoted attributes. i figure the latter is easier and safer, and also gets me away from the ugly browser xml error messages. since html5 is the latest and greatest thing, i’m looking at switching from xhtml 1.1 to html5.

as far as i can tell, i could just change my content-type header and doctype to be html5 and it would be interpreted that way since valid xhtml 1.1 is also valid html5. if i’m going to use html5 though i may as well start using some of those handy new tags it comes with! in my first round i discovered 2 wrapper divs that i probably used in previous layouts but didn’t need anymore, so i deleted them and the associated css one of them had (which wasn’t doing anything). then i put the site header and footer in header and footer tags. i was expecting both of those tags to be block tags (like div) but when i first loaded it up in firefox i noticed they appeared to be being treated as inline tags. i suppose for older browsers that don’t recognize these tags at all they’d treat them as unknown tags and thus display inline, so i put display: block in my css file for them and everybody should handle it correctly. so firefox is happy now, opera looks good and so does safari. internet explorer of course causes problems though — it ignores all the styles i specified for these tags. finding a workaround was pretty quick though — in javascript, simply call document.createElement() for each html5 tag name not in previous versions of html that you need styles to be applied for. this apparently convinces ie that it should treat elements by those names as real elements capable of following css rules.

i considered making the white-backgrounded portion of the site an article tag, but then realized the breadcrumb navigation in the upper left and potential comments at the bottom, as well as pages that just plain aren’t articles (for example, a full-page form) don’t really belong in an article tag. what’s the point of using tags with semantic meaning if you use them wrong? so it stays a <div>, though i may wrap some pages (or parts thereof) in <article>.

the descriptions i’ve read of the new section tag all seem to say it has more semantic meaning than the div tag. its meaning is that its contents are related to each other. to me, that’s not in any way different since nearly every tag is capable of containing other tags, and by virtue of being included in the same outer tag they’re already related to each other. so maybe the section tag has more of that specific meaning, or maybe i’m just not finding a definition that makes its actual meaning clear to me. either way i will stick with div for now in places where section might make sense. turns out div is less than half as many letters as section, so that should help my pages load a little faster too.

i have a few navigation areas from the layout that i should wrap nav tags around, and then maybe put some article tags on some pages. i think i’ll get the nav tags in and then put that up so i can turn page speed back on.