HTML5 is big improvement of the previous version. It makes you able to do a lot of stuff before you were able to do only with javascript/jQuery. So it is very powerful, but only not so spread as it should be. In this post I’m going to show you a simple skeleton of a HTML5 page.

HTML5 takes with itself a lot of good news for web designer. If you want to go deeper, follow this link: it talks also about of CSS3, the new CSS standard. Here you can find a lot of sample.

CSS3 has been split into “modules”. It contains the “old CSS specification” (which has been split into smaller pieces). In addition, new modules are added.

Some of the most important CSS3 modules are:

  • Selectors
  • Box Model
  • Backgrounds and Borders
  • Image Values and Replaced Content
  • Text Effects
  • 2D/3D Transformations
  • Animations
  • Multiple Column Layout
  • User Interface

Most of the CSS3 Modules are W3C Recommendations, and most of the new CSS3 properties are already implemented in modern browsers.

Below, there is code snippet, to show you a skeleton of HTML5, with little explanations in the comments.

<!DOCTYPE html> <!–- HTML5 has simplified this -–>
<html lang=”en”> <!– HTML5 has simplified this –>
    <head>
        <meta charset=”charset=ISO-8859-1″> <!– HTML5 has simplified this –>
        <link rel=”stylesheet” href=”foglio_stile.css”> <!– you don't have to set the attribute "type", the only sheet language is CSS –>
        <title>MY TITLE</title>
        <!– the following script runs only on IE with older version than IE9, it helps the browser to see correctly the DOM, even if it doesn't support the new tags –>
        <!– [if lt IE 9]>
            <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
        <![endif]–>
    </head>
    <body>
        <!– instead of the div tag, you can now use: header, nav, section, article, footer –>
        <header>
            <hgroup> <!– new feature: it is possible to define a title-subtitles group –>
                <h1>Title 1</h1>
                <h2>Test Html5</h2>
            </hgroup>
        </header>
        <nav> <!– MENU: this new semantics is very helpful to reach the accessibility –>
            <ul>
                <li><a href=”#”>home</a></li>
                <li><a href=”#”>products</a></li>
                <li><a href=”#”>foo</a></li>
                <li><a href=”#”>contacts</a></li>
            </ul>
        </nav>
        <section id=”main”>
            test
            <article>prova </article>
        </section>
        <footer>
            <p>prova</p>
        </footer>
    </body>
</html>
Advertisements