As HTML5 is vastly being taken up by web designers as the new standard to use there are a couple of excellent features that make tasks a lot more simpler.
If you've not already heard then you should take a browse at the W3C standards.
A number of new tags are being introduced such as:
- <article>
- <aside>
- <audio>
- <canvas>
- <command>
- <datalist>
- <details>
- <embed>
- <figcaption>
- <figure>
- <footer>
- <header>
- <hgroup>
- <keygen>
- <mark>
- <meter>
- <nav>
- <output>
- <progress>
- <rp>
- <rt>
- <section>
- <source>
- <summary>
- <time>
- <video>
- <wbr>
HTML5 Video Embed
HTML5 makes embedding videos within your html a lot simpler, instead of having to cover the old embed, object and params you can now just use the following:
HTML Code:
<video src="movie.avi" controls="controls">
Your old browser does not support the video tag
</video>
HTML5 Document layout
Document layout has been improved in HTML5 as you can now easily specify header and footer content. This mean less classes and tags need to be used in your design and css can now be implemented on the tag names such as:
Code:
header p{color:#FF0000;} I like this as it's a simple yet effective way of decreasing the required document code and makes things look tidier if the css is included as an external file.
HTML5 Sample Document
Here is a standard layout created in HTML5:
HTML Code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5 Example Document</title>
</head>
<body>
<header> <a href="#"><img src="" alt="Logo Here" name="Logo" width="50" height="50" id="Logo" /></a> </header>
<nav>
<ul>
<li><a href="#">Links</a></li>
</ul>
</nav>
<article>
<h1>Main Header</h1>
<section>
<h2>Section 1</h2>
<p>Section 1 Text</p>
</section>
<section>
<h2>Section 2</h2>
<p>Section 2 Text</p>
</section>
</article>
<footer>
<p>A paragraph within the Footer.</p>
</footer>
</body>
</html>
Bookmarks