Baby Steps to HTML5It 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.

XHTML representationBecause 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.

  1. In HTML5 there is only one <!doctype> declaration, and it is very simple.<!DOCTYPE html>
  2. Next is the <html>tag.You can simply use this on its own or you can add the language attribute.<html lang=”en”>
  3. Next up are the <head> and the <title> tags. No changes here.
  4. 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 /> 
  5. There’s also no need to include the Type Attribute for Style Sheet Links and Scripts.
    1. First, the <script>tag.
      You can simply type:<script src=”path/to/something.js”></script> 
    2. 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” />

* 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

Internet Explorer Icon

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:

<!DOCTYPE html>
<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>

HTML5 RepresentationMore 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.