HTML5 and You
Posted in: How-To
Apr 03
Tweet
t seems the day when HTML5 and CSS3 become the standard is coming closer and closer. This is especially true now with the iPad out in the wild and Apple’s push for HTML5 (they have an entire page dedicated to sites that are using HTML5’s video tag). Although HTML5 isn’t supposed to be official until 2022, this doesn’t mean you can’t start using it today. As the saying goes, “The early bird gets the worm.” This goes for web design as well and right now is the perfect time for you to begin incorporating HTML5 and CSS3 into your projects, so when the day comes you don’t have to play catch up.
In this post, I’m going to go over the basic HTML5 elements you can use in your designs today. A lot of what I’m going to go over I’ve actually implemented on this blog, so feel free to view the page source if your curious about anything. Lastly, I have to give a lot of credit to W3.org for the information I’m going to go over.
Getting Started
The first thing you need to do is include HTML5 Shiv. This will make sure that all of the browsers recognize the new HTML5 elements (yes, even IE). Just simply insert the code below in your <head> element:
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
New Elements To Know
There are 6 main elements that you should be aware of when using HTML5. They are; <header>, <nav>, <section>, <article>, <aside>, and <footer>.
<header>
The <header> element can now replace the normal <div id=”header”> part of your site. You can also use it for other parts of your page as well (for example, around your sections’ headings).
A header element is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.
<nav>
“The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links” (W3.org.) Only major navigational links should be wrapped in the <nav> element. You can include the <nav> element inside of your <header> element, but when placing links inside of your footer, you can omit the <nav> element all together.
User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip and/or provide on request.
<section>
The <section> element represents any grouping of content (often with a heading). The <section> element is not your basic container and it is recommended to use a <div> element if you need to add styling. Think of the <section> element as a chapter in a book. “A Web site’s home page could be split into sections for an introduction, news items, and contact information” (W3.org.)
As you can see in the example to the right, you can now use multiple H1 elements without worrying about which one is at the top level.
Example usage of the <section> element;
<article>
<section>
<h1>Introduction</h1>
<p>Welcome to our website</p>
</section>
<section>
<h1>About Us</h1>
<p>We're just a small blog.</p>
</section>
<section>
<h1>Contact Us</h1>
<p>Email us at mail@example.com</p>
</section>
</article>
<article>
The <article> element represents an independent piece of content in your page (for example, a blog post, newspaper article, a user’s comment, etc). <article> elements can be nested within each other, with the inner <article> element representing a piece of content related to the outer <article> element. For example, a user’s comment on a blog post would be an <article> element within the blog post’s <article> element. (See Example)
Example usage of the <section> element;
<article>
<header>
<h1>My Blog Post</h1>
</header>
<p>This is the content of my post</p>
<section class="comments">
<h1>Comments</h1>
<article>
<p>John says: Great post</p>
</article>
</section>
</article>
<aside>
The <aside> element refers to any content that is slightly related, or not related at all to the main content of your page. For example, an aside could be a pull quote, sidebar, advertisement, etc.
<footer>
The <footer> element is typically used to hold information regarding its section, such as the author, related links, copyright info, etc. Multiple instances (like the <header> element) can be used. The <footer> element doesn’t have to be exclusive to the site footer, and can be used within blog posts as the container for the post metadata.
When the nearest ancestor sectioning content or sectioning root element is the body element, then [the <footer> element] applies to the whole page.
Summary
These are just some of the basic elements introduced by HTML5 and for a comprehensive look at everything HTML5 has to offer, head over to W3.org. I’ve used this blog as my testing ground for HTML5 and CSS3, and plan to continue learning things as I go on. If you’d like to share your experiences or thoughts on HTML5, feel free to leave a comment, I’d love to hear what you think.
Related Posts
-
Nike Air Force 1 Duck Boot
February 6th, 2011
-
Ray Eames Quote
January 18th, 2011
-
Tracking Down Bugs & Providing Support
August 30th, 2010
From the notebook
Terms of Support for 2012
Posted in: General News
December 27, 2011
Shaken Grid Premium 2.0
Posted in: General News
September 12, 2011
Recent Tweets
About us
Shaken and Stirred Web is dedicated to creating kick-ass WordPress themes and is operated by Sawyer Hollenshead, a NY based web designer. We believe in quality over quantity and are constantly striving to create unique products that are beautifully designed and functional, without being bloated. All of this while also adding value to our existing products and user base.
© 2012 Shaken and Stirred Web - Made with ♥
Be The First To Comment