An Initial HTML 5 Test

HTML 5 has been suggested as an alternate for interactive apps such as games and multimedia, so I thought I would join in on the testing fun. My actual interest is actually a basic one – how difficult is it to do a basic transition from an older page type to HTML 5?

The answer is that the transition is not too bad…especially if you’ve been using/moving to using technologies such as CSS and SSI. Here is what I did for a basic Web 1.0 page. That’s good news for both developers and the promoters of HTML 5, because they promise lots of backwards compatibility.

Starter Page

The page I am working with is the Penn State Extended Keyboard Accent Codes for the Macintosh – currently an XHTML Transitional page with heavy duty CSS and SSI implementation for the header, footer, navigation tabs and other elements. The HTML 5 version has been posted if you want to check code/display.

BTW – the reason it’s “Transitional” is that the site began as an HTML 4 page back in 2000 at a time when CSS implementation was still iffy and FONT tags were still in use. I’ve tried to clean up the code over the years, but I normally find junk from older versions. And I will find it again in the HTML 5 experiment up.

Initial Conversion

HTML 5 starts with the HTML 4.01 tag sets and adds to it. Therefore, a basic conversion is actually very simple if you’re going from HTML 4 to HTML 5 – you need to add the following doctype declaration right at the top of the HTML file:

Yes, that is the entire doc type “HTML”. As Webmonkey puts it, it’s “Finally, a doctype anyone can remember.” FYI – HTML 5 is case insensitive so you can “transition” to HTML 5 even if all your tags from capitalized tags from HTML 3.

Moving from XHTML

The conversion from HTML 4.01 to 5 is fairly easy, but if you’re like me, you’re actually converting from XHTML which is where some standards experts will wonder if we’re losing our minds. Before you lose faith though, it’s important to remember that HTML 5 is actually adding some tags like FOOTER, HEADER, MENU which add semantic value.

From a code point of view, this primarily means that you should delete the final “/” in XHTML tags like <img /> and <hr /> to return them back to 1990s style <img> and <hr>. A search and replace operation should do the trick, but if you are using Dreamweaver CS5, you can use the Convert option under the File menu to switch formats.

This will not only remove the “/” from different tags but will change some of the header metadata tags (e.g. the language declaration) from XHTML to HTML 5 syntax. It will also allow you to switch back to XHTML Transitional if need be. Of course, you should be working on a second copy anyway…for now.

Implementing HEADER, MENU, FOOTER

A nice class of tags added to the HTML 5 spec are page structure tags like <header>, &ltfooter> and <menu>. These represent common sections of a page such as the header on the top, the footer on the bottom and different blocks of site navigation.

The HTML 5 team apparently noticed that many modern Web sites create DIVS for these sections for the purposes of CSS. These tags standardize these common classes as tags which makes porting data between sites a little easier. For instance, you would no longer have to worry about whether the header was in <div class=”header”&gt or in <div class=”topheader”> or <div class=”logoheader”>. It’s all <header> now.

See some pre HTML 5 and post HTML 5 code for comparison of a navigational menu. I think you’ll see that the HTML 5 code is a little easier to parse.

FYI – If you do have multiple navigational schemes, you can create custom CSS classes for the MENU tag.

CSS: Don’t Forget display:block

With the exception of Internet Explorer, most modern browsers (Firefox/Safari/Opera) already support these HTML5 structureal tags. Technically they support any tag you wish to make up including everyone’s favorite, the <foo> tag. All these browsers do is check the CSS sheets for display instructions.

Note though that there is a default CSS set for standard HTML tags like BODY, H1, H2, and so forth. Our CSS is basically adding additional display information. For newer or made up tags, you have to start from scratch and that includes the CSS display: block syntax which basically says “This class/tag is a DIV like block and not a SPAN.” You also need to manually set margins and padding.

Fortunately, you generally only need to add/modify these pieces of information and everything else can stay the same. See example XHTML and HTML 5 code for a header block. Notice that I am also modifying the display of links within a header.