Resources for Graphics, Website, Islamic Art, Typography, Motion Graphics, User Interface

HTML 5: The Basics

The next iteration of HTML has been met with excitement by some, loathing by others and confusion/fear by everyone else. Love it or hate it, HTML 5 will soon define how you build websites. This is the first article in a four part series that will introduce HTML5 and its basic features as well as explain the key differences from HTML4.01 and XHTML 1.0 so you can start preparing yourself and your sites for the transition. Over the next week we’ll be focusing on three major areas:

1. New Elements
2. Semantic Changes
3. Getting it Working Today

This article will briefly introduce each of these topics to prepare you for the in-depth articles ahead.

 

APIs

Before we dive into the topics listed above, I want to take a minute to look at an extremely important feature that we won’t be covering in its own dedicated article: the new APIs. HTML5 includes several new APIs that are integrated with some of the new HTML5 elements (which we’ll be looking at later). Here’s the complete list straight from W3.org:

  • 2D drawing API which can be used with the new canvas element.
  • API for playing of video and audio which can be used with the new video and audio elements.
  • An API that enables offline Web applications.
  • An API that allows a Web application to register itself for certain protocols or media types.
  • Editing API in combination with a new global contenteditable attribute.
  • Drag & drop API in combination with a draggable attribute.
  • API that exposes the history and allows pages to add to it to prevent breaking the back button.
  • Cross-document messaging.

As you can see, the principal purpose of these APIs is to facilitate web application creation. Notice the third API enables offline web apps. This is excellent news for users and programmers alike because it enables the use of rich, internet-driven applications in an offline environment. You can expect to see many of your favorite applications follow Gmail in introducing offline access.

New Elements in HTML5

HTML5 introduces quite a few new elements. Article two in this series will look at a few of these in detail, but for now here’s the complete list with brief descriptions (source: w3schools):

  • <article> Defines external content
  • <aside> Defines some content aside from the article it is placed in
  • <audio> Defines sound, such as music or other audio streams
  • <canvas> Defines graphic, such as graphs or other images
  • <command> Defines a command button, like a radiobutton, a checkbox, or a button
  • <datagrid> Defines a list of selectable data. The datagrid is displayed as a tree-list
  • <datalist> Defines a list of selectable data. Use this element together with the input element, to make a dropdown list for the input’s value
  • <datatemplate> Defines a container for data template. This element must have child elements to define a template: <rule> elements
  • <details> Defines details of an element, which the user can see, and click to hide
  • <dialog> Defines a dialog, such as a conversation
  • <embed> Defines embedded content, such as a plug-in
  • <event-source> Defines a source for events sent by a server
  • <figure> Used to group some elements
  • <footer> Defines the footer of a section or document. Typically contains the name of the author, the date the document was written and/or contact information
  • <header> Defines the header of a section or document
  • <mark> Defines marked text. Use the <mark> tag if you want to highlight parts of your text
  • <meter> Defines a measurement. Used only for measurements with a known minimum and maximum value
  • <nav> Defines a section of  navigation links
  • <nest> Defines a nestingpoint in a datatemplate for child elements. Used together with the elements <datatemplate> and <rule>
  • <output> Defines different types of output, such as output written by a script
  • <progress> Defines work-in-progress. Use the progress element to display the progress of a time consuming function in JavaScript
  • <rule> Defines the rules for updating a datatemplate. Used together with the elements <datatemplate> and <nest>
  • <section> Defines sections in a document. Such as chapters, headers, footers, or any other sections of the document
  • <source> Defines media resources for media elements, such as <video> and <audio>
  • <time> Defines a time or a date, or both
  • <video> Defines video, such as a movie clip or other video streams

Though we won’t have time to go over each of these in detail, we’ll be examining a few of the important ones such as <canvas> and <video>.

Semantic Changes

This is the part that should fundamentally change the way you structure your sites. Included in the list above are six new structural elements that will help bring consistency to the basic frame of sites all across the web. These six elements are:

1. <nav>
2. <section>
3. <article>
4. <header>
5. <footer>
6. <aside>

