Page 1 of 1

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

#1 Vip3rousmango  Icon User is offline

  • D.I.C Head
  • member icon

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

Posted 11 April 2011 - 09:23 PM

Beginner HTML5:
Semantics: Part 2


Introduction

Welcome to part 2 of the Beginner HTML5 tutorial! In this tutorial we'll be reviewing some of the new elements from Part 1 and using them to make semantically correct markup. This will flow nicely into the main topic which are Content Models. They are the HTML's specification lingo telling us what type of content is supposed to go inside the tags, officially.

***NOTE: This tutorial assumes you have a basic understanding of HTML/XHTML and that you have read the first part of this tutorial series as some concepts covered in Part 1 won't be reviewed again here. END NOTE***

HTML5: Content Models & Part 1 Review

Past HTML specifications defined two distint content types: block or inline. I think after several years of only two, a change needed to happen. Thankfully, HTML5 uses a more logical approach by dividing elements into a broader range of categories. More really is better in our case. Inline elements now have a content model of "text-level semantics" while block level elements are now "grouping content"; paragraphs, list items, divs, and so forth are coupled with block level elements as well. Web forms have their own separate content model, of which I won't go into detail about here. Images, audio, video and the canvas element on the other hand, are all "embedded content."

The structural elements of HTML5 introduce a new revolution in content models called "sectioning content." This is about as exciting as free beer. Yes, it's just. that. awesome. This two word term is one of the most important facets of HTML5. That would be sectioning content, not free beer.

Sectioning Content

We are going to create an outline of an HTML document using the heading elements, h1 to h6. I know its not totally conventional, but it serves our purpose and will highlight some important aspects of HTML5 which will help horrible markup everywhere I hope. Here's our first example:
<h1>Our Upcoming Venue</h1>
<h2>Cities</h2>
<p>Join us in these cities for 2011!</p>
<h3>Toronto</h3>
<p>Home of the tower and dome.</p>
<h3>Vancouver</h3>
<p>That's V.City to its friends.</p>
<h3>Ottawa</h3>
<p>It's so <em>nice</em>.</p>
<small>Accommodation not provided.</small>


That gives us this outline:
>Our Upcoming Venue
>>>>Cities
>>>>>>>Toronto
>>>>>>>Vancouver
>>>>>>>Ottawa
(don't mind the > characters, I didn't know how to make multiple lists within lists in a post to achieve the structural outline presented above so ASCII art time it is)

Hopefully this show's my point. Any content that follows a heading element is presumed to be associated with that heading (hence, the inset for the rest of the list elements). Now pay attention to the final small element in the markup. That should be associated with the entire document but a browser has no way of knowing that. There's no way that the browser knows the small element shouldn't fall under the heading "Ottawa."

Using our sectioning content in HTML5 allows you to dictate the start and end of related content and solve the issue:
<h1>Our Upcoming Venue</h1>
<section>
   <header>
      <h2>Cities</h2>
   </header>
   <p>Join us in these cities in 2011!</p>
   <h3>Toronto</h3>
   <p>Home of the tower and dome.</p>
   <h3>Vancouver</h3>
   <p>That's V.City to its friends.</p>
   <h3>Ottawa</h3>
   <p>It's so <em>nice</em>.</p>
</section>
<small>Accommodation not provided.</small>


Now you can tell the small element falls under the heading "Our Upcoming Venue" rather than "Ottawa."

But I can markup this content even further with more divisions, placing each city in its own section:
<h1>Our Upcoming Venue</h1>
<section>
   <header>
     <h2>Cities</h2>
   </header>
   <p>Join us in these cities in 2011!</p>
   <section>
     <header>
       <h3>Toronto</h3>
     </header>
     <p>Home of the tower and dome.</p>
   </section>
   <section>
     <header>
       <h3>Vancouver</h3>
     </header>
     <p>That's V.City to its friends.</p>
   </section>
   <section>
     <header>
       <h3>Ottawa</h3>
     </header>
     <p>It's so <em>nice</em>.</p>
   </section>
</section>
<small>Accommodation not provided.</small>


That still gives us the same outline as above:
>Our Upcoming Venue
>>>>Cities
>>>>>>>Toronto
>>>>>>>Vancouver
>>>>>>>Ottawa

I know that it feels like more markup then required, but ideally this lets the browser know how to handle all of the content properly. Plus the SEO benefits of having defined content is quite important so I know its more than just some div, but really it's worth it and now you'll learn why.

The Outline Algorithm

So far, the new sectioning content isn't giving me any more of that awesome fuzzy tingling feeling inside like previous versions of HTML except here's the inception: In HTML5, each piece of sectioning content has its own self-contained outline. That means you don't have to keep track of what heading level you should be using-you can just start from h1 each time.I think the tingling feeling is coming back:
<h1>Our Upcoming Venue</h1>
<section>
   <header>
     <h1>Cities</h1>
   </header>
   <p>Join us in these cities in 2011!</p>
   <section>
     <header>
       <h1>Toronto</h1>
     </header>
     <p>Home of the tower and dome.</p>
   </section>
   <section>
     <header>
       <h1>Vancouver</h1>
     </header>
     <p>That's V.City to its friends.</p>
   </section>
   <section>
     <header>
       <h1>Ottawa</h1>
     </header>
     <p>It's so <em>nice</em>.</p>
   </section>
