jQuery FC Barcelona: Improve your Blog with HTML5

What is HTML5?

HTML5 will be the new standard for HTML.

The previous version of HTML, HTML 4.01, came in 1999. The web has changed a lot since then.

HTML5 is still a work in progress. However, the major browsers support many of the new HTML5 elements and APIs.

HTML 5 introduces new elements to HTML for the first time since the last millennium. New structural elements include aside, figure, and section. New inline elements include time, meter, and progress. New embedding elements include video and audio. New interactive elements include details, datagrid, and command.

How Did HTML5 Get Started?

Some rules for HTML5 were established:

New features should be based on HTML, CSS, DOM, and JavaScript
Reduce the need for external plugins (like Flash)
Better error handling
More markup to replace scripting
HTML5 should be device independent
The development process should be visible to the public

The HTML5 <!DOCTYPE>

In HTML5 there is only one declaration, and it is very simple:

<!DOCTYPE html>

HTML5 Document

HTML5 introduces new tags that can help the blog development. Even well-formed HTML pages are harder to process than they should be because of the lack of structure. You have to figure out where the section breaks go by analyzing header levels. Sidebars, footers, headers, navigation menus, main content sections, and individual stories are marked up by the catch-all div element.

The following tags have been introduced for better structure:

section: This tag represents a generic document or application section. It can be used together with h1-h6 to indicate the document structure.
article: This tag represents an independent piece of content of a document, such as a blog entry or newspaper article.
aside: This tag represents a piece of content that is only slightly related to the rest of the page.
header: This tag represents the header of a section.
footer: This tag represents a footer for a section and can contain information about the author, copyright information, etc.
nav: This tag represents a section of the document intended for navigation.
dialog: This tag can be used to mark up a conversation.
figure: This tag can be used to associate a caption together with some embedded content, such as a graphic or video.

Source Code Example

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>
    Barcelona World's Champions
  </title>
</head>
<body>
  <header>
    <h1>Clubs World cup</h1>
  </header>
  <nav>...</nav>
  <article>
    <section>
      ...
    </section>
  </article>
  <aside>...</aside>
  <footer>
    <p>Copyright 2012 Mauro218</p>
  </footer>
</body>

For more information
W3Schools. "HTML5 Introduction".
http://www.w3schools.com/html5/html5_intro.asp

Tutorials Point. "HTML5-Quick Guide".
http://www.tutorialspoint.com/html5/html5_quick_guide.htm