Think of these as the replacement for many of the DIVs that you currently use to structure your site. So instead of “<div class=”header”>,” you’ll simply have “<header>.” Notice I included “div class” instead of “div id.” This is because these elements are repeatable throughout a page in the same way that classes are. We’ll investigate this more later this week in article three.

Getting HTML5 Working Today

Don’t get too excited by this headline. As any good web developer knows, all the major web browsers still differ (some are worse than others, you know who I’m talking about) on support for HTML4.01 and XHTML 1.0. Now imagine what that means for a change as big and new as HTML5. Though mega-developers like Google are pushing along the acceptance of HTML5, it won’t be supported across the board for some time. However, that doesn’t meant that you shouldn’t begin preparing for the big switch today, and it certainly doesn’t mean there aren’t clever tricks out there to enable you to start playing with HTML5 right away. In article four, we’ll take a look at how you can start your HTML5 journey sooner rather than later.

Conclusion

This article briefly introduced the new elements and APIs included in HTML5. We talked about how you should be excited for the changes HTML5 will bring to the web apps of tomorrow. We also got a taste of the semantic changes to come and the new structure our web pages should take in the future. Finally, we learned that even though HTML5 isn’t quite ready for the masses, we can still get our grubby developer fingers on it and start experimenting today. Check back here frequently in the next week for an in-depth look into each of these topics!

Previous we posted an introduction to HTML5 and briefly covered some of the content we’ll be outlining in this series. Today’s post, which is the second in the series of four, will take a look at how to use six of the new elements in HTML5: canvas, article, audio, video, meter, and mark.

Keep in mind that HTML5 is not exactly ready for widespread use – so don’t go changing anything on your site quite yet. Be assured that HTML5 is in fact coming soon, therefore these concepts may prove useful in the near future.

 

The Canvas Element

The <canvas> element is a new container for graphics. Note that the canvas is merely that, an area where graphics can be placed. The <canvas> element should contain only two attributes: width and height. Here’s an example:

<html>
	<head>
		<script src="testscript.js" type="text/javascript">
	</head>

	<body onload="draw();">
		<canvas id="graphicsCanvas" width="600" height="600">
	</body>
</html>

The actual drawing for this example is done in JavaScript. The key to implementing the graphics in your script is to reference a context through the method getContext. For now the only context you can call is “2d”. Think of the 2d context as your actual drawing plane (defined by the HTML canvas size) beginning at coordinates 0,0 (the very top left of the screen). To draw an item, you first decide at what coordinates the item will begin. For example, if you want to draw something that’s ten pixels in from the left and ten pixels in from the top, your coordinates are (10,10).

There are a number of ways to use the 2d context to create graphics. Everything from simple rectangles to curves and gradients are supported. For our purposes, we’ll keep it simple just to get you started. Here’s the JavaScript, implementing the principles outlined above:

   function draw() {
      var canvas = document.getElementById("graphicsCanvas");
      if (canvas.getContext) {
        var context = canvas.getContext("2d");

        context.fillStyle = "rgb(50,50,50)";
        context.fillRect (20, 20, 150, 150);
        context.strokeRect (20, 20, 300, 300);
      }
    }

If you’re using a supported browser (Safari, Firefox, or Opera) you should see the following result when you combine the HTML and JavaScript we just looked at.

screenshot
  • Google+
  • Digg
  • Pinterest
  • LinkedIn
  • StumbleUpon
  • Tumblr
  • Facebook

Again, before you do any drawing remember to implement the 2d context or you won’t see any graphics at all! Just in case you’re wondering what the heck this “fillRect” rubbish is about, here’s a quick explanation of the syntax for a few of the drawing methods.

Drawing Rectangles

First of all, you should know that when you see four numbers in the format (0,0,0,0), this represents (distance from the left, distance from the top, width, height). Now let’s look at a few specific syntax examples:
fillStyle = “rgb(50, 50, 50); Determines the color of the fill
fillRect (20, 20, 150, 150); Creates a simple filled rectangle
strokeRect (20, 20, 150, 150); Creates a stroked rectangle
clearRect (20, 20, 150, 150); Creates a transparent area (a hole)

