How To Develop Using HTML5: Demo Part 2 | Van SEO Design

---

How To Develop Using HTML5: Demo Part 2 Posted: 28 Jul 2011 05:30 AM PDT The new semantic elements in html5 are fairly easy to understand, but to really become comfortable using them you need to actually use them in documents. To get myself started I created a demo page representing a typical blog post and developed it using html5. Last time we started looking at that demo page and I was explaining some of my choices. As a quick reminder here’s the high level structure of the page. <div id="wrapper"> <header id="masthead" role="banner"></header> <div id="content"></div> <aside class="primary"></aside> <div id="footer"></div> <footer class="contentinfo" role="contentinfo"></footer> </div> We already talked about why I chose this structure and then dug into the header and aside elements. Let’s pick right up and move on to the main content div. Content Div There’s quite a bit going on inside this div so let’s first look at the general structure. <div id="content"> <article class="post"> <header class="post-9 hentry"></header> <section></section> <footer class="meta"></footer> <section id="comments"></section> </article> </div> As an article should be self-contained content it probably seems intuitive that it would include a header, footer, and sections of content. The inclusion of the comments might seem a little odd and it was another place I went with my gut. You could make the argument that comments on the post should be a separate article instead of being included in the main article. When you currently subscribe to a blog you’re delivered posts, though typically not the comments. You could also subscribe to the comments, but then those are usually considered a different subscription and are delivered without the post. The above is suggesting the use of 2 separate articles in html5 and perhaps that would have been the better choice. Ask me again in a few weeks and I might recommend taking the comments out of the post article and placing them instead in another article (instead of a section) below the post article. Header As you’d expect the header begins with an h1 tag. I want to call your attention to a couple of other things. <header class="post-9 hentry"> <h1></h1> <small class="meta"> <time datetime="2011-07-07" pubdate>Wednesday, July 7, 2011</time> <address class="vcard">by <a class="url n fn" rel="author" href="" title="View Steven Bradley's profile">Steven Bradley</a></address> </small> <p class="intro"></p> <p></p> </header> First is that I’ve used the time and address tags. The the former because I was adding a date and the latter to mark up my name as an hCard. The other thing to note is that this header closes with a couple of paragraphs of introductory text. It could have been included in a new section following the header, but sections typically (though not always) will include a header or at least a new heading. Since these paragraphs are falling under the main h1 and are meant to be introductory text, it made more sense to me to include them here. Section Most of the post content follows the same pattern. Each time a new heading is encountered I set up a new section, with that heading and some paragraphs of text. The paragraphs could also be lists and blockquotes, etc. <section> <h2></h2> <p></p> <section> <h3></h3> <p></p> </section> <section> <h3></h3> <p></p> </section> <p></p> </section> When the new heading is lower in the hierarchy its section is nested. h3 sections are nested inside h2 sections. Had I used an h4 it would have been nested inside the h3 that came before. Headings that are siblings get their own section relative to the parent heading. Footer Footers are meant to include content describing the main content. Think meta information. Here I included a paragraph showing how the post was archived and then included a short author bio. <footer class="meta"> <p>This post is archived…</p> <section> <h1>About Steven Bradley</h1> <p></p> </section> </footer> Since author name and description are related I enclosed both inside a new sections. As I could envision moving the author bio to other types of pages I used an h1. I wouldn’t rely on the outline algorithm currently, but here I was pretending it had better browser support in order to play around with it in the demo. Comments Since each comment is coded the same I’ll just include one in full in the code below. Each new article at the end would be a new comment. Above all the comments is a heading for the section. Everything is enclosed in a section since comments on a post are clearly related. I debated whether or not the entirety of comments should be a single article instead of a section. I think you can make a good argument for that, especially as a full comment stream is often syndicated via rss. <section id="comments"> <h1> 3 Comments</h1> <article class="comment"> <div class="comment-meta" id="comment-1"> <a href="" rel="external nofollow">Homer Simpson</a> <img src="" alt="" class="avatar" /> <time datetime="" pubdate></time> </div> <div class="comment-body"> <p></p> </div> </article> <article class="comment"></article> <article class="comment"></article> <article class="comment"></article> </section> I decided to call it a section, though. Part of that choice comes from looking at how others treated comments and part because it felt more like the individual comment was the self-contained unit as opposed to all the comments. Explaining it now I’m thinking it would have made more sense to consider the entire comment stream as an article with each comment being a nested article within. What’s inside each comment isn’t anything special at this point. I wrapped the comment meta and the comment body in divs. These probably should have been sections instead of divs as the content is related. Footer Div This is the footer div that includes the links and the ad. All of this information is tangential, much like the sidebar and so each is an aside. Remember that we’re choosing these new semantic elements based on the content they enclose, not the location of the content within the document. I probably should have chosen a different name for the id to avoid confusion with the html5 footer. A better choice might have been id=”subfooter” <div id="footer"> <aside class="sub-footer"> <h1></h1> <p></p> <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </aside> <aside class="sub-footer"> <h1></h1> <p></p> <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </aside> <aside class="advertising"> <h1></h1> <a href=""><img src="" alt="" /></a> </aside> </div> Since the three different sets of content aren’t related I chose to wrap all three in a div instead of a section. The aside is enough to show that the content inside each is related to itself. Once again I chose not to use a header element inside and just went with the h1. Whether or not headers are needed is something I still need to work out. Footer Finally we get the document footer. Since the content here is information about the entire page it’s enclosed in the main footer for the entire page. <footer role="contentinfo" class="contentinfo"> <p></p> </footer> After walking through all of the above code I’ll assume no additional explanation is needed here. Above: The demo as viewed in Internet Explorer 7 on Windows XP Additional Thoughts This demo is really one of my first attempts at coding a page in html5. I learned quite a bit, made some observations, and raised a few questions for myself. Overall it wasn’t too difficult to get used to html5. The elements themselves are easy to use and for the most part it isn’t too difficult to know when to use them. Of all of the new elements nav, aside, and footer created the least confusion for me. It will take some time getting used to the new tags, especially when it comes to developing new best practices, but it was like that when moving from tables to divs and I suspect the transition will be easier this time around. The header element while simple to use raised questions about how often to use it. Should each new group of sectioning content start with a header? Only when an hx element is present? Can it safely be left out? What advantages does it hold without more support for the outline algorithm? The most confusing part was deciding when to use div, section, and article. The definitions of each seems clear enough, but in practice it can be hard to decide which is best to use at times. It’s not hard to see that I could redevelop this same demo and end up with a new structure of div, section, and article. I suspect this is what you’ll find the most challenging and I’m providing some links to help you sort it out below. However this really isn’t all that different from what goes on now. If you and I develop the same design we’ll likely structure things differently even when only using divs as our main block level element. There really isn’t a right or wrong way to use the 3 tags and accepting that will probably help clear away the confusion more than anything. What we’ll likely see in the coming months and years is a series of best practices for using all of the new elements and we’ll each pick and choose which best practices work best for us. After having worked through the demo I’m much more convinced that we can use these new semantic elements in real projects now. Above: The demo as viewed in Internet Explorer 6 on Windows XP Browsers Throughout this 2 part post I’ve included some screenshots of the demo in Internet Explorer. For the most part they look pretty good. IE6 was the only time the demo looked off as you can see in the screenshot above and the one below. However as poor as the demo looks in those images it’s really only a few minor tweaks to fix. Also as I’ve said a few times here I’ve dropped support for IE6 so I’m not really concerned with making those tweaks unless a client specifically requests it. Unfortunately my Windows testing machine has been on the fritz lately and I wasn’t able to get good screenshots of how the demo looks in IE when Javascript is disabled. I managed to grab screenshots where I had removed the link to the html5shiv. The IE6 screenshot is the last image in this post. I suspect that’s not how it really looks though. Perhaps the divs I used were enough to keep the layout intact, but I expected the demo to look much worse with Javascript disabled. If someone can grab a screenshot and send it to me I’ll include it here. My testing machine should be up and running again in a few days too so I’ll see if I can grab a screenshot as well. Above: The bottom of the demo page as viewed in Internet Explorer 6 on Windows XP Additional Resources Here are some of the articles I read trying to sort out using divs, sections, and articles. This post by Oli Studholme, HTML5 structure—div, section & article, probably helped me the most with the following 3 questions and answers. Would the enclosed content would make sense on it’s own in a feed reader? If so use <article> Is the enclosed content related? If so use <section> Finally if there’s no semantic relationship use <div> I also leaned on the articles below quite a bit. The section element read through the comments <section&gt: is not just a “semantic &lt:div&gt:” HTML5 test results You’ll see you aren’t alone in your confusion Article of doubt Sections and outlines of an HTML5 document HTML5 articles and sections: what's the difference? Above: My best attempt at collecting a screenshot in Internet Explorer with Javascript disabled. This is IE6 on Windows XP. I expect this image looks better than the reality. Summary Hopefully this 2 part walk through of my demo has helped make html5 sectioning elements easier to understand and even better I hope it’s convinced you to create your own demo page. You’ll understand these tags much, much better through actual use than reading about what I’ve done. Start with a trip through some of the html5 boilerplate templates that are readily available and beginning with one as a shell, develop what might be a typical web page in your workflow. At first I fell back to using divs as I do now, just to get some kind of structure in place. I then began replacing some of those divs with the new elements and rearranging a few things here and there as I iterated the development of the page. It really won’t take long to get used to he new elements, but the only way that will happen is if you take the time to start using them. For those of you who have started developing with html5 how have you handled the issue of using too many or not enough headers? Have you found it easier to decide when it’s best to use div, section, and article as you’ve worked with them more? Are there specific issues that continue to arise for you that I haven’t mentioned here?

