As I started a new WordPress theme, the time was right to do this in XHTML5.
1. The XHTML5 header / head
The doctype is much easier now. And it’s the first time for me to write it by hand and not via copy ’n’ paste. The doctype is as simple as:
<!DOCTYPE html>2. Structuring the content with “header”, “nav”, “article” and “footer”
Most of the (X)HTML pages have a header, a navigation and a footer. In between there’s the content. We used to classify them by giving them IDs:
<div id="head"> <ul id="nav">[...]</ul> </div> <div id="content"> [...] </div> <ul id="footer>[...]</ul>
XHTML5 introduced special tags for this areas—so they will be more accessible for people and search engines:
<header> <nav>[...]</nav> </header> <article> [...] </article> <footer>[...]</footer>
Looks cooler. But what about the browsers? Peter Kröner did some tests: Safari, Firefox 3.0 and Opera don’t have any problems. Firefox 2.0 has some but most people already use 3.0 and up. But styling in Internet Explorer isn’t possible because IE handle those tags as inline elements—they can’t have children.
One solution is to use the XHTML5 semantic elements and some DIV overhead to make them work in IE:
<div id="header"><header> <div id="nav"><nav>[...]</nav></div> </header></div> <div id="article"><article> [...] </article></div> <div id="footer"><footer>[...]</footer></div>
That’s semi cool. After searching the web, I found a tricky solution for IE. If you create those elements via JavaScript, they’ll also work in Internet Explorer. But who want’s to create a whole website in JavaScript? But there’s an IE bug, no let’s call it “feature”. If you create only one @
document.createElement('header');
3. Putting it all together
The prototype XHTML5 which will work in Safari, Firefox 3.0 and up, Opera and even Internet Explorer would look like this:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My first XHTML5 website</title> <script type="text/javascript"> document.createElement('header'); document.createElement('nav'); document.createElement('article'); document.createElement('section'); document.createElement('footer'); </script> </head> <body> <header> <a href="/">Welcome to my XHTML5 test page</a> <nav> <a href="/>Home</a> <a href="/about>About</a> </nav> </header> <article> <section> <h2>XHTML5 section 1</h2> <p>[...]</p> </section> <section> <h2>XHTML5 section 2</h2> <p>[...]</p> </section> </article> <footer> This XHTML5 test page has been created by Nico Hagenburger </footer> </body> </html>
Some remarks:
- I’ve used both @lang@ and @xml:lang@ because I had some problems with Google, when I used @xml:lang@ only.
- You could use conditional comments for MSIE
4. CSS styling of HTML5 elements
Just do it the way you would expect it—after calling @document.createElement@ you can use this CSS even in IE 6.0 and IE 7.0.
header { background: yellow; display: block; /* inline is the default */ } header a { color: red; }
Summary
HTML5 / XHTML5 works quite well, makes your code more readable, accessible and your website is made as state of the art. The code will work in most browsers:
Browser Does is work? Safari 3.1 yes Firefox 2.0 yes with HTTP header “Content-type: application / xhtml+xml” Firefox 3.0 yes Opera 9.0+ yes MSIE 6.0 yes with JavaScript only MSIE 7.0 yes with JavaScript only Update: Firefox 2.0 (April 3rd, 2009)
I found a solution to solve it in Firefox 2.0 (I think it is working for Firefox 1.0 and 1.5, too). You need to set the HTTP header to “Content-type: application / xhtml+xml”. But be careful. IE will not work with this solution and the document must be valid. Here’s a simple PHP code for doing this:
if (strpos($_SERVER['HTTP_USER_AGENT'], 'Firefox/')) { header("Content-type: application/xhtml+xml"); }
Update (April 9th, 2009)
I’ve added the “content-type” meta tag as suggested by “blabberstar.com” (see comments).
BlabberStar.com
April 9th, 2009
19:53 Uhr
It looks great. I will play with it a little more!
hopefully the html5 draft is accepted soon and vrowsers adopt it ASAP…
I can’t understand what is taking so long… it should be the matter of 2 yrs max!
BlabberStar.com
April 9th, 2009
20:25 Uhr
I’ve tryed to validate your example with
http: / / validator.w3.org /
and I’ve got several issues..
I’ve corrected all the issues and here is the result that validates ok
BlabberStar.com
April 9th, 2009
20:26 Uhr
huh, your system stripped my comment.
you can find thehtml here:
http: / / www.europeancasinoz.com / html5.html
Nico
April 9th, 2009
20:42 Uhr
@BlabberStar.com thanks for your input! I’ve updated my post and fixed your comment—I think I have to fix the design now ;)
4 Useful HTML5 Browser Support Overviews - Nico Hagenburger
May 16th, 2009
14:58 Uhr
[…] gives us many advantages. You can use the basic HTML5 elements like header, nav and footer in all browser at the moment. But there are more cool things like canvas, SVG or client side JavaScript […]
HTML 5 examples and tutorials « David Taylor
July 16th, 2009
14:54 Uhr
[…] http: / / www.hagenburger.net / 2009 / 03 / html5-xhtml5-with-css-for-safari-firefox-opera-ie […]
Theresa
July 20th, 2009
14:49 Uhr
This is kind of a silly question.. but I’m not very advanced in coding. Where would the PHP code go?
Thanks,
Theresa :]
Marcel
January 8th, 2010
04:22 Uhr
@Theresa: it seems you’re a beginner with PHP, so start reading http: / / www.php.net / manual / en / getting-started.php to get yourself a bit acquinted with it. More specific information on HTTP headers is on http: / / nl.php.net / manual / en / function.header.php
@Nico: shouldn’t you always serve an XHTML5-document as application / xhtml+xml, when the browser accepts that type?
e-sushi
January 10th, 2010
16:49 Uhr
Rather late as an answer @Theresa, but the php code should go at the very beginning of the document; so it gets loaded as early as possible and it won’t fail if the document starts outputting stuff.
In other words: the headers should be send by the php document before there is any actual output of the document (as if you read a book… the cover wraps the pages). Also, any php error that gets output to your browser window before a header is posted makes the header fail, because the webclient sees “output” and thinks that all headers allready have been send.