</section>
<small>Accommodation not provided.</small>


So whats the big deal? Previous versions of HTML would have produced an inaccurate outline, something to the effects of:
Our Upcoming Venue
Cities
Toronto
Vancouver
Ottawa

But in HTML5, the outline is accurate:
>Our Upcoming Venue
>>>>Cities
>>>>>>>Toronto
>>>>>>>Vancouver
>>>>>>>Ottawa

So, this now gives you unlimited depth to your headings as long as you section appropriately you'll never run out.

hgroup

Because you might want to use a heading element but you don't want its contents to appear in the document outline the hgroup element allows you to do just that:
<hgroup>
   <h1>Our Upcoming Venue</h1>
   <h2>For people who make websites</h2>
</hgroup>


In this case, the h2 heading "For people who make websites" is really a slogan/tagline. In an hgroup element, only the first heading counts towards the document outline. Also, the first heading doesn't necessarily have to be an h1, so spice it up:
<hgroup>
   <h3>HTML5 is cool</h3>
   <h4>Web designs using HTML5 rock!</h4>
</hgroup>


Sectioning roots

Some HTML5 elements you might notice don't follow these algorithm guidelines. The blockquote, fieldset, and td elements are all immune to the outline algorithm. In other words, it doesn't matter how many heading you use within these elements, they won't appear in the document's outline. These elements are called "sectioning roots"-not to be confused with sectioning content.

Portability

Because each piece of sectioning content generates its own outline you can start to think about your content in a truly modular way! I have a post entitled "Cheese sandwich" because they are awesome. Before HTML5, I would need to know the context of the post in order to choose which heading level to use for the post title. If the post is on the front page, then it would appear after an h1 element containing the title of my blog:
<h1>My Kickass Blog</h1>
<h2><a href="cheese.html">Cheese Sandwich</a></h2>
<p>My cat ate my cheese sandwich!</p>


But if I'm publishing the post on its own page, then I want the title of the blog post to be a level 1 heading because I can:
<h1>Cheese Sandwich</h1>
<p>My cat ate my cheese sandwich! Oh noes!</p>


This is a good opportunity to use sectioning content-an article element in this case-properly to allow us to achieve our multiple h1 heading:
<article>
<h1>Cheese Sandwich</h1>
<p>My cat ate my cheese sandwich! Oh noes!</p>
</article>


Now we have modular content which can be ported anywhere. It doesn't matter whether it's appearing on its own page or on the home page:
<h1>My Kickass Blog</h1>
<article>
<h1><a href="cheese.html">Cheese Sandwich</a></h1>
<p>My cat ate my cheese sandwich! Oh Noes!</p>
</article>


HTML5's new outline algorithm produces the correct result and displays both, but with the article inset under Kickass Blog, not aligned with it.

Scoped Styles

This is a bit extra, but I thought it's important to add in. The more usage it could recieve the possibility of it being adopted is their. Since each piece of sectioning content has its own outline, it makes for the perfect match to Ajax (something way to large to cover here, obviously). This gives HTML5 a chance to shine as a specification for web applications. Trying to port a piece of content from one document into another introduces some problems. The CSS rules being applied to the parent document will also apply to the inserted content.

HTML5 offers the scoped attribute, which can be applied to a style element and any styles declared within will only be applied to the containing sectioning content. I know that is pretty cool and very handy.
<h1>My Kickass Blog</h1>
<article>
   <style scoped>
     h1 {font-size: 75%; }
   </style>
<h1><a href="cheese.html">Cheese Sandwich</a></h1>
<p>My cat ate my cheese sandwich!</p>
</article>


In that example, only the second h1 element will have a font-size value of 75%. But, now here is the bad news about scoped. No browsers support the attribute yet. Boo!

Styling HTML5

So all of this new HTML5 is fantastic but before you can start using a new addition to HTML5, you need to consider the browser support for that feature. If you want to start using HTML5's new structural elements today, there's nothing stopping you. Browsers currently will allow you to style the new elements, it's just that most browsers allow you to use and style any element you care to invent, not the specifically defined ones in HTML5. So we need to do a couple of tricks to get HTML5 elements styled properly depending on which browser you want to focus on, or if you want cross-browswer compatability.

Browsers won't apply any default styling to any new HTML5 elements. This is what happends when you want to use emerging advances in web design and development! So, at the very least, you will want to declare new structural elements should force a line break with CSS:
section, article, header, footer, nav, aside, hgroup { display: block; }


That should be enough for most browsers and I usually include it with my reset stylesheets but for one browser this isn't enough, can you guess who has special needs?

If you guessed Internet Explorer, you're correct! It absolutely refuses to recognize any new elements unless each element is first created with Javascript, like this:
document.createElement('section');


I know, what a pain! Thankfully though, Javascript genius Remy Sharp wrote a handy little script that generates all of the new HTML5 elements for you. All you do is load the script within a conditional comment so that it's only served up to our "special" Internet Explorer if someone lands on your site and is using it:
<!--[if IE]>
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


Now you can style the new elements to your heart's content and use HTML5 in your web designs today!

I hope you've enjoyed this two part tutorial on the introduction to using HTML5. This is only scratching the surface of the power of HTML5 so learn learn learn and happy coding!

Is This A Good Question/Topic? 4
  • +

Page 1 of 1