Home

Article

HTML5 and semantics

05.11.2010

These days we have seen that Microsoft leaves Silverlight, a platform that was supposed to be the basis for creating rich web applications and flash-in contender.

MS chose the HTML5 standard that is in the process of verification of the W3C consortium as a platform to develop its tools for creating web applications ..

 

HTML 5 for a face to face semanticweb

As far as the semantic world HTML5 brings something of semantic structures in mind the following block elements:

 Element Description
 <section> A section of the document. Used together with <h1>, <h2>, <h3>, etc. it can imply a document's structure.
 <article>

An independent piece of content such as a blog, a news article, etc.

 <aside> A piece of content that's only slightly related to the rest of the page. A lot of people are adopting these for the right side, additional content areas that a lot of sites use.
 <hgroup> A means of grouping multiple headers together.
 <header>

A container for headings, navigation, etc.
The most obvious are the <h1>…<h6> and <hgroup> elements but all sorts of things from <p> paragraphs that describe the header to links related to the header.

 <footer> A container for all of those things that normally end up in a footer: information about the author, copyright information, additional links, etc.
 <nav> A part of the document containing navigation.
 <figure> A parent section that associates child content such as video or images with a child caption.

Today, developers and designers, who create a web site, and use a lot <div> <h1>, <h2> .. tag for the design, making it difficult to text search, categorization and structure of reading web pages by search engines.

For example a classic HTML4 structure of the web page looks like this:  in HTML5 page should look like this:
<body>
 <div id="nav_bar"></div>
 <div id="main_header"></div>
 <div class="side_bar"></div>
 <div id="container">
  <div class="section">
   <div class="header"></div>
   <p>Some Text</p>
   <div class="footer"></div>
  </div>
  <div class="section">
   <div class="header"></div>
   <p>Some Text</p>
   <div class="footer"></div>
  </div>
 </div>
 <div id="main_footer"></div>
</body>

and the corresponding CSS

#nav_bar {}
#main_header {}
.side_bar {}
#container {}
.section {}
#header {}
.section p {}
.footer {}
#main_footer
<body>
 <aside>
  <p>General Info</p>
  <nav>
   <a href="">Home</a>
   <a href="">About</a>
   <a href="">Contact</a>   
  </nav>
 
  <p>Tutorials</p>
  <nav>
   <a href="">HTML5 Tuts</a>
   <a href="">CSS3 Tuts</a> 
  </nav>
 </aside>
 
 <section>
  <header>
   <h2>HTML5 Tutorials</h2>
   <p>Completely Free HTML5 Training</p>
  </header>
  <article>
   <h3>HTML Tutorial 1</h3>
   <p>Lots of good good information</p>
  </article>
  <article>
   <h3>HTML Tutorial 2</h3>
   <p>Lots of good good information</p>
  </article>
  <footer>6 hours of free tutorials!</footer>
 </section>
 
 <section>
  <header>
   <h2>CSS3 Tutorials</h2>
   <p>Completely Free CSS3 Training</p>
  </header>
  <article>
   <h3>CSS Tutorial 1</h3>
   <p>Lots of good good information</p>
  </article>
  <article>
   <h3>CSS Tutorial 2</h3>
   <p>Lots of good good information</p>
  </article>
  <footer>4 hours of free tutorials!</footer>
 </section>
</body>

This example is a literal implementation of the HTML5 standard and as you have noticed we have not div's, of course they are not repealed, just want to show a clean approach to creating web pages with respect to the new standard.




Posted by: Dejan Petrovic