You are subscribed to email updates from Van SEO Design » Blog To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

How To Develop Using HTML5: Demo Part 1 | Van SEO Design

---

The High Level HTML5 Structure

Let’s get to the good stuff. I wrapped everything inside the body with a wrapper div, which I used to set the width of the page and center it.

I chose to stick with a div here instead of using a section because the container is only meant for presentation. A section tag would indicate the content inside is related. Since different kinds of content will be inside, a div seems most appropriate.

 <div id="wrapper"> 	everything else here </div> 

Inside the wrapper the high level page structure is as follows:

 <div id="wrapper"> 	<header id="masthead" role="banner"></header> 	<div id="content"></div> 	<aside class="primary"></aside> 	<div id="footer"></div> 	<footer class="contentinfo" role="contentinfo"></footer> </div> 

The structure contains 3 of the new elements, probably where you’d expect them to be. The header element contains the logo, tagline, and navigation. The aside contains the rss and category information, and the footer contains the designed by credit and copyright.

The information just above the copyright may seem to make sense as a footer or at least a section, but if you look at the content, it isn’t really related. There are 3 distinct sections of content, hence the use of a div to enclose it all.

The post itself, the meta information, and the comments are all inside a content div. I’ll show the details next time, but directly inside this div is an article tag which also wraps everything

 <div id="content"> 	<article class="post"> 		post, meta, comments here 	</article> </div> 