Drawing Shapes

beginPath (); Starts a path
closePath (); Closes a path
moveTo (20, 20,); Lifts drawing pen and starts in a new location
fill (); Fills the drawn shape
stroke (20, 20); Strokes the drawn shape

Much More!

For much more information on how to draw with JavaScript and how to use the canvas element, check out Mozilla’s tutorial.
Also, here’s a handy Canvas Cheat Sheet from Jacob Seidelin.

The Article Element

The article element is simply a way to refer to a blog post, news article, etc. within your page. Here’s the syntax:

<article>
	<p><a href="http://articleLinkHere>
	 Article Title Here

	 Article </p>
</article>

As you can imagine, this will make it super easy to target and style articles in your CSS without defining a class.

The Audio and Video Elements

Like the article element, these are simply containers that hold content. Again you can see the benefit immediately when you start to style these with CSS without the need of any custom classes. Here’s the simple syntax for each (any text placed between the brackets only shows up in unsupported browsers):

<video src="http://videoSourceHere">Unsupported browser!></video>

<audio src="sample.mp3">Unsupported browser!</audio>

Audio Attributes

Both the audio and video elements contain important attributes that you should know. First let’s look at those for the audio element (source: w3shcools).

autoplay (true or false)
If true, then the audio will start playing as soon as it is ready

controls (true or false)
If true, the user is shown some controls, such as a play button.

start (numeric value)
Defines where in the audio stream the player should start playing.
As default, the audio starts playing at the beginning.

end (numeric value)
Defines where in the audio stream the player should stop playing.
As default, the audio is played to the end.

height (pixels)
Sets the height of the video player

width (pixels)
Sets the width of the video player

loopend (numeric value)
Defines where in the audio stream the loop should stop,
 before jumping to the start of the loop. Default is the end
attribute's values.

loopstart (numeric value)
Defines where in the audio stream the loop should start.
Default is the start attribute's values

playcount (numeric value)
Defines how many times the audio clip should be played.
Default is 1.

poster (url)
The URL of an image to show before the video is ready

src (url)
The URL of the audio to play

Video Attributes

The video element contains all the same attributes as the audio element as well as 3 more (source: w3shcools).

height (pixels)
Sets the height of the video player

width (pixels)
Sets the width of the video player

poster (url)
The URL of an image to show before the video is ready

The Meter Element

The meter element can be used to contain measurements of any kind (percentage, score, day counter, etc.). This time, before we look at an example, let’s go straight into the attributes (again, straight from w3shcools).

high (number)
Defines at which point the measurement's value is consider a high value

low (number)
Defines at which point the measurement's value is consider a low value

max (number)
Defines the maximum value. Default value is 1

min (number)
Defines the minimum value. Default value is 0

optimum (number)
Defines what measurement's value is the best value.
If this value is higher then the "high" attribute's value,
it means that the higher value the better. If this value is
lower than the "low" attribute's value, it means that the
lower value the better.

value (number)
Defines the measurement's value

The two specially important attributes in this set are max and min. The meter element can only be used when the measurement has a known maximum and minimum value. That doesn’t necessarily mean you have to define a max and a min (you could use the default), just that you have to be aware of what they are. Here’s an example:

You found 25 out of 50 or 50% of the hidden words!

Notice that for the first meter element required specification of the min and max because the range was between 0 and 50. However, the second meter used the default range of 1-100 because percentages usually fall in this range.

The Mark Element

The final element we’ll take a look at is <mark>. Simple in concept, the mark element can be used to highlight a specific section of text to make it more noticeable to the reader. Here’s an example:

<p>A good highlighter is hard to find.</p>

Now we can use the mark tag to easily target the section we want to highlight in our CSS:

mark {
	background-color: yellow;
	font-weight: bold;
}

The result is nice, highlighted text that you can spot in an instant.

Conclusion

In summary, we covered six brand new elements from HTML5. First we looked at the canvas element, which is a container for a wide variety of graphical items that you can create using a number of JavaScript functions. Then we learned about the article element, which represents a new way to refer to external content. Next we outlined how to use the audio and video tags along with their various attributes as well as how to properly tag values falling within a specified range using the meter element. Finally, we discovered how to highlight a specific portion of text using the mark element.

