A Semantic HTML5 DOM
This is a very flexible DOM for structuring Blog Posts and Web Pages. Here is the Gist if you would like to fork and customize it.
Elements of the HTML5 Blog Post DOM
Vertically, the Page is Divided into Header, Body, and Footer
The above DOM structure allows for a lot of design flexibility. It is divided into 3 main vertical blocks:
Ideally, those would each be HTML5 tags
<footer>, but at this level, there's too much we'd need to stuff into them. If at some point I find out that headers and footers are allowed to be nested, then I will change the top-level
<section> tags to header and footer.
Each of those sections are 100% width (or auto width, with the root
body 100% width). Then there are two
<div> tags nested inside each top-level
- A descriptive sub-section
The reasons for nesting two tags inside the root
<section> tags are simple, if we have a structure like this:
<div class='title'> can be 100% width, with a custom background design that stretches across the screen, and
<div class='content'> can do the same. Then, being wrapped in
<section class='body'>, we know they are part of the same section, that they are the same piece of content. Then, the
<article> tags can be
width: 960px and
margin: auto thanks to the frame.
What that ends up allowing is:
We can style a section of related content with some styles 100% width, and others bound within a frame. If you did something like the following, which is more what we think we could accomplish with HTML5, that kind of design would not be possible:
My Personal Thoughts on New HTML5 Tags
Personally, I think that the introduction of the HTML5 tags is a mistake. There is no possible way they can cover all possible layout/design permutations and create the "perfect" tags for them. I think tags should only be introduced if they cover a very very clear set of functionality, such as the
<audio> tags. I think the old setup is perfect, that plus video and audio.
Tags are the lower level building blocks of higher level content. Think of it like atoms to molecules, molecules to cells.
Tags are like atoms. There only needs to be enough to handle all the ways to organize content. HTML has done this, everything that has been built today has been built with HTML except video and audio which were flash, which I think should be HTML tags (and the
Components are like molecules. Objects that are used very often, such as drop-down lists, text editor, color pickers, etc, are components. They are composed of tags. Widgets are are components, in HTML at least (in Actionscript, I wouldn't say that).
The DOM is a cell. You combine widgets and components and areas into the DOM, just like you combine molecules into cells. You could break this down further, but you get the point.
I bring this up is because
<nav> are component-level tags. They are like molecules, but they are being defined as atoms! This is a big mistake. If they introduce these, why not introduce things like
<note>. Those are equally as common as the above.
The reason they don't have those is because the new HTML5 tags are arbitrary. They can't describe the complexity they were meant to describe. Use
<div> instead, and give it any class you want.
Well, still try to see what you can do with the new tags, prove me wrong :). That's why I'm building this HTML5 blog post DOM thing.
The Header Section
The header section is this area from above:
The purpose of the header is to display your logo and the main menu, that's it.
The triple-wrap (
.header.navigation.frame) is for proper, consistent, flexible styling. Everything in there is the content. The header section consists of:
- Main Menu
That's about it. Oh, the most-semantic way to create a menu is an unordered list, with
<li><a> inside, you don't need to add anything more that that. Everything else can be done in css.
<nav> tag and the List, how do they work together?
I wondered this, and now I have a perspective. The
<nav> tag is pretty much wherever a list is going to be,
<ol>. Just wrap the lists with
<nav>. It adds an extra level of tags, but hey, maybe this is what they wanted? The HTML5Doctor describes semantic navigation with the
You really don't need to wrap that list, but if you do, wrap it with
The Body Section
The body section is this area from above (not the actual
body html tag):
This is where the bulk of your content goes. I have divided the body section into two main vertical sections: title, and content. The reason for this is so you can create a complete custom, 100% width look for the title, that is distinct from the body, while still semantically saying that the title is associated with the content below, like the image below.
More on this later...
heading div is for the title. In there are the
<hgroup> HTML5 tags. This is where you place your title and all of that.
The content section is divided into 2 parts:
These all are bound within the space of
<div class='frame'> so we can center them like traditional blog posts.
<article class='post'> holds everything related to the blog post or page content associated with this URL, except the title (because we want custom styling):
The Article Metadata
This section (or sections) holds all the details about the post that are useful for search engines:
- Publish/Updated date. This should include the
- Tags. Each tag should be in a link with
rel"tag" like this:
<a href="/" rel='tag'>tag-name</a>. This is the rel tag microformat. This tells search engines that you have a page dedicated to this tag, and some sites actually look for this information to display tags.
- Author. The author of the post. This should use the hCard microformat, and the
<address>tag to maximize semanticness :). Sites can actually search your page for a vcard and download it as a business card!
- Social Buttons.
That's a lot of rich information for search engines.
The Article Content
Finally, this is the actual content of your post. There's a lot else going on your page as you can see. Write lots of good stuff.
I snuck the hAtom microformat in there, which looks for these classes:
Comments should be wrapped in the
<dialog> tag. Unfortunately, most of the free comment services like Disqus still use
<table> tags to structure their comments, but you could still wrap them in a
If you are constructing the comment DOM, use
<article> for each comment.
To the right (or left, or both) of the content is the
<aside class='sidebar'> tag. While
aside != sidebar, it's nice to use the
<aside> tag as a sidebar.
Widgets can each be
<article> tags. Articles are not only used for posts. The HTML5 Doctor recommends using the
<article> tag for widgets. You can even nest article tags.
The Footer Section
Finally, the footer section. The footer section is this area from above:
The footer of the DOM is divided into two sections:
- The bottom widgets section
- The footer itself
Reasons for Structuring the HTML5 DOM Like This
It took a while to come up with this DOM layout pattern. I was doing everything I could to try to remove the need to have any divs define the structure, but in the end, I started having to write to many convoluted CSS tricks to make it look like it should if I didn't use divs. So this is what I've landed on.
First, the whole
.frame thing. The frame, other's call it a wrapper, is used to frame the content in a certain space. In this layout, the frame is
960px and centered. The problem was this:
- I want to style the title and content backgrounds so they looked like they were 100% width...
- But I want the text itself to be centered and bound within
- AND, I want the title and content to be an
hAtommicroformat. In otherwords, if you used XPath to traverse the document, you would know that "oh, I'm at an 'hentry', oh there's the title, there's the content". BUT, at the same time, style 100% width...
The only way to do all of that in a consistent way is to have this structure:
...and these styles (div's are automatically 100% width because they are blocks):
There are cases where you can reduce the number of DOM elements. First, if a vertical section only has one part to it, then you can ditch the div wrapping the frame, and you end up with this:
With that, you can style
.content 100% width, and everything within
.frame will be 960 and centered.
The only issue I have with that is consistency. If some sections need the more complex solution with 3 div nesting, then it's less mentally complicated to just build everything like that. It only adds less than 10 DOM elements, but makes your entire DOM have the same structure. That makes it very easy to know what's going on at a glance. Convention over Configuration.
Anyway, hope this is useful too you. Almost done implementing it here.
- The Address Element.
- Getting Semantic with Microformats
- The Aside Element
- The Article Element
- The Meter Tag
- HTML5 and Aria Roles