Dans cet exemple de code purement HTML5 + CSS + un peu de javascript, on retrouve tous les éléments pour construire un modèle de page classique : Voir le rendu …
<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset='UTF-8'>
<title>Mon pattern HTML5</title>
<style>
header, section, article, nav, footer, aside, hgroup{border:2px dashed #aaa;display:block;margin:3px;padding:3px;}
ul li {list-style-type:decimal;}
blockquote{background: url(blockquote.png) no-repeat top left;margin:1em;padding:0 0 0 50px;}
blockquote footer{background: url(blockquote2.png) no-repeat bottom right;padding:0 50px 0 0;}
code{color:#769700;font-weight:bold;}
var{color:red;}
samp{color:blue;font-weight:bold;}
kbd{background:#222222;color:white;border:1px solid gray;padding:0.1em 0.3em;-moz-box-shadow:2px 2px 1px #cccccc;-webkit-box-shadow:2px 2px 1px #cccccc;box-shadow:2px 2px 1px #cccccc;}
.envers{-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-o-transform:rotate(180deg);}
</style>
</head>
<script>
function draw() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
</script>
<body onload='draw();'>
<header>
<h1>Mon exemple HTML5</h1>
<nav>
<ul>
<li><a href=''>Accueil</a></li>
<li><a href=''>Contact</a></li>
<li><a href=''>Liens</a></li>
</ul>
</nav>
</header>
<section>
<h1>Ma section sur le theme A</h1>
<article>
<header>
<h2>Article sur le HTML5</h2></header>
<p>Publication le <time datetime="2012-09-06" pubdate>Jeudi 6 septembre par moi</p>
<p>Mon article numero uno ...</p>
<ol start='1' type='1'>
<li>Mangiare la pizza</li>
<li>Bere il caffè</li>
<li>Leggere il giornale</li>
</ol>
<ol start='2' type='I'>
<li>Mangiare la pizza</li>
<li>Bere il caffè</li>
<li>Leggere il giornale</li>
</ol>
<ol start='1' type='A'>
<li>Mangiare la pizza</li>
<li>Bere il caffè</li>
<li>Leggere il giornale</li>
</ol>
<p>Les lignes de code pour faire un bon café :<br>
(Les variables sont <var>e</var> pour eau et <var>c</var> pour café, <var>s</var> pour sucre)</p>
<code>
start machine;
play;
rotor <var>c</var>;
water <var>e</var>;
sugar <var>s</var>;
ready <samp>r</samp> ;
</code>
<p><kbd>Ctrl</kbd>+<kbd>Entrée</kbd> doivent ensuite être enfoncés pour récupérer le résultat <samp>r</samp>.</p>
<aside>
<h2>Gestion</h2>
<ul>
<li><a name='panier'>Panier</a></li>
<li><a name='commande'>Commande</a></li>
<li><a name='suivi'>Suivi</a></li>
</ul>
<h2>Glossaire</h2>
<dl>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
</dl>
</aside>
<footer>
<p>Tags : HTML5, structure, footer</p>
<p>Categorie : <a href='/elements'>Elements HTML5</a></p>
<p>Publication le <time datetime="2012-09-06" pubdate>Jeudi 6 septembre par Patrice Morreale</p>
<small>Les petites lignes des contrats et informations géniales</small>
</footer>
</article>
<article>
<header><h2>Représentation d'un Canvas</h2></header>
<canvas id="canvas">
<p>Votre navigateur ne supporte pas l'élément canvas ...</p>
</canvas>
<img alt="un blockquote" src="blockquote.png" style='float:left;' />
<img alt="un blockquote" src="blockquote2.png" style='float:right;' />
<footer>Fin de la représentation</footer>
</article>
</section>
<section><h1>Ma section sur le theme B</h1>
<article><h2>Mes article sur le fromage</h2>
<section>
<h3>Mon sous-theme B numero 1</h3>
<blockquote cite='http://www.studios-75.fr/'><p>Pour réussir, il ne suffit pas de prévoir, il faut aussi savoir improviser - Isaac Asimov</p><footer><a href='http://www.studios-75.fr'>Voir la source ...</a></footer></blockquote>
<q cite='http://www.studios-75.fr/'>Ma citation courte<footer><a href='http://www.studios-75.fr'>Voir la source ...</a></footer></q>
<p>un exemple de la balise cite pour mettre en avant mon groupe de musique <cite>OPGD</cite></p>
<p><strong><strong>ce texte</strong> est très important</strong></p>
</section>
<section>
<h3>Mon sous-theme B numero 2</h3>
<p><b>Cet article portera sur la manière de construire sa première page web en <abbr title="Hyper Text Markup Language">HTML5</abbr></b> et voir ensuite comment la personnaliser avec les feuilles de style.</p>
<h3>Exemple de rendu Ruby</h3>
<p lang='zh'><ruby><rt>Han</rt> <rt>Kanji</rt></ruby></p>
</section>
</article>
</section>
<aside>
<h2>Gestion</h2>
<ul>
<li><a href='#panier'>Panier</a></li>
<li><a href='#commande'>Commande</a></li>
<li><a href='#suivi'>Suivi</a></li>
</ul>
<h2>Horaires</h2>
<p>Lundi > Vendredi de <time>9:00</time> à <time>17:30</time></p>
<h2>Glossaire</h2>
<dl>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
</dl>
</aside>
<footer>
<nav>
<ul>
<li><a href=''>Retour a l'Accueil</a></li>
<li><a href=''>Contact</a></li>
<li><a href='/liens'>Liens</a></li>
</ul>
</nav>
</footer>
</body>
</html>