I hope you’ve learned as much reading this as I did writing it! Use the comments below to ask any questions you might have or share your own bit of HTML5 knowledge. The next article in this series is perhaps the most important because we’ll be looking at a few more new elements that represent some serious semantic changes in the structure of HTML files. So check back soon to see how you’ll be laying out your HTML for years to come!

In the last article, we looked at a number of new elements introduced in HTML5 and how to implement them properly. In this article, we’ll again be discussing a set of new elements but this time we’ll be examining only those HTML5 elements that represent a significant semantic change to the way you structure your sites. This article will cover how to use each of these new elements in a way that will bring much needed relief to the div-itus that plagues the structure of so many sites today.

 

Semantics?

Before we get started, you should know that by semantics I’m simply referring to using HTML tags and elements the way they were intended to be used. Unlike programming languages, which have to compile to run, HTML requires no compiler (the browser attempts all the interpretation) and therefore gives you a vast amount of freedom to use a given element any way you want. However, if you’re a new web designer you’re probably discovering that many people are semantic fanatics, and perhaps rightfully so. Using tables where they don’t belong or throwing around <h1> tags every time you want to bold something might be convenient, but it makes for some incredibly messy and hard to read code. Therefore, we look to semantic, cross-browser, valid HTML practices to bring unity and consistency to sites all across the web. Many of the HTML5 elements we’ll be looking at will be easy enough to interpret simply by reading the name, but familiarizing yourself with the correct way to implement these elements is absolutely crucial if you want to create professional quality sites that function in a number of major browsers.

The Problem

Take a look at 100 different websites with nearly identical layouts and you will find 100 different structures and naming conventions in the underlying HTML. Even though any good web developer will name his/her <div>s in such a manner that they are easily understood, the vast possibilities can lead to confusion over the identification of relatively simple and uniform sections of code. For this reason, HTML5 gives us a number of elements that can be used to identify and target items that appear in almost every site on the web such as headers, footers and navigation menus. Furthermore, apart from inconsistent naming conventions, the current way of doing things can quickly lead to div structures that come with a lot of extra weight compared to simple, built-in HTML elements. To illustrate, let’s look at a simple structure you might find in HTML4.

<body>
	<div id="nav_bar"></div>
	<div id="main_header"></div>
	<div class="side_bar"></div>
	<div id="container">
		<div class="section">
			<div class="header"></div>
			<p>Some Text</p>
			<div class="footer"></div>
		</div>
		<div class="section">
			<div class="header"></div>
			<p>Some Text</p>
			<div class="footer"></div>
		</div>
	</div>
	<div id="main_footer"></div>
</body>

You can see how this relatively simple piece of code is overrun by divs, which can take a long time to sort though due to all of the necessary fluff. The CSS to work with this HTML would contain the following selectors:

#nav_bar {}
#main_header {}
.side_bar {}
#container {}
.section {}
#header {}
.section p {}
.footer {}
#main_footer

Though not as complicated as the HTML before it, this code isn’t as simple as it could be. Now let’s dive into how HTML5 helps us solve this problem.

The Solution

HTML5 allows us to take nearly all of the custom divs above and convert them to standard elements. Let’s look at the code necessary to accomplish the same thing in HTML5.

<body>
	<nav></nav>
	<header></header>
	<aside></aside>
	<div id="container">
		<section>
			<header></header>
			<p>Some Text</p>
			<footer></footer>
		</section>
		<section>
			<header></header>
			<p>Some Text</p>
			<footer></footer>
		</section>
	</div>
	<footer></footer>
</body>

And the corresponding CSS:

nav {}
header {}
aside {}
section {}
footer {}
section p {}
#container {}
#container header {}
#container footer {}