I could have left out the content div and moved it’s styles to the article, but I included both to allow for the possibility of other content like a trail of breadcrumb links. Those links might fall inside the div, but wouldn’t be part of the article.

You may have noticed that both the header and footer contain the role attribute. Roles exist for assisted technologies. While I’ve included roles in the demo I’ll hold off talking about them in this post and save the talk for another post where I can give it the attention it deserves.

Let’s continue by looking inside the 5 structural containers inside our wrapper div.

Header

The header element is fairly easy to understand and use. What you’ve been marking up till now as div id=”header” (or similar) you’ll now markup with the header element instead.

One adjustment with headers is that you can and likely will use more than one header in a document. (We’ll see this when we explore the other containers). Because we can have multiple headers it makes sense to give this one an id or class.

 	<header id="masthead" role="banner"> 		<div class="bar"></div> 		<a href=""><img id="logo" src="" alt="" /></a> 		<hgroup> 			<h1>html5 Web Design</h1> 			<h2>Building your website for the future</h2> 		</hgroup> 		<nav role="navigation"> 			<ul id="main-nav"> 				<li><a href="" title="">Home</a></li> 				<li><a href="" title="">About</a></li> 				<li><a href="" title="">Blog</a></li> 				<li><a href="" title="">Contact</a></li> 			</ul> 		</nav> 	</header> 

Immediately inside is a div, which I used to create the thin black bar across the top. Since its only function is presentational a div seemed most appropriate. Next I’ve added a logo, which should look exactly as you’d expect.

I included both the site title and tagline as headings inside an hgroup. Currently I wouldn’t use headings for either, but I wanted to give hgroup a spin. In the future I think this will be the common practice.

Our main navigation is inside the header and as you would expect it’s marked up using the new nav element. Again I’ve added a role. Otherwise it should look as you would expect main navigation to be coded.

Aside

Let’s move to the right and the aside before getting to the content as the aside is a bit simpler.

Remember an aside is meant for tangential content. While the content here is certainly useful it could easily be removed without affecting the main content on the page.

