HTML coding in general:
1) Divide semantic or meaningful parts of your website in containers. Everything must have a container as a logical section.
2) Use your containers (divs, or see HTML5 below for other tags) to apply padding, and margin separation between sections. Also, use them for borders and drop shadow effects.
HTML5 specific:
1)The hgroup surrounds header elements (say, the h1 and any other h2 or h3s underneath it) and when a outline algorithm hits the page, it just shows the h1 element of it. Each hgroup can contain an h1, so in theory, if you are using hgroups, it should be “ok” to have several h1’s in your page. Note: this element has been removed from the HTML5! Browsers will probably regard it as an unknown element, but most likely it won’t validate.
2) Notice how the bottom navigation links are not marked with the <nav> tag, this is explicitly recommended in the HTML draft document, leaving <nav> for more important parts of the document, and making <footer> sufficient enough to tell these are just generic links.
3) <main> is the newest addition to the html5 family. It basically encompass your main content, so you avoid doing stuff like <div class=”main”> or <div id=”main”>. Not a lot of browser support as of 2/16/2013, but you can just add a temp CSS patch to make sure it works as expected:
main{
display: block;
}
4) <section> is a related group of content in a document, the <div> tag was used before to enclose this, but section is more generic, and it can contain sections within sections. If you just want to style a group of HTML elements, don’t use a section (which is more like a sub-part of an article), but throw a div in the mix instead.
5) <article> is a piece of the document that can be used as a standalone piece of content, reusable if taken independently from the page content. If you can put that piece as a blob in an RSS feed, it is a good candidate for an article, if in doubt, make it a section. Articles usually contain several sections, not the other way around.
6) <aside> is for a piece of content that relates to the page content (or to the page article) tangentially.
7) Published <time datetime="2010-06-15T11:00" pubdate>June 15 2010</time> is used to mark up dates and times. The datetime part is machine readable, the pubdate, if there, signifies this article's (or whatever is this contained in) publication date.
8)<figure> is used to encapsulate images and captions. It usually contains a <figcaption> tag, which describes what the <figure> image is about
9) <mark> used to highlight content
10) The attribute “role” is used to mark what kind of content the specific DOM element has. For example:
<nav role=”navigation”>
<ul> <li><a href=”#”>Why?</a></li>
<li><a href=”#”>Synopsis</a></li>
</ul>
</nav>
This will be used to indicate that the
Here are other roles and their description:
– application: This role is used to specify a region used for a web application.
– banner: This role is used to specify a sitewide (rather than document specific) area. The header and logo of a site, for example.
– complementary: This role is used to specify an area complementary to the main section of a page.
– contentinfo: This role should be used for information about the main content. For example, to display copyright information at the footer of a page.
– form: You guessed it, a form! However, note that if the form in question is a search form, use the search role, instead.
– main: This role is used to specify the main content of the page.
– navigation: This role is used to specify navigation links for the current document or related documents.search: This role is used to define an area that performs a search.
EXAMPLE OF A PAGE WRITTEN IN HTML%:
<!doctype html>
<head> <meta charset=”utf-8″> <!– Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess –> <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″> <title></title> <meta name=”description” content=””> <meta name=”author” content=””>
</head>
<body>
<header>
<hgroup><h1>Web Directions USA</h1>
<h2>The Web Industry Conference</h2></hgroup>
<p>September 21-25</p>
<p>Midtown Atlanta</p>
<p>Register before August 15 and save $100!</p>
<nav> <ul> <li>Skip to the content</li> <li>Home</li> <li>Program</li> <li>Workshops</li> <li>Sponsor</li> <li>Expo</li> <li>Venue</li> <li>Pricing</li> <li>Contact</li> <li>Register now!</li> </ul> </nav> <nav> <ul> <li>Design Track</li> <li>Development Track</li> <li>Keynotes</li> <li>Networking</li> <li>Speakers</li> </ul> </nav></header>
<section><h2>Design Track</h2>
<p>Dan Rubin gets creative with CSS3 and HTML5; Juliette Melton runs effective remote research; Aaron Walter gets all emotional about design; Esther Derby introduces agile to UI; Ryan Freitas balances data-driven and genius design; Zoe Mickley Gillenwater streamlines sites with CSS3 and Jason Cranford Teague celebrates the year of web typography.</p><p>Agile Meets UI</p></section>
<article><hgroup><header><h2>HOW TO INCORPORATE UI & UX INTO AN AGILE PROCESS</h2></header><figure> <img src=”/speaker_s_sullivan.png” alt=”Headshot of Stephanie (Sullivan) Rewis”> <figcaption>Presenter: Stephanie (Sullivan) Rewis </figcaption></figure></hgroup>Agile teams work in short iterations and deliver working software that means coded, tested, documented, and if the customer decides the time is right, ready to go out the door. Teams work on features in tiny slices based on prioritized user stories, avoiding big up front design. But without a design phase, where does UX and UI fit?Esther will share strategies for evolving UI design as the software grows, keeping UI designers in the loop and helping everyone on the team be a better designer (cause they think already are).Learning to Love Humans: Emotional Interface Design</article><article><hgroup><header><h2>BOW DOWN TO THE MACHINE NO LONGER!</h2></header><figure> <img src=”/speaker_s_sullivan.png” alt=”Headshot of Stephanie (Sullivan) Rewis”> <figcaption>Presenter: Aarron Walter</figcaption></figure></hgroup>Humans, though cute and cuddly, are not without their flaws, which makes designing for them a challenge. By understanding how the wet, mushy processor works in these hairy little devils, you can design interfaces and web experiences that will have them hopelessly devoted to your brand.In this talk, Aarron Walter will introduce you to the emotional usability principle a design axiom that identifies a strong connection between human emotion and perceived usability. Through real-world examples, you’ll learn practical interface design techniques that will make your websites and applications more engaging to the humans they serve.Creativity, Design and Interaction with HTML5 and CSS3</article>
<section>SEARCH</section>
<section>LOEWS ATLANTA HOTELSpecial offer: stay at the conference venue for just $179 per night that’s $100 off!</section>
<section>STAY IN TOUCH Twitter: @webdirections See what all the speakers have to say on Twitter Track the latest Web Directions news (RSS)</section> <section>DOWNLOAD OUR ONE-PAGERNeed to convince the person who writes the checks? Grab our ready to print one-pager.</section>
<section>FROM OUR ATTENDEES One of the best organised and most informative conferences in the digital arena I’ve been to.PAUL MCCARTHY, NSW DEPT OF COMMERCE</section>
<section> BROUGHT TO YOU BY
OUR EXHIBITORS OUR SPONSORS CHAMPIONS OUR COMMUNITY PARTNERS<section> <footer> <h3>ABOUT WEB DIRECTIONS</h3> Founded in Australia in 2004, by long time web industry figures Maxine Sherrin and John Allsopp, Web Directions conferences bring together the web industry’s leading experts from around the world to educate and Read more <h3>SIGNUP TO THE NEWSLETTER</h3> Drop in your email address and stay up to date with the latest. Name: Email: <h3>SUBSCRIBE</h3> <p>Web Directions Pty Ltd. ABN: 20 118 802 118. All rights reserved.</p> News Feed (RSS) | Podcast | Terms and Conditions | Privacy Policy</footer>
</body>
</html>
If you have doubts about what tag to choose, see the image below (original coming from http://html5doctor.com/downloads/h5d-sectioning-flowchart.png )
And, a list that gets updated with the tags that are supported by HTML5:
http://www.w3schools.com/tags/default.asp