You Probably Didn’t Notice – This Site is Now HTML5

I did the conversion last week. As I’ve talked about blogs and HTML5 are so natural the whole conversion probably took no more than 8 hours. Of course, that 8 hours was spread out over a few days. Which is one of the big reasons I didn’t post anything last week. I was busy getting this site moved into the future.

I’ve now got 3 sites running on the shiny new futurespec and I can now say I officially like the new semantic elements. I also feel like I’m getting a good handle on them.

One thing I’m still thinking about here and on DrunkenFist.com is the use of headers in the sidebar. Take a look at the outline of a page from this site run through the HTML5 outliner:

  1. HTML CSS JavaScript
    1. How To Make a Web Site the Modern Way. Part 7: Best Practices for Lists (UL, OL, DL)
      1. Using Lists as Menus
      2. Lists as Lists
        1. Unordered Lists
        2. Ordered List
        3. Definition Lists
      3. Leave a Reply
      4. Untitled Section
    2. Categories
    3. Tags
    4. Links
    5. Archives
    6. Pages

I’m comfortable with the outline all the way through the main content. The “Leave a Reply” feels like it should move from a header to just a paragraph or something, since it’s not really that prominent in the meaning of the page. Visually, sure, but it’s not actually that crucial to the content. Other than that I’m happy with the way it flows.

As a note, the “Untitled Section” at the bottom is a <nav> element.

Then we get into the sidebar. Starting with “Categories,” I feel like they’re too far up in the outline- too prominent. But, then, how should I mark them up? Should they not be headers? They sure feel like they should be headers. Thinking…

@font-face

As an aside, I’m also messing around with @font-face as well. I’ve done some work with Cufon (which is pretty good) and sIFR (which drives me insane,) at various jobs, but I’ve never really done any work with fancy fonts on my own projects. With the depth of support for @font-face and the low overhead of the technique (the two fonts included are around 5-10k each, gzipped- yes, gzip your fonts,) I figured it was time to take the leap. With a bit of know-how, it’s not so bad.

Now if I could just find a use for some JavaScript on the site, I’d be fully in the modern age.

2 thoughts on “You Probably Didn’t Notice – This Site is Now HTML5

  1. I copied your Drunken Fist web site a couple years ago. Now I picked up the site and it looks like this. Thanks I want to continue using this and other types of material your a great help.

Leave a Reply

Your email address will not be published. Required fields are marked *