HTML5 structure overview

I don’t have time to do a tutorial now but I like to share my HTML5 notes. The notes below were written so that I could understand them.They are written in outline like format and hopefully it’s easy for anyone else to understand as well. Let me know if you have any questions.

 

HTML5 Browser Support
For specific HTML5 elements support by browser:
http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers
http://findmebyip.com/litmus/ (good matrix comparison)
http://html5accessibility.com/
http://html5test.com/ (You can test your browser)

 

Sectioning elements:
H1-H6 tags
Article
Aside
Section
Nav

Planning and organizing content
Do a written document outline of your website content first to think about the semantic elements on your page. You don’t have to get down to the gritty details, it’s just to see a macro perspective between the relationship of your content.

From this outline, it’s probably best to dive into the mockup and start wireframing rather than going into the code but if you are definitely dead set on a specific design/structural content you can probably go straight into the code.

Which sections should I use? (When to use what?)
A. Header tags
B. Article
C. Aside
D. Section
E. Nav

HTML5 from the 1st person POV

SECTION
I like to accept content that have hierarchy and come in as a group.

DIV:
Use me when you want me to group things with specific styles.

NAV:
I’m a self starter and like to introduce new sections.
Do you want me to highlight this important section?
Are you starting a major navigation?

Articles:
I only accept independent content that can make sense by itself.

Aside:
I like spontaneous content that may digress a little from the overall content.

Footer:
I like to provide information about the author, related links and other extraneous information like privacy protection and terms & conditions. Also please don’t discriminate me just for being at the bottom of the page I can be used anywhere as long as I fit the above guidelines of information.

 

With all the new section elements introduced in HTML5 the use cases of id’s and classes are going to significantly drop since it will significantly reduce the usage of unique div’s.

So when do you want to use Id’s and classes?

When to use id’s & classes:

-Identifying scripting, page navigations,
-controlling elements and styling (Javascript areas & specific css use Id attributes)

It’s also a good idea to add id’s when you want to distinguish similar elements within the code
For example:

<section id=”services”>
</section>

<section id=”testimonials”>
testimonial stuff

</section>

 

Other Elements

Small
<small> can be used for side comments and fine print for legal information (e.g disclaimer or copyright)

<small> © Copyright  </small>

Mark

<mark> Text within the mark element should be </mark>

The mark element highlights a specific text, it’s not only for visual purposes but to indicate some kind of reference(e.g showing something important or giving extra clarification within some context)

Time
This tag element should be used for illustrating time in a 24 hr day. It uses the Gregorian calendar.

Anchor
Now block level links are possible by wrapping the <a> tag around an entire section or div.

For example:

<a href=”http://www.sample.com

<section id=”product”>

Lorem Ver A is a really revolutionary product

</section>

<footer> Inventor: Creative Maester </footer>

</a>

This anchor wrapping trick can be applied for a.hover images and links.

The link relationships(rel) attribute

The rel attribute defines what type of link you are placing into the element.

<link rel=author, bookmark, icon, license, nofollow, etc>

You can see all the rel attributes from this site:
http://microformats.org/wiki/existing-rel-values