The class name is arbitrary. There are other asides in the document and I decided this was the primary aside, hence the choice.

 	<aside class="primary"> 		<section class="rss"> 			<a href=""><img src="images/rss-24x24.png" alt="" /> Subscribe</a> 		</section> 		<nav> 			<h3>Categories</h3> 			<ul> 				<li><a href="">CSS</a></li> 				<li><a href="">Web Design</a></li> 				<li><a href="">WordPress</a></li> 				<li><a href="">Blogging</a></li> 				<li><a href="">SEO</a></li> 			</ul> 		</nav> 	</aside> 

Finally a section tag. Here we simply have some text and an image wrapped in a link that points to the feed. Clearly related stuff.

On a real page you might also include a subscriber count and an option to subscribe via email. Both would be related to the link we have here so again a section is the most appropriate.

Below the rss section is another nav element. Nav isn’t meant for every occurrence of a group of links, but because this is sub-navigation for the blog that would likely be included on multiple pages, it made sense to code it with the nav element.

You’ll notice the h3 inside the nav. Admittedly I wasn’t consistent in my use of hx tags in this demo. In some places I use h1s relying on an outline algorithm I know doesn’t work in most browsers and in other places I kept track of the hierarchy myself.

I also didn’t include a header inside. I could have wrapped the h3 like so.

 <header> 	<h3>Categories</h3> </header> 

This was a gut call. As html5 becomes the de facto way to develop pages and sites I suspect most every hx tag will fall inside a header element. However it was hard to see any advantage to adding it here.

This is one of those places where I can’t say whether or not what I’ve done is the best practice. I think the html5 spec wants me to use header tags here, but again I didn’t see an advantage.

Let’s stop here and continue next time with the main content div.

Summary

Like I said at the top you really need to use the new elements in practice to understand them. Their definitions are relatively easy to grasp, but once coding you’ll be faced with some less than clear choices.

Over time I suspect we’ll have plenty of best practices to guide us. At the moment we’re mostly on our own to figure out when to use div, section, and article or whether or not we should include a header inside a section.

I’ll pick up where we left off next time, though of course the demo will still be there if you want to poke through my code and see how I set the page up. Again I’ll remind you my code isn’t necessarily right or the best. It’s simply what made the most sense to me as I developed the demo page.

Like many I’m still working much of this out for myself. Hopefully sharing my thoughts will help make it easier for you to work it out.

Above: The demo as viewed in Internet Explorer 9 on Windows Vista

Above: The demo as viewed in Internet Explorer 8 on Windows XP

How To Develop Using HTML5: Demo Part 1 Posted: 25 Jul 2011 05:30 AM PDT To really understand the new html5 semantic elements you need to use them in practice. To do that I’ve created a demo of a typical blog post page. I want to share that demo and do my best to explain why I chose to structure the page as I have. Before getting to the explanation please know that I’m still sorting some of this out for myself. I’m not saying the way I set up the demo page is the right way or even the best way. It’s simply the way that seemed most appropriate to me as I developed the page. Even as I coded the demo I could think of other possible ways to structure it and at times felt a sense of confusion over which element made the most sense to use. Here’s the demo page, which you may want to refer to as you’re reading through this post. All the images in the post are also links to the demo. Note: Because there’s a lot to cover I’ve split this post in two and will publish the second part on Thursday. The Layout To keep things simple I opted to create a 2 column fixed-width and centered layout that will likely look familiar. If you look at the demo or the image above you’ll note it includes the usual basics for a blog post. header content area sidebar footer Note: The image above is a cropped version of the demo page. I cut out most of the middle in order to make the image small enough to fit here. HTML5 Boilerplate There’s not a lot to see here with the basic shell. Naturally I’m using the new html5 doctype. I’ve also defined the language as English and also defined the character set. I’ve also included the html5shiv script for IE8 and below with a conditional comment. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="description" content="Demo for a typical blog post coded using new html5 semantic elements" /> <title>HTML5 Structural Semantics</title> < link rel="stylesheet" href="style.css" > <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> </body> </html> I purposely kept the shell simple since I was mainly concerned with the new structural elements. There’s more you might want to and probably should include and I’ll refer you to the html5 boilerplate site for more and better information. Additional Resources Below are a few sources for html5 boilerplate code. HTML5 Mini Template html5 boilerplate The Official Guide to HTML5 Boilerplate A Basic HTML5 Template The Presentation Most of the css was added in a quick and dirty manner. It’s there to make the demo presentable and also to test how the page looks in older versions of Internet Explorer. It’s hardly the best code or all that interesting where this demo is concerned. The one bit that’s most relevant for our current purpose is at the top of the page. section, article, header, footer, nav, aside, hgroup { display: block; } If you remember we needed this code since our new elements have no default styles in some browsers.

