Page 1 of 1

Beginner HTML5: Semantics -Part 3 Rate Topic: ***** 2 Votes

#1 Vip3rousmango  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 56
  • View blog
  • Posts: 98
  • Joined: 10-February 10

Posted 19 April 2011 - 10:43 AM

Beginner HTML5:
Semantics: Part 3


Introduction:

Welcome to Part 3 of the HTML5 Semantic tutorial series. Hopefully you've enjoyed the other two and are looking for a final booster for your HTML5 skills. This tutorial will touch upon the Styling covered in tutorial -part 2 and expand upon it adding some extra clarification about headings with CSS, HTML5 validation, embedded element detection with Javascript and some kick-ass HTML5 resources. Total tutorial time: 20 mintues.

***NOTE: I'm going to assume that since you're reading part 3, you've read parts 1 & 2. Thanks! END NOTE***

Let's Get Started: HTML5 Styling Overview

In my previous tutorial I talked about how even some of the latest browsers don't support the HTML5 elements. Because of this we need to clarify them in your CSS style-sheet with:
section, article, header, footer, nav, aside, hgroup { display: block; }

This now lets the browser recognize our new elements but there is a catch. Even though they now recognize these elements browsers still won't support the new outline algorithm that HTML5 applies. Even still, we can use the semantic heading trick from Tutorial Part 2 to achieve h1 semantic awesomeness.

Headings

So in Part 2 I talked about how you can use h1 in each section of content. Semantically this is fine, but when it comes time to add your CSS things can get quite complicated:
h1 {
  font-size: 2.4em;
}

h2,
section h1, article h1, aside h1 {
  font-size: 1.6em;
}

h3,
section h2, article h2, aside h2,
section section h1, section article h1, section aside h1,
article section h1, article article h1, article aside h1,
aside section h1, aside article h1, aside aside h1 {
  font-size: 1.3em;
}


So there are the first 3 levels of a page! Crazy I know! And this is just the possible combinations I could think of, there are plenty more that I didn't get.

Thankfully though the new HTML5 outline algorithm is forgiving. If you want to use headings normally like with HTML4.01/XHTML markup then that won't affect HTML5's outline algorithm so you don't end up with that type of mess above.

If you're like me though, a freelancer where time is money then I have something for you! Geoffrey Sneddon has a nifty online app that will generate an HTML5 outline for you! One day maybe we'll all be HTML5 guru's like Geoffrey.

Adding Accessibility: ARIA

Having websites that allow access to all types of users, even ones with disabilities can be critical to some projects. Thankfully, HTML5 and it's forward thinking creators realized that assistive technologies should be included with the specification to allow for a truly accessible web.

So, before HTML5 I would of normally used a "skip navigation" link to allow screen reader users to skip past navigational elements. Now we can just utilize our nav element properly to achieve similar effects without having to provide an extra link to do so.

...Well, that's the idea. They still haven't been able to fully figure out implementation yet so we'll have to make due with what is available to us right now. No point using something if it's not going to work, right?!

Thankfully, their is fantastic support for ARIA: Accessible Rich Internet Applications. At ARIA's highest levels, it allows assistive technologies to fully communicate with all Ajax interactivity. Using ARIA in its basic format however, allows us to specify more semantic markup in our web pages easily. We can do this by using our new friend the role attribute.

If you wanted you can add:
role="search"
to a search bar,
role="baseinfo"
to a page's footer element, even
role="banner"
to your main header element. I could go over all of them, but that would be a tutorial in itself, you can check here for a full list.

Another awesome feature of ARIA is the added semantics of the role attribute for using as styling hooks. Always remember your friend, attribute selectors. They allow you to tell apart the headers and footers of a document from the headers and footers withing sectioning content.
header[role="banner"] { }
footer[role="baseinfo"] { }


So, this is how you would avoid our disaster above with the h1 styling by assigning role attributes to your elements. You can even use the role values in HTML4.01/XHTML markup if you want but careful as that markup will no longer validate. Which brings me to the next topic, Validation.

Markup Validation

No, I'm not talking about the validation you get from you mommy for doing a good job. This validation is to see if your recent coding masterpiece is up to specification standards. It can be horrible, painfully degrading, ego bruising or one of the most powerful tools a web designer/developer can use.

Personally, I've seen people use validators as an excuse to dismiss quality work or, in most cases, weed out sloppy craftsmanship. Use its power wisely. For our purposes, we would require an HTML5 validator since that is the markup specification we're using. The one I normally use and probably the most popular one available is the parser created by Henri Sivonen. Even W3C's HTML validator uses Henri's parser as soon as the HTML5 doctype is detected, it's just that good.

Feature Detection

I know HTML5 is just rocking your socks off right now and you probably want to start using some more advanced input types because you're not just a beginner anymore but before that can happen, you have to test for browser support just in case you need to provide some Javascript alternatives, because you're just a nice web developer like that.

Personally, I prefer to use Modernizr, a powerful Javascript library which can detect support for input types and elements like audio, video and canvas.

How it works is the Modernizr script creates a Javascript object called Modernizr, we can then query the properties of this object to determine if the browser supports a particular input type:
if (!Modernizr.inputtypes.colour) {
  // Javascript fallback goes here.
}


Modernizr also is capable of allowing you to style HTML5 elements as well in IE so if you want to include Modernizr, you don't need to use Remy's Javascript IE shiv trick I mention in Tutorial Part 2. No point loading two Javascript libraries when you can get the job done with one.

Closing Thoughts

This is the basics you need to know to have a quick handle on HTML5 and how to implement it into your websites. But it's up to you on how gung-ho you want to be with HTML5. At the very least, you can start to use the new doctype:
 <!DOCTYPE html> 

And take it from here! The sky's the limit to what you can do, so let's see some awesome, semantically correct, markup! Happy Coding!

HTML5 Resources



Is This A Good Question/Topic? 2
  • +

Replies To: Beginner HTML5: Semantics -Part 3

#2 kingstreetdesigner  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 16-April 11

Posted 03 May 2011 - 06:50 AM

Interesting tutorials! Will totally check out the resources. I would like to get a little better with HTML5 before I start putting it into my projects. Totally bookmarking this for reference!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1