An introduction to the features of html5
HTML5 promises to make a serious impact on the future of Web design and development. At the moment the level of browser support is still pretty low, but that doesn't mean you can't start using the new features of HTML5 in your projects. For those users whose browsers do support the new features, you can create sites that are more engaging and accessible than before. As long as you ensure your sites are still accessible to the users with a lower level of browser support, providing alternative content items if necessary, you can get stuck into HTML5 now.
HTML5 DOCTYPE
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:<!DOCTYPE html>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.
New Elements
Among the most noteworthy features of HTML5 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.
Structural Elements
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:<header>
<img src="headimg.jpg" alt="page header"/>
<p>Here is some header text</p>
</header>
<div id="content">
Here is the main content area
</div>
<footer>Here is the footer info</footer>Most pages contain at least on navigation section, which in HTML5 you can use the nav element for:
<nav>
<a href="contact.html">contact</a> -
<a href="about.html">about</a> -
<a href="help.html">help</a>
</nav>The section element defines any kind of section you choose to divide your page into, using section tags as follows:
<section>
<p>Here is some info</p>
<img src="apicture.png" alt="picture"/>
<p>Grouped together within a section</p>
</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:
<article>
<h2>Here is some news</h2>
<p>This is the content of the news</p>
<img src="newspic.jpg" alt="news picture"/>
<article>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:
<article>
Here is some info
<aside>Here is additional info</aside>
</article>As you can see, the structural HTML5 elements allow you to build a level of logic and meaning into your Web page markup.
Media Elements
HTML5 includes a range of media elements including those for presenting video, audio and the canvas element for JavaScript delivered graphics. The video tags can be included as follows:<video width="500" height="400">
<source src="film.ogg" type="video/ogg" />
Whoops, your browser doesn't support this
</video>The audio tags can be included as follows:
<audio>
<source src="music.mp3" type="audio/mp3" />
Whoops, your browser doesn't support this
</audio>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.
The canvas element is potentially one of the most exciting new features of HTML5, as it allows your pages to serve graphics through JavaScript directly to your users as they interact with the site. The following code demonstrates the canvas tags:
<canvas id="lovelyPic"></canvas>
<script type="text/javascript">
var theCanvas = document.getElementById("lovelyPic");
var theContext = theCanvas.getContext('2d');
theContext.strokeStyle = "#000033";
theContext.strokeRect(50, 100, 400, 250);
</script>This draws a simple rectangle outline.
Input Elements
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.Browser Support
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 features of HTML5 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.
Don't Miss A Single Updates
✓Remember to check your email account to confirm your subscription.
