Liens et listes

J'ai regroupé ces deux groupes de balises même si elles ne semblent à première vue pas proches.
Cependant, quand on sait que l'on doit utiliser une liste pour former un menu sémantiquement correct, on comprend mieux ce choix.

Permettre la navigation en incorporant des liens

Ils permettent la navigation, impossible de ne pas s'en servir !

Code But Spécificités Exemple de code Rendu dans ce site
<a href="">
</a>		 Marque un lien ou une ancre En ligne
l'attribut obligatoire href sert à désigner la cible
pour une ancre on se sert de l'id d'un élément		 <a href="http://www.google.fr">Lien vers google </a><a href="#idexemple">Ancre vers le bas de page</a> Lien vers google Ancre vers le bas de page

Organiser des données liées ou créer des menu avec les listes

Les listes permettent d'organiser des données qui se suivent, qui dépendent les unes des autres.

Tous les éléments de liste sont de type bloc

Listes ordonnées

Ce type de listes est nottament à utiliser pour créer des menus

Code But
<ul>
</ul>		 Marque une liste ordonné
<ol>
</ol>		 Marque une liste numeroté
<li>
</li>		 Marque un éleément de liste ordonnée ou numéroté
Liste ordonnée non numérotée 
<ul>
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3</li>
    <li>Element 4</li>
</ul>
Resultat : Remarque : on peut très changer facilement faire disparaître les puces

Listes de définitions

Balises dans l'ordre d'apparition

Code But
<dl>
</dl>		 Indique une liste de définitions
<dt>
</dt>		 Terme dont on donne la définition
<dd>
</dd>		 Une définition du terme
Une liste de définitions : 
<dl>
    <dt>Alouette</dt>
        <dd>Oiseau particulièrement gentil selon certains</dd>
    <dt>Chouette</dt>
        <dd>Oiseau nocturne</dd>
        <dd>Expression de joie</dd>
</dl>
Résultat :
Alouette
Oiseau particulièrement gentil selon certains
Chouette
Oiseau nocturne
Expression de joie

Imbriquer des listes

Traitons ce cas par l'exemple

Code source : 
<ul>
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3
        <ul>
            <li>Element 3.1</li>
            <li>Element 3.2</li>
            <li>Element 3.3</li>
            <li>Element 3.4</li>
        </ul>    
    </li>
    <li>Element 4</li>
</ul>
Notez où s'ouvrent et se ferment les balises li Ceci est autorisé : les éléments numérotés et non numérotés ne sont pas au même niveau : 
<ul>
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3
        <ol>
            <li>Element 3.1</li>
            <li>Element 3.2</li>
            <li>Element 3.3</li>
            <li>Element 3.4</li>
        </ol>    
    </li>
    <li>Element 4</li>
</ul>
Notez où s'ouvrent et se ferment les balises li