Sunday 14 September 2014

[Websites] How to use XHTML with HTML 5

XHTML. Nowadays, whenever you tend to hear about it, it's just people complaining and recommending that you never should use it, since it's old. It's not. If it was so outdated, then why would w3.org be using it on their webpages?

People only think it's outdated because it's more similar to HTML 4, and because it's not commonly used any more. But if you know how to write it, you probably will be writing much better code than most HTML5 developers.

But, the thing is, it's still more like HTML 4 than HTML 5 in terms of features. That's a bit of a problem if you want to use new HTML 5 features and elements, right? The thing is, and not many people realise - you can use HTML 5 with the "betterness" of XHTML.

It's simple! All you have to do to use HTML 5 with XHTML is this:

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
...


Now, what does all this do? Firstly, we have the XML metadata tag. This tells the browser which version of XML we want to use, and the encoding of the document. (In HTML, you would normally specify encoding using <meta charset="utf-8" />.)

The next bit is the DOCTYPE. We want HTML 5, and as you probably know, the doctype for HTML 5 is simply "html". Easy.

Now, you just have to remember the one thing: specify the XML namespace of XHTML in the root element - in this case, HTML. You always must do this, or you can face problems.

Now, you can do everything the proper way of XML! Self-closing script tags:

<script src="script.js" />

Proper BR tags, not silly auto-closing magic:

<br />

And, 'cause it's XML, it'll render faster and on more platforms! But... there's one problem. Will my hacky XHTML 5 validate? The answer is... somehow yes! You can do this and it will validate perfectly. To show you what I mean, here's an example:

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>Hello, World!</title>
  </head>
  <body>
    <nav>
       <a id="picturebtn1" href="page1.html" />
       <a id="picturebtn2" href="page2.html" />
       <div id="decoration" />
    </nav>
    <main>
      <h1>Hello, World!</h1>
      <hr />
    </main>
  </body>
</html>

Now, you might not have noticed, but I purposely did two things. Firstly, I used self-closing tags that would be invalid in non-XML, HTML 5. Secondly, I used two new HTML 5 elements. I could not have done both of these things - only one - if the page was not HTML 5 and XHTML.

Try pasting that into W3's validator. You'll get two warnings: one says that the HTML 5 validator is experimental, and the other says that we didn't need to give the encoding since we were directly inputting the code rather than uploading a file.

To prove that you can't do both these things without XHTML 5, get rid of the xmlns attribute of the head tag and get rid of the XML metadata tag. You'll end up with this:

<!DOCTYPE html>
<html>

  <head>
    <title>Hello, World!</title>
  </head>
  <body>
    <nav>
       <a id="picturebtn1" href="page1.html" />
       <a id="picturebtn2" href="page2.html" />
       <div id="decoration" />
    </nav>
    <main>
      <h1>Hello, World!</h1>
      <hr />
    </main>
  </body>
</html>

Now if you try to validate this, you'll get some errors. What they're all saying is that you can't use the XML self-closing syntax on any element you want - only the "chosen ones" will validate if you close them like that.

What if we try to validate it as XHTML strict?

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>Hello, World!</title>
  </head>
  <body>
    <nav>
       <a id="picturebtn1" href="page1.html" />
       <a id="picturebtn2" href="page2.html" />
       <div id="decoration" />
    </nav>
    <main>
      <h1>Hello, World!</h1>
      <hr />
    </main>
  </body>
</html>

Put that into the validator again. Now, what are the errors this time? It tells us we can't use the elements nav or main because they don't exist in (X)HTML 4. And who wants to use HTML 4?

I hope after reading this you'll consider using a combination of XHTML and HTML 5 in your webpages, rather than "vanilla" HTML 5. Please feel free to leave a comment on what you think about my idea!

No comments:

Post a Comment