Using HTML5 on LightCMS today!

Have you started using HTML5 in your Light CMS designs yet? One reason to switch over to HTML5 now is that the updates to the language have made it more semantic—meaning, reading the HTML5 code is more intuitive if you don’t already know what you’re looking at. And Light CMS, unlike many other CMS platforms, gives you complete control over your design code. That means Light CMS lets you write in web standards without the hassles of having to learn some proprietary CMS language. As a result, Light CMS makes available the power of HTML5 whenever you're ready to use it. From rounded corners to video playback to the wonderful potential of canvas, HTML5 offers great opportunities for the Light CMS designer.

Getting started with HTML5

HTML5 is simply the newest iteration of HTML. It’s good to remember that HTML5 isn’t a completely new language; it's simply an evolution of what you are already using. Using HTML5 today simply means rethinking how you structure pages and the syntax you use to do so. And getting started is really easy, thanks to the HTML5's simplified doctype declaration.

The Doctype Delcaration

In all HTML files you must first declare a document type. The document type declaration (referred to in short as DTD or doctype) specifies what particular style of markup you'll be using. For more information regarding these declarations, click here. I’m sure you are familiar with the example below, the doctype for an XHTML 1.0 document.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

The doctype for HTML5 not only simplifies this rather lengthy code, but also supports all existing content. This means that the doctype for HTML5 can be applied to a document written in HTML 4.01 or XHTML 1.0 and still be completely functional. The simple HTML5 doctype can be seen below.


<!DOCTYPE html>

Isn’t that great? It’s short, to the point, and much easier to remember when starting a new document. So when you’ve decided to take the leap into HTML5, you can start by utilizing the simplified HTML5 doctype.

Structuring the page with HTML5

As web designers, we have become accustomed to using div elements and ID tags to group related content. HTML5 introduces new elements with identical functionality, but their names help determine their use without the need for subjective and varying ID tags.

Section

The section element (<section>) is the most generic of these new HTML5 elements. It simply groups a section of content together. Perhaps you can start replacing a few of the div elements in your designs today with this one. But to use the new convention properly, ensure that the grouped content is related.

Example 1 below shows HTML written with a div and Example 2 shows the same content written using the section element of HTML5 instead. 

Example 1


<div id="section">
<h1>Heading for the paragraph</h1>
<p>This is a paragraph of text.</p>
<p>This is another paragraph of text.</p>
</div>

Example 2


<section>
<h1>Heading for the paragraph</h1>
<p>This is a paragraph of text.</p>
<p>This is another paragraph of text.</p>
</section>

Header

The header element should be used as a container for introductory items. The header can come at the beginning of a document to hold content such as a logo, menu, and navigation; it can also hold content within section elements on other parts of the page as well.

Example 1


<header>
<a id="logo" href="/"><img alt="" src="images/logo.png" /></a>
<nav id="main-menu">
<ul>
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>
<li><a href="#">Item Three</a></li>
</ul>
</nav>
</header>

Example 2


<section>
<header>
<h1>Heading of the Paragaph</h1>
</header>
<p>This is a paragraph of text.</p>
</section>

Example 1 above shows the header element at the top of an HTML document grouping together the introductory items for the page. It also shows the new nav element to group together navigational content.

Example 2 shows the header element inside of a section to designate the introductory items for that section of the page.

Aside

The aside element is perhaps the most vague of the new HTML5 structural elements. The aside element is commonly described as containing information that falls into what we would typically label as a sidebar or a side column. It wraps content that is relevant to, but not necessarily pertinent to, the main content of the page. However, this does not mean that all sidebar content can be wrapped in an aside element. If content could be removed from the page without greatly affecting the overall content message, then it most likely could be wrapped in an HTML5 aside element.

Anchors

Another exciting change in HTML5 is how anchor tags (<a>) work. Anchor tags have previously been inline elements, which means making two elements into anchored hyperlinks required the use of two anchors (as shown below).


<h1><a href="#">Heading</a></h1>
<p><a href="#">This is a sentence of text.</a></p>

The change to the anchor element in HTML5 allows you to wrap multiple elements into one anchor, as can be seen below.


<a href="#">
<h2>Heading</h2>
<p>This is a sentence of text.</p>
</a>

The above structural examples show just a few of the changes you could make today to begin your journey to HTML5. There are many additional new elements as well that can be added to provide your page with a more semantically meaningful structure.

And you’re sure that this HTML5 stuff will work?

While HTML5 isn’t officially “done” yet, you can start using it today. The new elements will help you to provide semantic meaning to your content, organize and structure your document, and allow for new and exciting features to be added to your websites. And since the HTML doctype is backward compatible with all previous versions of HTML, you can enable your pages for HTML5 easily.

Of course, you will need to help Internet Explorer in recognizing the new HTML5 elements. Fortunately, there's an easy fix using JavaScript. Remy Sharp has written a script that generates all of the new HTML5 elements on the client side so that content will be rendered correctly, even in the non-HTML5-supporting IE. Just load the code below (written in a conditional comment to only serve it up to IE) and you are ready to go!


<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Have fun trying out HTML5!

This article simply intends to highlight a few of the basic improvements HTML5 has to offer, but there are many more advantages of this emerging technology. Don’t be left behind as the web landscape changes. With Light CMS, you can make these changes to your site right now through  Light CMS's built-in design editor or using your favorite editing tools via FTP.

Be sure to check out our other resources below, and let us know if you create something you just have to show off!

Related Resources from LightCMS

1 comment (Add your own)

1. Tommy Bailey wrote:
Great post!

Fri, February 18, 2011 @ 3:08 PM

Add a New Comment

Enter the code you see below:
code
 

Comment Guidelines: No HTML is allowed. Off-topic or inappropriate comments will be edited or deleted. Thanks.

Tags

Archive

Try it yourself. It's free.

  • Takes less than 60 seconds
  • No commitment
  • No payment information required
Sign Up For Free

Copyright © 2014 LightCMS® Content Management System Powered by LightCMS LightCMS is a product of NetSuite