There’s a lot to discuss about these examples so let’s start with the HTML. Notice that the chronic div-itus has disappeared and in its place are universally understood and easy to interpret elements. This vastly improves the readability of the code. One of my pet peeves when reading through someone else’s code is tracking down the correctly corresponding <div> and </div> tags. This can take a ridiculous amount of time if there are eight or ten stranded and unlabeled closing div tags. Using standard elements goes a long way towards eliminating this problem because the closing tag is more informational (it’s easier to find </section> than it is to locate a random </div> that belongs to <div class=”section”>).

The CSS has been simplified as well. We can now just use identifiers without hash tags or periods in most cases because we are referring to natively supported elements instead of uniquely named divs. Notice that in our HTML this time around we were able to use the same tag for all header and footer elements (we tossed the “main” classification). This is because if we want to style headers within the container differently than the others we can just use “#container header” to target just the header elements within the container div (and we can be sure it will properly inherit the traits we want to keep). Now that we’ve gotten a glimpse of the new structural elements, let’s go over how to use each one individually.

The <header> Element

You might initially assume that the header element refers to the one principal header on the page. However, it’s really just a generic element that can be used several times throughout your code. Here’s an example:

<body>
	<div class="Tutslist">
		<header>
			<h2>HTML5 Tutorials</h2>
			<p>Completely Free HTML5 Training</p>
		</header>
		<ul>
			<li>One</li>
			<li>Two</li>
			<li>Three</li>
		</ul>
	</div>

	<div class="Tutslist">
		<header>
			<h2>CSS3 Tutorials</h2>
			<p>Completely Free CSS3 Training</p>
		</header>
		<ul>
			<li>One</li>
			<li>Two</li>
			<li>Three</li>
		</ul>
	</div>
</body>

Again we’ve replaced what would’ve normally been a bunch of divs with simpler header tags. It’s important to note that since we can have multiple header tags in a single HTML file, you shouldn’t think of the header element as a replacement for <div id=””></div>, which represents a unique div appearing only once, but rather for <div class=””></div>, which represents an element that appears multiple times. This is an important distinction for semantic reasons as well as CSS styling and applies to several of the elements we’ll discuss.

The <footer> Element

Most of the things I just explained about the header element also apply to the footer element, meaning it is generic and can be placed multiple times throughout your code. Obviously, footers generally (though not always) go at the end of a section of code and contain information that is secondary in nature such as the publish date, author, copyright information, etc. However, what goes into the footer is largely up to you. Here’s a quick example that builds on what we saw with the header element:

<body>
	<div class="Tutslist">
		<header>
			<h2>HTML5 Tutorials</h2>
			<p>Completely Free HTML5 Training</p>
		</header>
		<ul>
			<li>One</li>
			<li>Two</li>
			<li>Three</li>
		</ul>
		<footer>6 hours of free tutorials!</footer>
	</div>

	<div class="Tutslist">
		<header>
			<h2>CSS3 Tutorials</h2>
			<p>Completely Free CSS3 Training</p>
		</header>
		<ul>
			<li>One</li>
			<li>Two</li>
			<li>Three</li>
		</ul>
		<footer>4 hours of tutorials!</footer>
	</div>
</body>

The <section> Element

The section element is a generic way to separate portions of your site. For instance, say an event website is divided up into “what”, “when”, and “where.” You could use <section> tags to make this division in your code (again, think “class” not “id”). Using our previous example, we could replace the “Tutslist” class with section elements.

<body>
	<section>
		<header>
			<h2>HTML5 Tutorials</h2>
			<p>Completely Free HTML5 Training</p>
		</header>
		<ul>
			<li>One</li>
			<li>Two</li>
			<li>Three</li>
		</ul>
		<footer>6 hours of free tutorials!</footer>
	</section>

	<section>
		<header>
			<h2>CSS3 Tutorials</h2>
			<p>Completely Free CSS3 Training</p>
		</header>
		<ul>
			<li>One</li>
			<li>Two</li>
			<li>Three</li>
		</ul>
		<footer>4 hours of tutorials!</footer>
	</section>
</body>

Notice that sections frequently begin with a header element and end with a footer element, though this is by no means a necessity.

The <article> Element

