DesignBash

web magazine and more…

The HTML of HTML 5

As the web continues to move forward, it’s becoming more and more important to understand (and use) HTML 5 tags. Although most tags are not officially supported in Internet Explorer, there are some great JavaScript libraries out there that allow us to start using HTML5 today!

So, before getting to far into your HTML, you’ll need to drop in a small JavaScript reference to HTML5.js, which “shims” in HTML5 support for IE8 and below. It’s easy enough to do this, just use this little code snippet:


<!-- If less than IE9, include the HTML5 shim -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Alright, now that we’ve considered older browsers we can get started with some actual HTML5 code. Starting from the very top, we need the doctype. Thankfully, the HTML5 doctype is simple compared to the ones you’re probably familiar with. Look at the beautiful simplicity of the document below:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML5 Example</title>
  </head>
  <body>
    <p>This is a perfectly valid document</p>
  </body>
</html>

Mmmmm, so much nicer than before…

What About Self Closing Tags?

One of the design choices that I really appreciate about HTML5 is the fact that you can optionally self-close tags. I plan to write my code without the self-closing slash, as I find it less noisy, but there is nothing wrong with self closing tags.


<!-- Totally valid -->
<img src="path/to/img.jpg" alt="valid" />

<!-- Also perfectly valid (and less noisy) -->
<img src="path/to/img.jpg" alt="valid" >

HTML5 Semantics

HTML5 gives us the ability create documents that are incredibly semantic. All the new elements were created with modern websites in mind, as you’ll see in the examples below:


<header>
  <h1>Large Title</h1>
</header>

<nav><ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul></nav>

<section id="content">
<ul id="posts">
  <li><article>
    <h3>Article Title</h3>
  </article></li>
  <li><article>
    <h3>Another Article Title</h3>
  </article></li>
</ul>
</section>

<footer>
  <address>New York, New York/address>
</footer>

That’s a very small example of what we can do with this new kind of markup. For a full explanation of all the new tags, checkout the official HTML5 specifications. It can be a little dry, but it’s worth slowly reading over.

posted by admin in HTML5,Quickie,Tutorials and have No Comments

Place your comment

Please fill your data and comment below.
Name
Email
Website
Your comment