Friday 16 August 2013

HTML5 ELements ,Tags

THE TITLE

So the heading div is for the title. In there are the <header> and <hgroup> HTML5 tags. This is where you place your title and all of that.

THE CONTENT

The content section is divided into 2 parts:
  1. Article
  2. Sidebar
These all are bound within the space of <div class='frame'> so we can center them like traditional blog posts.

THE ARTICLE

The <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):
  1. Content
  2. Metadata
  3. Comments

THE ARTICLE METADATA

This section (or sections) holds all the details about the post that are useful for search engines:
  1. Publish/Updated date. This should include the <time> tag
  2. 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.
  3. 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!
  4. Social Buttons.
  5. Analytics.
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: entry-title, entry-content, entry-summary, updated, published, author,rel='tag', and rel='bookmark'.

THE COMMENTS

Comments should be wrapped in the <dialog> tag. Unfortunately, most of the free comment services like Disqus still use <div> and <table> tags to structure their comments, but you could still wrap them in a <dialog> tag.
If you are constructing the comment DOM, use <article> for each comment.

THE SIDEBAR

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

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.
Finally, the footer section. The footer section is this area from above:
<section class='footer container' role='contentinfo'> 
  <aside class='bottombar' role='directory'> 
    <div class='frame'> 
      <article class='widget recent-posts'> 
        <h3>From the blog</h3> 
        <div></div>
      </article>
    </div> 
  </aside> 
  <footer> 
    <div class='frame'> 
      <cite role='note'> 
        Copyright
      </cite> 
      <nav class='menu' role='navigation'> 
        <ul> 
          <li> 
            <a></a> 
          </li> 
        </ul> 
      </nav> 
    </div> 
  </footer> 
</section>

The footer of the DOM is divided into two sections:


    

  1. The bottom widgets section
    2. 

  2. The footer itself
    3. 




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 960px.
    • 

  • AND, I want the title and content to be an hentry for the hAtom microformat. 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:


<section class='hentry'>
  <div class='title'>
    <div class='frame'>
      text
    </div>
  </div>
  <div class='content'>
    <div class='frame'>
      text
    </div>
  </div>
</section>






...and these styles (div's are automatically 100% width because they are blocks):






.title {
  background: red; /* 100% width, red background */
}
.content {
  background: yellow; /* 100% width, yellow background */
}
.frame {
  width: 960px; /* text content is 960px... */
  margin: 0 auto; /* and centered */
}






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:






<section class='content hentry'>
  <div class='frame'>
    text
  </div>
</section>







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.
at