Even though HTML5 is mostly for interactive applications, in this post, I am going to focus on the changes that it will bring to markup. Since I'm only going to cover a few of the new elements, I recommend checking out Tantek's video or HTML5 specs for a more thorough coverage.
When web designers who are part of the new specifications groups researched the web, they found out that certain words like footer, menu, content, title, header, main, nav, container, wrapper, sidebar, navigation kept popping up as class and id names throughout different sites.
It's easy to see what kind of structures the programmers are putting together by looking at these names. With HTML5, the spec folks gave us new elements that correspond to some of these very popular, frequently occurring structures such as a footer or header div or a navigation column. The 6 new HTML5 elements that I'm going to discuss with you are going to sound familiar because you have probably used very similar names for your div's already:
<header> <hgroup> <nav> <article> <aside> <footer>
In HTML5, you no longer have to use the generic div to section off different areas of your page. You can markup your header area with the new <header> element instead of the neutral <div> element. <hgroup> is for grouping headings when you have more than one together, <article> is typically used for the main content area, <nav> is marking up navigation, <aside> when you have a section that is somewhat related to your page and <footer> is for the miscellaneous information that sites have at the end of a page.
USING THE OLD DIV TECHNIQUE
I am going to markup a page with header, navigation, main content and footer areas using div's and other HTML elements that you are familiar with. When we are finished, we will convert it to HTML5 using the new elements that I mentioned above. I styled the markup with CSS using this style sheet. Don't forget to glance at the embedded style sheet which defines a few styles common to both techniques.
CSS3.0: border-radius, box-shadow and opacity
You will encounter three new CSS properties from version 3.0 in the style sheets. One is for rounding corners and the other tweaks the opacity of the background. We are also going to cast a shadow under sections. All come in handy as it used to take a lot of effort to achieve similar results. IE ignores these new properties but Firefox displays them correctly. I did not test but Webkit based browsers such as Safari, Google Chrome, and Android Mobile Devices should display correctly. Webkit is an open-source browser rendering engine for Safari, Chrome and a few less well known browsers.
CSS border-radius
-moz-border-radius: 4px 4px 4px 4px;rounds all corners by four pixels. The reason it's written with hypen followed by moz is to let the world know that this is an experimental implementation of the property for the Firefox browser. Always include the formally written version of the property to be prepared for the future when they become standard part of the browser. In our example, I am only going to round the top two corners of the different sections so last two parameters will be zero: border-radius: 4px 4px 0 0;
CSS box-shadow
box-shadow: 0 1px 3px rgba(0, 0, 0, .15);I included the new box-shadow property to cast shadows underneath each section. I specified a horizontal offset (negative offset goes left of the box, positive offset to the right), a vertical offset (negative offset goes to top of box, positive offset for below the box) and set color to black with a lowered opacity. The two length offsets are required. The rest of the parameters, inset, blur radius, spread radius and color are all optional.
CSS Background Opacity
background: rgba(0, 0, 0, 0.1);This rule sets the background color to black but lowers its opacity by 90% which makes it see through. IE does not care but Firefox again displays correctly. Here's some of the CSS3.0 styling that I have in our stylesheet:
/*top corners rounded*/
-moz-border-radius: 4px 4px 0 0;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
-goog-ms-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
/*add shadow to frame*/
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
Our markup:
<div id="header"> <h1>CSSBakery.com for Learning CSS</h1> <h2>CSS Reference and Tutorials</h2> </div> <div id="sidebar"> <h2>Menu</h2> <ul> <li><a href="#">Selectors</a></li> <li><a href="#">Fonts and Text</a></li> <li><a href="#">The Box Model</a></li> <li><a href="#">Classes and ID's</a></li> <li><a href="#">The Flow</a></li> <li><a href="#">Floats</a></li> <li><a href="#">The Cascade</a></li> <li><a href="#">Inheritance</a></li> <li><a href="#">Tables</a></li> </ul> </div> <div class="post"> <h2>What is CSS?</h1> <p>CSS stands for Cascading Style Sheets and is used to style HTML markup</p> </div> <div class="post"> <h2>Any Updates?</h2> <p>Latest version is CSS3.0</p> </div> <div class="navlinksdiv"> <div class="navlinks"> <h2>CSS Tools</h2> <ul> <li><a href="#">Mozilla Firebug</a></li> <li><a href="#">CSS Web Developer</a></li> <li><a href="#">W3 CSS Standards</a></li> </ul> </div> <div class="navlinks"> <h2>CSS News</h2> <ul> <li><a href="#">The Box Model Reinvented</a></li> <li><a href="#">C style Nested Comments are here!</a></li> </ul> </div> <div class="navlinks"> <h2>CSS News</h2> <ul> <li><a href="#">The Box Model Reinvented</a></li> <li><a href="#">C style Nested Comments are here!</a></li> </ul> </div> </div> <div id="footer"> <p><span class="email">cssbakery@yahoo.com</span> - Published on August 1st, 2010</p> <p><small>2010 Copyright by www.cssrule.com - All Rights Reserved</small></p> </div> </div>
Our output is this page. We will convert the markup to an HTML5 friendly format and in doing so will make it more semantic.
WITH HTML5
To make the comparisons easier, I added the names of the div's in the new HMTL5 elements. The new "header" used to be <div id="header">, the nav with the menu id used to be <div id="sidebar">, the navs inside aside used to be <div class="links">, article used to be <div class="post">, and footer was <div id="footer">. The results look good.
Notice how all the corners are nicely rounded with transparent background on some of the elements. The styles for the new HTML elements are in html5.css. So how did the markup change? Here's the full file:
<!doctype html>
<html lang=en>
<head>
<title>HTML5</title>
<meta charset=utf-8>
<!-- to enable HTML5 in IE -->
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('footer');
document.createElement('aside');
</script>
<link href="css/xhtml.css" rel="stylesheet" type="text/css" />
<link href="css/html5.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* quick reset, please include Eric Meyer's advanced reset instead.
search on css resets on CSS Bakery for the reset discussion */
* { margin: 0; padding: 0; }
body {
font-family: Verbana, Sans-Serif;
font-size: 11px;
}
#outerwrapper { width: 550px; }
</style>
</head>
<body>
<div id="outerwrapper">
<header>
<hgroup>
<h1>CSSBakery.com</h1>
<h2>CSS Reference and Tutorials for Learning CSS</h2>
</hgroup>
</header>
<nav id="menu">>
<h2>Menu</h2>
<ul>
<li><a href="#">Selectors</a></li>
<li><a href="#">Fonts and Text</a></li>
<li><a href="#">The Box Model</a></li>
<li><a href="#">Classes and ID's</a></li>
<li><a href="#">The Flow</a></li>
<li><a href="#">Floats</a></li>
<li><a href="#">The Cascade</a></li>
<li><a href="#">Inheritance</a></li>
<li><a href="#">Tables</a></li>
</ul>
</nav>
<article>
<h2>What is CSS?</h2>
<p>CSS stands for Cascading Style Sheets and is used to style HTML markup</p>
</article
<article>
<h2>Any updates?</h1>
<p>Latest version is CSS3.0</p>
</article>
<aside>
<nav>
<h2>Great Places to Learn CSS</h2>
<ul>
<li><a href="#">Eric Meyer</a></li>
<li><a href="#">CSS Zen Garden</a></li>
<li><a href="#">A List Apart</a></li>
</ul>
</nav>
<nav>
<h2>CSS Tools</h2>
<ul>
<li><a href="#">Mozilla Firebug</a></li>
<li><a href="#">CSS Web Developer</a></li>
<li><a href="#">W3 CSS Standards</a></li>
</ul>
</nav>
<nav>
<h2>CSS News</h2>
<ul>
<li><a href="#">The Box Model Reinvented</a></li>
<li><a href="#">C style Nested Comments are here!</a></li>
</ul>
</nav>
</aside>
<footer>
<p>
<address>cssbakery@yahoo.com</address>
Published on <time datetime=2010-08-01 pubdate>
August 1<sup>st, 2010</sup></time>
</p>
<p>
<small>
2010 Copyright by www.cssrule.com - All Rights Reserved
</small>
</p>
</footer>
</div>
</body>
</html> MARGINS BETWEEN FLOATED AND CLEARED ELEMENTS
I wanted to add extra space between the navigation menu (grey blue box on the left) and the site links (bright yellow box). aside element looked as good as any so I applied 10 pixel top margin with:
aside { margin-top: 10px; }
when I ran it, nothing happened. I firebugged it and found out that the top margin was not having the effect I intended. To show you what was happening, I increased the top margin for aside to 40 pixels. Firebug shows padding in darker blue and margins in yellow. See how our top margin extends over the floated menu. The browser knows it's there but ignores it completely:
This is because of the way the clear property works. The top margin of the cleared element, in our case, aside, no matter how large or small, is overridden. If I want to separate the two elements, one a float, the other a cleared element, I have to add a bottom margin to the float, which is what I eventually did. I also removed the top-margin rule from aside.
nav#menu { margin-bottom: 10px; }
An interesting piece of information about HTML5 is that it's not fussy about validation and even with missing tags such body,head, html tags it will validate. The browsers sub for these tags automatically. Even though these three specific tags are optional, I will continue using them because it only takes a few seconds to write them into the file. I suggest that you do the same for the time being.
One of the elements that may not be as obvious is the "aside" which is for content that is tangentially related to those around it. It's not recommended for page wide navigation use. I wrapped the "aside" element around links that are related to my page but have nothing to do with navigation of my site. Typically content within an <aside> section would have relevance to your page but its absence would not be deadly.
HTML5 is not standard yet so there are a few lines of code that you need to add to your markup for everyone to be happy. IE will behave as long as you have the following Javascript lines and for Firefox, you need to declare the new HTML5 elements as block.
<!doctype html>
<html lang=en>
<head>
<title>HTML5</title>
<meta charset=utf-8>
<!-- to enable HTML5 in IE -->
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('footer');
document.createElement('aside');
</script>
<style type="text/css">
/* To coerce the browser into recognition */
header, nav, footer, article, aside { display: block; }
Posts
Post a Comment
Note: Only a member of this blog may post a comment.