DY

DelahayeYourself

modules / UE3.4 /

TP07: Sémantique

Le HTML sémantique est l'utilisation du balisage HTML visant à renforcer le sémantisme (la signification) des informations contenues dans les pages web, c'est-à-dire leur sens, plutôt que de se borner à définir leur présentation (ou apparence).

Squelette de base HTML5

<!DOCTYPE html>
<html>
    <head>
        <title>..</title>
        <meta charset='utf-8' />
    </head>
    <body>
        <header>
        </header>
        <main>
        </main>
        <footer>
        </footer>
    </body>
</html>

Navigation et titre principal

Dans la balise header rajoutez le code suivant:

<h1>HELLO WORLD!</h1>
<nav>
    <a href=".." title="..">Home</a>
    <a href=".." title="..">Contact</a>
</nav>

Un exemple plus complexe

Voici l'exemple d'un article:

<article>
    <h2>Useless title</h2>
    <time>04/05/1977</time>
    <p></p>
    <img src=".." alt=".." />
    <a href="http://google.fr" title="Jump to google.fr">Google</a>
</article>

Structure globale d'une page d'actualités

Voici le code d'un listing d'articles avec une sidebar:

<main>
    <section>
        <h2></h2>
        <article></article>
        <article></article>
    </section>
    <aside>
        <p>..</p>
    </aside>
</main>

Page d'actualités

Créer le template HTML d'une page d'actualités en vous servant des éléments précédents.