There was a lot of articles about HTML5 last days, so when Alexey Kovyrin asked me to help him with his new blog design I saw no other choice but using HTML5. There are a lot of new features added since HTML4, and some of them could be used today, like new elements <header>, <footer>, <nav>, <article>, <section>, etc. I think this is a nice addition to the HTML, because these elements add more sense to an unstructured markup. There is a buzzword “semantic” exists to describe this, but I don’t like buzzwords, so I would call it “sense”. So what features we could get from HTML5, that are supported by all modern browsers?
Ok, there is not so much of a difference between HTML4 and HTML5 from web-developer standpoint, just some <div> elements are replaced with more meaningful ones (I’m talking about markup now, not about new APIs. Here is what I mean:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | <!DOCTYPE html> <html lang="en"> <head> <title>Homo-Adminus Blog</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> <!--[if IE]> <script src=" http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div id="container"> <header id="page-header"> <nav id="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Resume/CV</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Photos</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <div id="page-content"> <section id="content"> <article> <header> <h2><a href="#">Loops plugin for rails and merb released</a></h2> <p class="meta"> Posted by Scoundrel under <a href="#">Development</a>, <a href="#">My Projects</a>, <a href="#">Networks</a> </p> </header> <aside> <time datetime="2008-08-20">Sun 20<br />Aug<br />2008</time> </aside> <section class="text"> Article content goes here. </section> <footer> <p> Tags: <a href="#" rel="tag">github</a>, <a href="#" rel="tag">plugin</a> </p> <p> <a href="#comments">1 Comment</a> | <a href="#">Bookmark on del.icio.us</a> </p> </footer> </article> </section> <footer id="page-footer"> Copyright © 2009 <a href="#">Alexey Kovyrin</a> | Designed by <a href="#">Tatiana Kovyrina</a> </footer> </div> <nav id="sidebar"> <section id="categories" class="left"> <header><h3>Categories</h3></header> <ul> <li><a href="#">Admin-tips</a> (26)</li> <li><a href="#">Blog</a> (2)</li> <li><a href="#">Databases</a> (33)</li> </ul> </section> </nav> </div> </body> </html> |
In a few words: the only difference is that we use new HTML elements instead of descriptive CSS class names and IDs. I’m not going to describe all new features of HTML5 here, the good introduction could be found here or here.
Here are my recommendations on using HTML5 today:
-
To enable new HTML5 elements in IE you should use
document.createElement— see lines 6-8, explanation is here. -
Ensure that new HTML5 elements are block level:
1
2
3
4
5header, footer, section, nav, article, aside {
margin: 0px;
padding: 0px;
display: block;
} -
Use
<section>element if you need to add a block of specific content, like categories list (lines 54-61). Use good old<div>to add a markup element with no specific sense (for example,<div id="container">on line 11). -
Use
<nav>element to create any sort of navigation panes (top-level menu, sidebar, footer links). Do not use<aside>to create sidebars — this is wrong! -
<header>and<footer>elements are good candidates to wrap any heading (logo, top level navigation, and almost everything that visually is under the main content) and bottom (article metadata, page footer, bottom links, and almost everything that visually is below the main content) information. You can use these elements inside other elements like<nav>,<article>, or<section>, so use them. -
New element
<article>contains a block of information inside the main content area. It could be an article or blog post, a comment, a particular book description in bookstore, etc. Be creative and use this exciting element to fill your pages with a sense. -
The most controversial element is
<aside>. Lots of articles about HTML5 in the Internet suggest to use it for the sidebar navigation, but that is absolutely wrong. Use this tag to take some information out of primary content. Good candidates are footnotes or side notes, quotes, comment author’s avatar, etc. Yes, I’ll repeat: be creative. -
Almost everything you do in HTML4 is valid for HTML5: use unordered lists
<ul>of list items where order does not matter, use ordered lists<ol>otherwise. Use tables (yes,<table>) for tabular data structures (and not for layout). Paragraphs, emphasizes, quotes, and much more elements should take their own place in your markup. -
Use validator to ensure you are doing it right.
-
Read the code. The good place to start from is HTML5 Gallery.
You can start using HTML5 right now. It’s our future, and we need to know, how would it look like.
PS. Did you notice the nice code syntax highlighting in this blog? I’m using CodeColorer — the best syntax highlighting plugin for WordPress. Try it and you will stay with it forever!
Just curious. Why is it wrong to use “aside” for the sidebar? There is nothing about this subject in current draft.
The quote from HTML5 working draft:
The key words are tangentially related. Usually, sidebar contains a lot of information, that is not related to the article content: categories list, blogroll,– elements that are part of blog navigation structure.
If we are talking about the “article”+”aside” – i agree.
But what if it is “section role=maincontent”+”aside”?
On the main page, for example, u’ve got list of articles in main section, and “aside” with “categories list, blogroll etc” is just what seems to be related to the list of blog posts and blog in general.
Right?
As I said,
<aside>is the most controversial element. Yes, I can imagine usecases, when this element could represent a sidebar, but not a blog sidebar.Ok, let’s talk about blog home page. The main content here is a list of latest articles (or a single latest article, but that’s not our case, right?) Archives, categories list, blogroll — are list of articles, articles, and links to other blogs respectively. Also you can find here (usually) links to RSS, top commenters, login/admin links.
So don’t you think that all these items are related to latest articles? I can agree, if you put in
<aside>5 latest commenters of each article (because they are related), excerpt from article text, any kind of meta info related to post. But links to lists of other articles is the blog navigation,<nav>element.Categories are related to posts. Anything about the author of the posts – is related to the posts as well.
Thats the point where we think different.
I think list of blogposts and blog categories+RSS+etc are tangentially related things, and you don’t. That’s it. I just think it is a little misguiding to tell that “sidebar!=aside”.
I think when we got controversial html elements – we just have two right ways of understanding them.
P.S.: nice post btw =)
I do love the explaination at http://www.ibm.com.
<aside>, as written there, is a semantic element that is a sort of addition to the main content. So, it won’t be a mistake to use<aside>for sidebar (which actually, depending of purpose of its creation, may be that additional material).Oh boy! Excuse me, for that bad formatting =(
Yep, that’s what I’m talking about. Addition to main content is a related articles list, RSS links to comments, Pingback URL, list of commenters, etc, etc. But my current point of view is that categories list and archives is not additional material, but navigation.
I think it’s better to wait while HTML5 draft will be approved, and I hope it will contain guidelines on how to use this element.
It’s a bit tricky but as I understand, aside was created to represent magazine-like sideblocks that were implemented in html4 as div with float inside a text.
Even if we can use it, what we have in this sidebar are most probably links (to posts, to comments, to taxonomy categories etc.). So it’s definitely nav.
If we are talking about Alexey Kovyrin’s blog I think we should use
<section>for a sidebar. Why? Someone has writtenThe search form isn’t a link, isn’t it? And let’s think about “Categories” section and “Flickr” section. Are they connected to each other? Of course NO. In my opinion the sidebar should be
<section>and “Categories”, “Archive”, “Flickr”, “Blog roll” should be wrapped into separate<nav>tags. Or let’s look at CSS Tricks sidebar. Will you use<nav>tag for it? I don’t think so.ok. let’s just use our greate knowledge of OOP (:)) and make some use of Single Responsibility Principle (busted!)…
use
<nav>for pack of links,<section>for sections and<aside>for typographical sidenotes like “By the way british scientists proved aside tag should be used only for typographical sidenotes like “By the way british scientists proved aside tag should be used only for…How pleasant to see that there are people who think — before accepting
<aside>and “sidebar” as interchangeable things because the words sound so similar… (Sorry about OT and thanks for the article.)