I briefly mentioned the article element in my last post, forgetting completely that I was saving it for this post. However, a commenter cleverly pointed out some bad information that we should straighten out. Despite the fact that w3schools states that the article element is strictly for external content, w3.org clearly states that its actual purpose is to identify a section of your site that is intended to be independently distributable. For example, a blog post like this one could stand on its own and is not dependent on the rest of the site’s content. Further, this post is something that we actually want other sites to discuss and link to. News stories, forum posts and tutorials are good examples of this type of content. Let’s apply this to our running example.

<body>
	<section>
		<header>
			<h2>HTML5 Tutorials</h2>
			<p>Completely Free HTML5 Training</p>
		</header>
		<article>
			<h3>HTML Tutorial 1</h3>
			<p>Lots of good good information</p>
		</article>
		<article>
			<h3>HTML Tutorial 2</h3>
			<p>Lots of good good information</p>
		</article>
		<footer>6 hours of free tutorials!</footer>
	</section>

	<section>
		<header>
			<h2>CSS3 Tutorials</h2>
			<p>Completely Free CSS3 Training</p>
		</header>
		<article>
			<h3>CSS Tutorial 1</h3>
			<p>Lots of good good information</p>
		</article>
		<article>
			<h3>CSS Tutorial 2</h3>
			<p>Lots of good good information</p>
		</article>
		<footer>4 hours of tutorials!</footer>
	</section> 
</body>

As you can see, this is really internal content that can be referenced externally, rather than vice versa like w3schools seems to suggest.

The <nav> Element

The nav element refers to sections of your HTML containing links for navigational purposes like that in a sidebar or strip of buttons along the top of a page. However, this does not apply to all groups of navigational links on your pages. Instead, reserve this element for the main sources of navigation on your site. w3.org gives the example of a series of links in a footer as a situation that would not merit a nav element. Again we’ll revise our example to include the new element.

<body>
	<nav>
		<a href="">Home</a>
		<a href="">About</a>
		<a href="">HTML5 Tuts</a>
		<a href="">CSS3 Tuts</a>
		<a href="">Contact</a>    
	</nav>
	<section>
		<header>
			<h2>HTML5 Tutorials</h2>
			<p>Completely Free HTML5 Training</p>
		</header>
		<article>
			<h3>HTML Tutorial 1</h3>
			<p>Lots of good good information</p>
		</article>
		<article>
			<h3>HTML Tutorial 2</h3>
			<p>Lots of good good information</p>
		</article>
		<footer>6 hours of free tutorials!</footer>
	</section>

	<section>
		<header>
			<h2>CSS3 Tutorials</h2>
			<p>Completely Free CSS3 Training</p>
		</header>
		<article>
			<h3>CSS Tutorial 1</h3>
			<p>Lots of good good information</p>
		</article>
		<article>
			<h3>CSS Tutorial 2</h3>
			<p>Lots of good good information</p>
		</article>
		<footer>4 hours of tutorials!</footer>
	</section> 
</body>

The <aside> Element

The last element we’ll discuss is aside. This element is reserved for content that is related to, but distinctly separate from the rest of the content on the page. The aside element can be used for pull quotes, advertisements, nav elements, sidebars, etc. For instance, let’s say we wanted to take our navigation from the last example and place it into a sidebar:

<body>
	<aside>
		<p>General Info</p>
		<nav>
			<a href="">Home</a>
			<a href="">About</a>
			<a href="">Contact</a>    
		</nav>

		<p>Tutorials</p>
		<nav>
			<a href="">HTML5 Tuts</a>
			<a href="">CSS3 Tuts</a>  
		</nav>
	</aside>

	<section>
		<header>
			<h2>HTML5 Tutorials</h2>
			<p>Completely Free HTML5 Training</p>
		</header>
		<article>
			<h3>HTML Tutorial 1</h3>
			<p>Lots of good good information</p>
		</article>
		<article>
			<h3>HTML Tutorial 2</h3>
			<p>Lots of good good information</p>
		</article>
		<footer>6 hours of free tutorials!</footer>
	</section>

	<section>
		<header>
			<h2>CSS3 Tutorials</h2>
			<p>Completely Free CSS3 Training</p>
		</header>
		<article>
			<h3>CSS Tutorial 1</h3>
			<p>Lots of good good information</p>
		</article>
		<article>
			<h3>CSS Tutorial 2</h3>
			<p>Lots of good good information</p>
		</article>
		<footer>4 hours of free tutorials!</footer>
	</section> 
