It is the perfect time to embrace HTML5.
If you are a Web Designer, then you know that HTML is the language used to create web pages. XHTML came along next. XHTML is a cleaner, more strict version of HTML. But when you write an XHTML document, you have to pay close attention to follow the rules correctly.
Here are some examples of XHTML rules:
- All XHTML documents must have a DOCTYPE declaration.
- All XHTML tags and attributes should be written in lower case.
- All XHTML attribute values must be quoted.
- All the XHTML tags must be nested properly.
Because of the way we were brought up on the internet, we XHTML Coders like rules. We also like clean code. Most of us try to keep everything in our websites nice and neat. At home, we line up our shoes in pairs… in perfect order. It makes us feel better when we look at them.
Until now we were set in our ways… and quite comfortable.
Then along came HTML5. We’ve heard people whispering about it, but felt no need to change from our structured lifestyle.
But in 2012 there seems to be a shift. People aren’t whispering about HTML5 anymore. They’re converting to it. And now that all the modern web browsers, including Internet Explorer 9, support most of the features, 2012 seems like the right year to embrace it.
Lets take some Baby Steps from XHTML to Html5. I’m ready. Are you?
HTML5 is Simpler than XHTML
Let’s look at the Head Section of a web page.
- In HTML5 there is only one <!doctype> declaration, and it is very simple.<!DOCTYPE html>
- Next is the <html>tag.You can simply use this on its own or you can add the language attribute.<html lang=”en”>
- Next up are the <head> and the <title> tags. No changes here.
- The HTML5 <meta>tag with the charset attribute is simpler than in XHTML. Just add the charset and nothing else.You can simply type:<meta charset=utf-8> or <meta charset=utf-8 />
- There’s also no need to include the Type Attribute for Style Sheet Links and Scripts.
- First, the <script>tag.
You can simply type:<script src=”path/to/something.js”></script> - Next, the <link>tag.
You can simply type:<link rel=”stylesheet” href=”path/to/something.css”> or <link rel=”stylesheet” href=”path/to/something.css” />
- First, the <script>tag.
* In HTML5, the Trailing Slash is OPTIONAL.
Within the <body> section of a web page, things are pretty much the same as before. The use of <h1>, <h2>, <div>, <span>,<p>, <ul> and <a> are all part of HTML5.
Some New Elements – The Basics
HTML5 has some new content-specific elements, like <header>, <nav>, <section>, <article>, <aside>, and <footer>. See this helpful HTML5 Tutorial for a closer look at these elements.
IMPORTANT: When you decide to start adding the new HTML5 elements, you should also add the following CSS Styling in your style sheet to help older browsers understand what to do with these new elements:
article, aside, figure, footer, header, hgroup, menu, nav, section { display:block; }
HTMLshiv (a.k.a. HTMLshim) for IE7 and IE8
Sadly, at present, Internet Explorer 8 and below, offer no support for any of the new semantic HTML5 section elements. But you can get HTML5 tags working in IE7 and IE8 by including this JavaScript script (called HTMLshiv) from Google Code in the head of your document.
<!–[if IE]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>
Learn more about HTMLshiv.
Quick HTML5 Code Review
Here is a quick look at the HTML code we have just discussed:
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title>Baby Steps from XHTML to HTML5</title>
<!–[if IE]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”>
</script>
<![endif]–>
<link rel=”stylesheet” href=”something.css” />
</head>
<body>
</body>
</html>
More interesting differences between HTML5 and XHTML:
- In HTML5, you don’t need to place quotation marks around attribute values if there are no spaces.
- In XHTML, when you use a singleton tag like <br/> you are required to include a trailing slash in the element for valid XHTML. In HTML 5, the trailing slash is optional.
- HTML5 includes new elements for better structure, better form handling, drawing, and for media content.
- Many modern websites show videos. HTML5 provides a standard for showing them. Users will not have to use a Flash plug-in for video and audio content.
- Some tags have become obsolete in HTML5 such as <acronym>, <big>, <dd>, <frame>, <strike> and so on. HTML5 doesn’t tell you what to do, but simply makes suggestions in a very polite way. Deprecated features are no longer called deprecated. We now respectfully use the term obsolete.
HTML5 is Backwards Compatible
HTML5 is designed to be backwards-compatible, so it will conform to both HTML4 and XHTML coding styles. What a relief! We can still keep our code clean and organized. We can stick to our strict rules of XHTML coding if we like, while starting to add some new elements to our web pages.
Semantic Web Pages
HTML5’s new elements will help us make our pages more semantic. Semantic web pages have tags that are used appropriately to their correct meaning. This will make it a lot easier for search engines and screen readers to navigate our pages. In addition, HTML5 will enable us to do new things like draw graphics on screen. But we are just taking Baby Steps right now. Let’s just start with the basics. Our closets can still be neat and organized as we move forward. But if one shoe is out of place, it’s okay. HTML5 will forgive us.
You may also be interested in this web design tutorial: Toddler Steps from XHTML to HTML – Contact Forms.
Return to Top
5 comments
really helpful blog post and very nice tutorial regarding html5 i really enjoyed the stuff presented over here and really interesting.
And still, IE manages to be a problem with HTML 5 sites 🙁
Excellent overview! Many similar articles describe the advantages of XHTML over HTML 4, which simply adds to the confusion at this point. This is exactly the information we need.
Thanks!
Hi,
Nice article but you’re making some incorrect assumptions. XHTML is not any stricter than HTML it’s just that XML parsers are easier to break. Also I wouldn’t say it’s “cleaner”, because of course it’s completely subjective. In fact, I feel HTML5 and HTML 4.01 markup is much cleaner since you don’t have to bother with those ugly closing tags that are really a waste of time.
You say all XHTML documents must have a doctype when actually every HTML document should have a doctype, otherwise it will send browsers into quirks mode.
Lastly, I wouldn’t say that trailing slashes are optional under HTML5, it’s just that HTML5 supports most subsets of HTML so can cope with XHTML syntax too.
I’d avoid XHTML altogether. It was an interesting experiment but has largely failed. Most people have no idea what they’re doing and after declaring an XHTML doctype go on to declare “text/html” content type which forces the browser to ignore all XHTML and convert everything back to HTML, thus completely destroying the purpose of XHTML.
I didn’t know quotes around attributes were optional in HTML5. XML parsers will reject documents with unquoted attribute values. Same goes for unclosed singleton tags. I thought one of the foundations of HTML5 was for documents to be valid XML. This just leaves me speechless. What in the world were they thinking, putting this IE4 garbage in the standard??? I don’t know what to say. Hoping I’m just asleep and this will turn out to be a bad dream.