HTML5 fundamentals - The Power of HTML 5 has been harnessed by ICND.
HTML5: Writing Semantic Markup!
Long gone are the days of Photoshop generated TABLE layouts, colspan, rowspan, vertical align, td, td, td, td, td, ect., or at least they should be. There are those who still choose to create website markup in this manner and it drives me nuts! It's 2011, not 1995, let's use HTML5, it's supported on modern browsers like Firefox, Chrome, Safari and Opera, and there's even a shim provided by GOOGLE that allows Internet Explorer (all versions) to utilize the core of HTML5 tags. What do I need to start with?
It's simple, first start your HTML file with the google doctype: <!doctype html> (this will enable HTML5) and you're ready to go. Let's look at a base example I like to start out with:<!doctype html>
<html>
<head>
<meta charset"utf-8">
<title>HTML5 Site</title>
<link href="css/screen.css" rel="stylesheet">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>
<html>
<head>
<meta charset"utf-8">
<title>HTML5 Site</title>
<link href="css/screen.css" rel="stylesheet">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>
The conditional comment is to provide HTML5 support for any version Internet Explorer.
HTML5 Tags: Meat and Potatoes
Figuring out what tags to use for every section is your job as a FrontEnd developer, here are the ones I find that I use the most:<header>
<footer>
<nav>
<aside>
<article>
<section>
<address>
<figure>
<figcaption>
<time>
Below is an example of these tags used between the <body>:
<header>
<nav>
<ul>
<li><a href="">Home</a></li>
</ul>
</nav>
</header>
<aside>
<address>
1000 Google Dr<br>
San Francisco, CA 22554
</address>
</aside>
<section>
<article>
<h1>Title of Post</h1>
<time>Nov, 25th 2011 - 09:30am</time>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<figure>
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<figcaption>
Best Video Ever!
</figcaption>
</figure>
</article>
</section>
<footer>
© 2011 HTML5 Site
</footer>
<nav>
<ul>
<li><a href="">Home</a></li>
</ul>
</nav>
</header>
<aside>
<address>
1000 Google Dr<br>
San Francisco, CA 22554
</address>
</aside>
<section>
<article>
<h1>Title of Post</h1>
<time>Nov, 25th 2011 - 09:30am</time>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<figure>
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<figcaption>
Best Video Ever!
</figcaption>
</figure>
</article>
</section>
<footer>
© 2011 HTML5 Site
</footer>
Putting it all Together
<!doctype html>
<html>
<head>
<meta charset"utf-8">
<title>HTML5 Site</title>
<link href="css/screen.css" rel="stylesheet">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<header>
<a href="" class="logo">HTML5 Site</a>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</header>
<aside>
<h2>Find us!</h2>
<address>
1000 Google Dr<br>
San Francisco, CA 22554
</address>
<h2>Call us!</h2>
<tel>1-800-555-5555</tel>
</aside>
<section>
<article>
<h1>Title of Post</h1>
<time>Nov, 25th 2011 - 09:30am</time>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<figure>
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<figcaption>
Best Video Ever!
</figcaption>
</figure>
</article>
<article>
<h1>Title of Second Post</h1>
<time>Nov, 24th 2011 - 11:00am</time>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</section>
<footer>
© 2011 HTML5 Site
</footer>
</div>
</body>
</html>
<html>
<head>
<meta charset"utf-8">
<title>HTML5 Site</title>
<link href="css/screen.css" rel="stylesheet">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<header>
<a href="" class="logo">HTML5 Site</a>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</header>
<aside>
<h2>Find us!</h2>
<address>
1000 Google Dr<br>
San Francisco, CA 22554
</address>
<h2>Call us!</h2>
<tel>1-800-555-5555</tel>
</aside>
<section>
<article>
<h1>Title of Post</h1>
<time>Nov, 25th 2011 - 09:30am</time>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<figure>
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<figcaption>
Best Video Ever!
</figcaption>
</figure>
</article>
<article>
<h1>Title of Second Post</h1>
<time>Nov, 24th 2011 - 11:00am</time>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</section>
<footer>
© 2011 HTML5 Site
</footer>
</div>
</body>
</html>
There are no comments for this entry.
[Add Comment]