</body>

Look Ma, No Divs!

The example above illustrates the exceptionally large amount of code that HTML5 allows us to execute using only standard elements! Every piece of this example is super easy to target in CSS, instantly understandable by any developer (at least any developer who is versed in HTML5), and incredibly concise compared to the amount of code this would require in HTML4. And there’s not a div in sight.

Conclusion

This article briefly described the concept and importance of semantic code and discussed the major semantic changes brought about by HTML5. We discovered how to properly use six incredibly helpful new HTML5 elements: header, footer, section, article, nav and aside. Finally, we learned how these new elements can be used to create neatly structured and easily readable code that avoids the excessive use of divs.

To prevent confusion (and to avoid a flurry of angry comments), I should make it clear that there is absolutely nothing wrong with divs. I personally use divs quite liberally throughout every site I create and find them to be among the most flexible and essential elements in HTML. However, the more you can replace uniquely named divs with universally named elements the more reliable and standards-accurate your code will become.

Looking Ahead: Three Down, One to Go!

The next article will be the final in our series on HTML5. As you probably know by this point, none of what I’ve showed you is ready to be integrated into websites for widespread public viewing. However, our next article will show you various tricks to start using HTML5 right away and discuss how you should be preparing your sites for the inevitable update!

This will be the final article in our series on HTML5. This go around we’ll have a brief look at which new HTML5 technologies major browsers are officially supporting and go over some techniques you can use to take advantage of the new elements in your coding today. Finally, we’ll discuss how you should start preparing to support HTML5 in all the sites you build from here forward.

 

What Features Are Major Browsers Officially Supporting?

For the purpose of this article, we’ll define “official support” as listed in the documentation from the browser’s developer. This will ensure that no hacks or tricks are required to use the new features and will instead focus on native implementation straight from the source (feel free to add your own commentary based on the results of your own tests!). With that in mind, let’s take a look at the current iterations of a few major browsers.

Firefox 3.5

Head over to the Firefox Developer Page and you’ll see a brief description on HTML5 support. Here’s a list of supported features:

  • audio element
  • video element
  • canvas element
  • Offline resource specification
  • Drag and Drop API

Safari 4

The Safari 4 features list mentions support for the following features:

  • audio and video elements (and associated API)
  • canvas element (actually created by Apple for Dashboard)
  • Offline Application Support

Internet Explorer 8

Though the Internet Explorer Developer Center claims “strong support” for HTML5, there doesn’t seem to be any support for the canvas element (probably due to Silverlight), audio/video elements, or the offline application API. Here’s a complete list of IE 8′s supported elements, none of which seem to be exclusively from HTML5. I did however, find mention of support the new Cross-Document Messaging API. Feel free to share any resources you have on HTML5 support in IE 8 using the comments below.

Opera 10

Opera’s developer site posted an article about HTML5 in January containing existing support. Here are the features that article lists as currently supported by Opera 10:

  • video element
  • canvas element
  • Cross-document messaging
  • Server-sent events
  • Web Forms 2.0

Further, here’s a report on current web specifications supported in Opera Presto 2.3 (Opera’s rendering engine).

Google Chrome

Unable to find an official list straight from Google, I was forced to turn to an O’reilly article outlining a speech made by Google’s VP of engineering on HTML5 and the future of web technologies. In his speech, Vic Gundotra listed the these features as being supported by Google Chrome (as well as Firefox, Safari and Opera):

  • video element
  • canvas element
  • geolocation API
  • App cache (offline wep app API)
  • Database API
  • Web Workers (background thread processing)

Cheating