You are subscribed to email updates from Van SEO Design » Blog To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

iCan't Internet

---

iCan’t Internet Posted: 22 Jul 2011 12:56 PM PDT Welcome to icantinternet.org! Currently testing out some newnthemes and setups, but we’re sure you can still find what you’re looking for! Tweet [[ This is a content summary only. Visit my website for full links, other content, and more! ]]

You are subscribed to email updates from iCan't Internet To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610

Understanding HTML5 Content Models | Van SEO Design

---

Understanding HTML5 Content Models Posted: 21 Jul 2011 05:30 AM PDT Earlier this week we looked at the new text-level and structural semantic elements html5 provides. Today I want to continue and talk about content models in html5, specifically the new outline algorithm for creating hierarchy. Once again much of the content below comes to me via Jeremy Keith’s book HTML5 for Web Designers, which I highly recommend. Unfortunately some of what we’ll look at below isn’t yet supported by browsers. Some of it will be, but not all. Still I think what’s here is important to understand with an eye toward the future. Content Models Before html5 we had two categories of elements, inline and block. With html5 we now have a more fine-grained set of categories with their own content models. Text-level semantics — what were previously inline tags Grouping content — block level elements like paragraphs, lists, and divs Forms — everything inside form tags Embedded content — images, video, audio, and canvas Sectioning content — the new structural tags described in my previous post Currently to create a hierarchical outline of our content we use a set of h1–h6 tags. They work for the most part, but can break down at times. Consider the following: <h1>Web Design</h1> <p>Some general info about web design</p> <h2>Layout</h2> <p>Info about layouts</p> <h3>Grids</h3> <p>Info about grids</p> <h2>Typography</h2> <p>Info about typography</p> <h2>Color</h2> <p>Info about color</p> <h2>Design Principles</h2> <ul> <li>List of</lI> <li>several different</lI> <li>design principles</lI> </ul> <p>Where in the outline does this paragraph belong?</p> The above would produce the following outline based on the headings. web design layout grids typography color design principles In general each paragraph below a heading belongs under that heading in the outline in the hierarchy, but do they have to? Where in the outline does the very last paragraph belong? Is it under the Design Principles or does it belong under Web Design? You can tell my intention based on the indentation, but a machine isn’t going to see that with the whitespace stripped and there’s no reason the code needed to be indented the way it is above. Visually that last paragraph will look just like the one above it as well. Reading you wouldn’t really know which section it belongs to. HTML5 helps solve the problem above. Sectioning Content Model The first tool html5 provides is the section tag we discussed last time. Using the section element we can rewrite the above as <h1>Web Design</h1> <p>Some general info about web design</p> <section> <h2>Layout</h2> <p>Info about layouts</p> <h3>Grids</h3> <p>Info about grids</p> <h2>Typography</h2> <p>Info about typography</p> <h2>Color</h2> <p>Info about color</p> <h2>Design Principles</h2> <ul> <li>List of</lI> <li>several different</lI> <li>design principles</lI> </ul> </section> <p>Where in the outline does this paragraph belong?</p> Once again the outline produced is the same as we saw above, but now it’s much clearer where the last paragraph belongs. We can do better though. Let’s mix in the header element and better define the different sections of the document. <h1>Web Design</h1> <p>Some general info about web design</p> <section> <header> <h2>Layout</h2> </header> <p>Info about layouts</p> <section> <header> <h3>Grids</h3> </header> <p>Info about grids</p> </section> </section> <section> <header> <h2>Typography</h2> </header> <p>Info about typography</p> </section> <section> <header> <h2>Color</h2> </header> <p>Info about color</p> </section> <section> <header> <h2>Design Principles</h2> </header> <ul> <li>List of</lI> <li>several different</lI> <li>design principles</lI> </ul> </section> <p>Where in the outline does this paragraph belong?</p> Once again the above html produces the same outline. So far not much is really new other than the addition of some new tags. We could have done the same thing by using divs instead of section and header. So where’s the new stuff? HTML5 Outline Algorithm In html5 each sectioning element has its own self-contained outline. What that means is we can start each section with an h1 tag and the algorithm will figure out the overall outline. <h1>Web Design</h1> <p>Some general info about web design</p> <section> <header> <h1>Layout</h1> </header> <p>Info about layouts</p> <section> <header> <h1>Grids</h1> </header> <p>Info about grids</p> </section> </section> <section> <header> <h1>Typography</h1> </header> <p>Info about typography</p> </section> <section> <header> <h1>Color</h1> </header> <p>Info about color</p> </section> <section> <header> <h1>Design Principles</h1> </header> <ul> <li>List of</lI> <li>several different</lI> <li>design principles</lI> </ul> </section> <p>Where in the outline does this paragraph belong?</p> Believe it or not the above html where every heading is an h1 still produces the same outline in html5. web design layout grids typography color design principles Under html 4 the outline would be web design layout grids typography color design principles Quite a difference. It might seem somewhat strange to have every heading be an h1 tag, but it does have advantages. You won’t have to keep track of your overall hierarchy, only the hierarchy within a section. Maybe not such a big deal with a single document, but it does allow our content to be more modular and portable, which will get to momentarily. Other Sectioning Elements Above I mentioned that the sectioning content model includes all the structural tags we talked about last time. It’s not only the section tag that creates its own self-contained outline. Tags like aside, article, and nav also do the same. While it wouldn’t be appropriate had I used article tags instead of section tags in the above code the same outline would have been produced. The hgroup Element Sometimes you may want to use headings so you can better show and style visual hierarchy, but you don’t want the heading to be part of the document outline. hgroup allows us to do just that. For example say you have the following markup: <hgroup> <h1>Main heading</h1> <h2>Tagline</h2> </hgroup> Only the h1 above would be included in document outline. The h2 wouldn’t be included. Only the first heading, regardless of how many are there would be included in the outline. The hgroup element can only contain h1–h6 tags and it’s meant to be used for subtitles, alternative titles, and tag lines. Do we need hgroup? The above could have been coded as: <h1>Main heading</h1> <p class="tagline">Tagline<p> This would produce the same outline and allow for the same visual styles, however the hgroup probably adds more semantic meaning and certainly uses a bit less code. In addition to using hgroup to hide some headings from the document outline there are a few elements that by default are invisible to the document element and are called sectioning roots. blockquote fieldset td Even if you use headings inside the above elements those headings won’t be part of the document outline under html5. Modular Content The new outline algorithm helps us create content that is more modular. The idea of not needing to keep track of your hierarchy might not seem like such a big deal until you consider what happens when you move a piece of content around. For example typical of many blogs is to display the title and a short paragraph of several posts on the main blog page. In the individual posts the headings would be marked up with an h1. On the main blog page you might have an h1 for the page and then have each of the blog post titles as an h2. With the new outline algorithm you can move the post titles back and forth with the same h1 heading and let the outline algorithm figure out the hierarchy. This makes any section of content more portable as we can mix it in with other content without worrying that it might break the hierarchy of the page. While you’ll probably never have need you can now also structure a document with more than 6 levels. Ultimately we can now create an infinite amount of levels using the same h1–h6 elements in nested sections. Scoped Styles A new problem is created in being able to move content around from document to document and that’s in the styles that get applied to that content. Our modular content will inherit the styles of the parent document, which may not be what we want. html5 offers a solution with the boolean scoped attribute that can be applied to the style element as seen below. <article> <style scoped> h1 {styles here} </style> <h1></h1> <p></p> </article> In the above code the h1 of our article will be the scoped styles regardless of where the article is displayed. This allows us to move not only content, but the styles associated with that content easily. Browser Support In order to use the new semantic elements we defined those elements in our stylesheet as display: block to ensure they won’t break our layouts. We should now add the hgroup element. section, article, header, footer, nav, aside, hgroup { display: block; } We’d of course need to create the element for IE as we did with the other elements or include the html5shiv script. document.createElement('hgroup'); Now for the bad news. Browser support for the html5 outline algorithm is currently not good. However the good news is you don’t have to use an h1 to start each new section. You can continue to use h2 and h3 tags inside sections to produce the outline you want. We’ll lose the portability benefits until browsers are supporting the new algorithm, but we can start preparing for when they do offer support. For now it’s probably better to stick with using headings as you always have, though it is safe to enclose your headings in the new semantic elements. Summary HTML5’s sectioning content model gives us greater control over the hierarchy of our documents. The new outline algorithm provides for an unlimited number of heading levels and helps make our content more modular and portable. At the moment there’s limited browser support the the html5 outline algorithm, but we can still prepare for it while using h1–h6 tags as we do now. We won’t be able to take advantage of some of the benefits the new outline algorithm will gives us, but we can prepare our documents for when browser support is more robust. It will probably feel a little strange to markup a document with multiple h1 tags and leave it to the browser to sort out the hierarchy, but hopefully you can see the advantages in such an approach.

You are subscribed to email updates from Van SEO Design » Blog To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610