The HTML5 DOCTYPE is incredibly simple, which is great news for developers. No more copying and pasting complex and unreadable DOCTYPE declarations, not to mention trying to decide which one to go for and then the inevitable hassle of getting your pages to validate. With HTML5 there is one very straightforward and memorable DOCTYPE declaration. Here it is:
Yes, it really is that easy! Just follow this with your HTML element plus head and body content and away you go. There is no other fundamental difference in terms of page structure with HTML5, so you can update existing markup without too much trouble.
Among the most noteworthy HTML5 features are the new elements. With HTML5, the approach to page structure is fundamentally different. HTML5 includes a range of new structural elements: header, footer, nav, aside, section and article - we'll go through these next. HTML5 also includes new media elements such as video and audio, which we'll also briefly introduce. There are actually lots of new elements in HTML5, we're just going through some of the more notable and accessible ones.
Before we get onto actual markup examples, it's worth understanding that HTML5 is designed for more semantic Web design and development than previous versions. In an abstract sense, this means that the markup elements themselves indicate something about the meaning of the element content, rather than being purely structural. Don't worry if you're baffled about the semantic Web development concepts, as they will become clear as we work through the structural elements below.
The new structural elements in HTML5 allow you to define the parts of your page as semantic items. The header element can be the header content for a page or a section of a page, while the footer element models content for the footer of a page or section. These are indicated by the HTML5 header and footer tags as follows:
Here is the main content area
Most pages contain at least on navigation section, which in HTML5 you can use the nav element for:
The section element defines any kind of section you choose to divide your page into, using section tags as follows:
Here is some info
Grouped together within a section
The article element is designed to be used for a chunk of content that can stand in its own right, i.e. one or more content items that would make sense when presented on its/their own. Examples of article content would be forum and blog posts, news articles etc. The article tags appear as follows:
Here is some news
This is the content of the news
The aside element provides supplementary content for another content item. The aside tags should include information or other content that is relevant to the content within the element it is contained within, i.e. extra info about the parent element content:
Here is some info
As you can see, the structural HTML5 elements allow you to build a level of logic and meaning into your Web page markup.
The audio tags can be included as follows:
As you can see both the audio and video elements include source elements indicating the names, locations and types of the media files to play.
This draws a simple rectangle outline.
HTML5 offers new options for capturing user input within Web forms. The new elements include datalist, keygen and output. Since these are a little advanced for this introductory article, we won't go through them in detail. If you want to find out how to use the new HTML5 form elements, see the links at the bottom of the article.
At the moment, browser support is the number one issue to consider when building HTML5 websites. The support level is not great at present, but ultimately HTML5 will make it easier to provide support for users with legacy browsers. The browser software programs are of course always evolving, so your HTML5 markup will become more and more usable all the time. There are lots of good resources around the Web listing which HTML5 features are supported by which browsers, so these are well worth checking out on a fairly regular basis if you're planning on using HTML5 now. The HTML5 Please site is one of the most reliable sources.
Although resources like HMTL5 browser support sites are useful, they are not exhaustive and cannot be relied on for guarantees about browser support. As always, it's essential that you test your own sites on as many browsers, device types and operating systems as you can. This is a hazy area at the moment and is likely to be for some time. On the plus side, by getting stuck into HTML5 early on, your future development projects will benefit from the more semantic and user-friendly approach you will have already adopted.
How To: HTML5 Local Storage
Why Web Developers Are Excited About HTML5 and CSS3
How to Get Started with Web Development