As you can see, even the browsers that have the most support for HTML5 still don’t natively support even half of the new features and elements we’ve discussed in recent articles. Which means using HTML5 today will not be as easy as simply throwing in the semantic changes that you’ve learned. What we’ll need is a way to create the new elements in HTML5 using only the widely used and supported web technologies of today. As it turns out, JavaScript offers a simple, native method for doing exactly this! By using document.createElement, we can make our own custom elements that conform to the specifications of those supported in HTML5. Sure it’s a bit of a hack, but it’s the closest thing you’ll get to getting your hands on all of the new elements in the near future. Let’s use the example from our previous article to see what this would look like.

<body>
	<aside>

		<p>General Info</p>
		<nav>
			<a href="">Home</a>
			<a href="">About</a>
			<a href="">Contact</a>    
		</nav>

		<p>Tutorials</p>
		<nav>
			<a href="">HTML5 Tuts</a>
			<a href="">CSS3 Tuts</a>  
		</nav>

	</aside>

	<section>
		<header>
			<h2>HTML5 Tutorials</h2>
			<p>Completely Free HTML5 Training</p>
		</header>
		<article>
			<h3>HTML Tutorial 1</h3>
			<p>Lots of good good information</p>
		</article>
		<article>
			<h3>HTML Tutorial 2</h3>
			<p>Lots of good good information</p>
		</article>
		<footer>6 hours of free tutorials!</footer>
	</section>

	<section>
		<header>
			<h2>CSS3 Tutorials</h2>
			<p>Completely Free CSS3 Training</p>
		</header>
		<article>
			<h3>CSS Tutorial 1</h3>
			<p>Lots of good good information</p>
		</article>
		<article>
			<h3>CSS Tutorial 2</h3>
			<p>Lots of good good information</p>
		</article>
		<footer>4 hours of free tutorials!</footer>
	</section> 
</body>

As you can see, this page uses the HTML5-only elements header, footer, article, aside, nav and section. All we have to do to get this to work is create those elements in JavaScript:

<script type="text/javascript">
       document.createElement('header');
       document.createElement('footer');
       document.createElement('section');
       document.createElement('aside');
       document.createElement('nav');
       document.createElement('article');
</script>

Voila! Now you can target those elements in CSS just as if they were native elements. Warning: this method can produce widely varied results and you should use at your own risk. If someone visits your site with JavaScript turned off, your CSS won’t take hold and your nice, pretty HTML5 website will look like it was attacked by Godzilla. However, this method is great for your own experimentation and should work with all major browsers.

Further Testing

In my own testing, both Safari and Firefox seemed to handle all of the new elements listed above without any JavaScript whatsoever. If you take a look at the code, you can see that Apple’s own Safari 4 about page uses several new HTML5 elements and only implements JavaScript in the case of Internet Explorer. Try this out on your browser and let us know what you come up with!

Preparing for HTML5

On his site, Jon Tangerine make the suggestion that we should start preparing ourselves for HTML5 by getting used the structure inherent in the semantic changes. What this means practically is fairly simple, use classes to mimic the structure of an HTML5 page. This method is not browser-specific, adheres to all currently popular standards, does not rely on scripting, and is super easy to implement. For example, we would take all of the header tags in the code above and convert them to <div class class=”header”> and use the normal class markup in for targeting in CSS.

Now, if you really want to properly prepare yourself for HTML5, don’t just go throwing the terms header, footer, section, etc. around. Force yourself to use these terms semantically, as if they were the actual HTML5 elements. First of all, this means using class instead of id where applicable. It also means adhering to the strict HTML5 guidelines in place for each element (outlined in the previous article). One example of this would be to only use a nav class on major navigational areas of a page and not for minor navigational links such as those found in a page footer.

5 Sites Using HTML5

Despite the fact that my official advice is that HTML5 won’t be ready for popular use for some time, I have to admire sites that are taking the initiative to usher in the future of web development by using HTML5 today. Here are five sites that do just that. Just click on a pic to view the site. Be sure to take a look at the code each developer used to get an idea of the structure of a few real world examples of HTML5. Also, if you’ve developed a site in HTML5, we want to see it! Leave a URL in the comments so we can check it out.

Leave a Reply

You must be logged in to post a comment.

Pin It on Pinterest