Friday 16 August 2013

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 <video> and<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 <canvas> tag).
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 <article><figure><section><aside><header><footer><dialog> and <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 <widget>,<advertisement><chat><reputation><tag><price> and <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:
<section class='header container' role='definition'> 
  <div class='navigation'> 
    <div class='frame'> 
      <header class='logo'> 
        <h1></h1> 
      </header> 
      <nav class='menu' role='directory'> 
        <ul>
          <li>
            <a></a>
          </li>
        </ul>
      </nav>
    </div> 
  </div> 
</section>
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:
  • Logo
  • 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.

THE <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, <ul> or <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 <nav> element.
You really don't need to wrap that list, but if you do, wrap it with <nav>.

THE BODY SECTION

The body section is this area from above (not the actual body html tag):
<section class='body container hentry' role='main'> 
  <div class='heading' role='heading'> 
    <div class='frame'> 
      <header> 
        <hgroup> 
          <h1 class='entry-title'></h1> 
          <h2 class='entry-summary'></h2> 
        </hgroup> 
      </header> 
    </div> 
  </div> 
  <div class='content'> 
    <div class='frame'> 
      <article class='post left' role='article'> 
        <header class='entry-meta'>
          <cite>By Lance Pollard</cite> 
          <span> |</span> 
          <time class='updated published' datetime='2010-08-02T20:23:00-07:00'>Monday, August 02</time>
          <meter value='5' min='0' max='5' title='rating'>5 stars</meter>
          <meter value='1200' title='page-views'>1200 views</meter>
        </header>
        <div class='entry-content'></div> 
        <footer class='vcard author'> 
          <a class='profile' href='http://www.facebook.com/viatropos'> 
            <img class='photo' src='' /> 
          </a> 
          <address class='info'> 
            <a class='url fn n' href='/'> 
              <span class='given-name'>Lance</span> 
              <span class='family-name'>Pollard</span> 
              <span class='nickname'>(viatropos)</span> 
            </a> 
            <div class='adr'> 
              <span class='locality'>Berkeley</span> 
              <span class='region'>CA</span> 
              <span class='postal-code'>94704</span> 
              <span class='country-name'>United States</span> 
            </div> 
          </address> 
        </footer> 
        <dialog id='comments' role='region'></dialog> 
      </article> 
      <aside class='right sidebar' role='complementary'> 
        <article class='widget search' role='search'> 
          <h3>Search</h3> 
          <form id='search-form' method='get' name='search-form'> 
            <fieldset> 
              <input id='search' name='search' type='text' value='' /> 
              <input type='submit' value='search' /> 
            </fieldset> 
          </form> 
        </article> 
      </aside> 
    </div> 
  </div> 
</section>