Accueil > Technicité > HTML, organiser le contenu de votre page : (...)

HTML, organiser le contenu de votre page : les balises de hiérarchisation

mardi 9 septembre 2008, par Claire Mélanie, Lucien impression

Mots-clefs :: HTML :: Tutoriels :: Tutoriels pour débutant ::

Organisation générale de la page - Placement du texte

Pour plus d’informations sur les notions de body (corps de document) et balise : voir notre article sur la structure générale d’une page HTML


[sommaire]

Le code html intègre des balises prédéfinies de hiérarchisation du texte.

Les balises hiérarchiques

elles sont pour une part aussi des balises de mise en forme.

- Voici la liste de la plus grande à la plus petite :

<h1>Titre 1</h1>
<h2>Titre 2</h2>
<h3>Titre 3</h3>
<h4>Titre 4</h4>
<h5>Titre 5</h5>
<h6>Titre 6</h6>

Résultat :

Titre 1

Titre 2

Titre 4

Titre 5
Titre 6

Si l’on respecte la fonction initiale de ces balises, chacune d’elles visent à déterminer le niveau hiérarchique d’un titre dans la page. H1 sera utilisé pour un titre de premier niveau (police la plus grande ), h2 pour un titre de deuxième niveau (police de taille inférieure), h3 pour un titre de troisième niveau (taille de police encore inférieure) ; etc.

Le titre que l’on veut ainsi hiérarchiser est bien entendu à placer entre la balise ouvrante et la balise fermante.

Si l’on peut classer ces balises parmi les balises de structuration de la page, c’est parce que ce sont des balises « block » donc elles génèrent automatiquement un passage à la ligne. De plus, leur affichage par défaut est le plus souvent interprété par les navigateurs comme un affichage centré, c’est-à-dire au milieu de la largeur de la page.

Les listes

Il existe différents types de listes :

- Les listes dites descriptives
- Les listes dites non ordonnées
- Les listes dites ordonnées.

1. Les listes descriptives

Voici l’écriture de base d’une telle liste dont le titre serait « Lexique »

<h4>Lexique</h4>

<dl>
        <dt>Premier terme du lexique</dt>
               <dd>la définition du terme</dd>

        <dt>Deuxième terme du lexique</dt>
                <dd>la définition du terme</dd>
</dl>

Résultat :

Lexique

Premier terme du lexique
la définition du terme
Deuxième terme du lexique
la définition du terme

Ce type de liste permet une hiérarchisation des informations grâce à la propriété block par défaut de ses balises et par le jeu de retrait (ou d’indentation).


2. Les listes non ordonnées également appelées listes à puce.

Voici l’écriture de base d’une telle liste dont l’objet serait ici de faire la liste des mots attachés au lexique.

<h4>Tous les mots du lexique</h4>

<ul>
        <li>Premier terme</li>
        <li>Deuxième terme</li>
        <li>Troisieme terme</li>
</ul>

Si vous testez ce code sous la forme :

Tous les mots du lexique

  • Premier terme
  • Deuxième terme
  • Troisieme terme

Vous remarquerez que le style par défaut de la puce (petit symbole) située devant le texte varie selon les navigateurs. Sous firefox par exemple, il s’agira d’un losange, sous opera, il s’agira d’un rond, de même que sous internet explorer. Nous verrons ultérieurement comment changer le style de ces puces et de la liste elle-même.


3. les listes ordonnées appelées également numérotées.

Voici la syntaxe de base d’une telle liste, par exemple ici une liste classant les mots du plus important au moins important :

<h4>Les termes à connaître en priorité</h4>

<ol>
        <li>Premier terme</li>
       <li>Deuxième terme</li>
       <li>Troisième terme</li>
</ol>

Résultat :

Les termes à connaître en priorité

  1. Premier terme
  2. Deuxième terme
  3. Troisième terme

Vous noterez cette fois que chaque élément de la liste est précédé d’un numéro indiquant son rang dans la liste.

Nous verrons dans un autre article les balises de structuration simple (non hiérarchique) du contenu.

Articles relatifs :

- Tableau des couleurs HTML

- HTML, la mise en forme du texte

- Faire défiler un texte en HTML

- HTML, organiser le contenu de votre page


© Tous les textes et documents disponibles sur ce site, sont, sauf mention contraire, protégés par une licence Creative Common (diffusion et reproduction libres avec l'obligation de citer l'auteur original et l'interdiction de toute modification et de toute utilisation commerciale sans autorisation préalable).

carre_trans Avec les mêmes mots-clefs
puce Recherche avancée sur Google
puce Vie privée : sécurisez votre navigation internet
puce Sécurisez vos échanges sous Android : chatter protégé
puce Sécurisez vos échanges : chatter protégé
puce Vie privée : sécurisez vos recherches internet
puce Gérer ses adresses e-mail d’envoi sous Gmail.com
puce Recherche avancée ou de l’usage des booléens
puce Apprendre à taper au clavier grâce à Dactylo 6.0
puce HTML, la mise en forme du texte
puce HTML, organiser le contenu de votre page : notions de base
puce La structure générale d’une page (X)HTML
puce Comment prendre une capture d’écran sous Windows XP et Vista
puce Comment faire un copier coller ?
puce Comment utiliser sa souris ?
puce Faire défiler un texte en HTML
puce Test du lecteur multimedia
puce Optimiser son contenu pour le référencement
puce HTML 5 un premier brouillon publié.
puce Codes couleurs HTML
puce Android et vie privée : Applications, permissions et localisation
puce Du vélo sous la pluie ou de l’art d’affronter les éléments
puce Microsoft étudiant : état des lieux des offres éducation 2013
puce 5 applications pour améliorer l’ergonomie de votre mobile Android.
puce Utiliser Python 101 : prise en main
puce Android : 5 applications pour améliorer votre productivité mobile.
puce Android : supprimer les sons de l’appareil photo du Galaxy Note 2.
Equipe Eclairement L'association
La lettre S'abonner
Facebook Twitter
Poésie   Histoire   Techniques   Urbanisme   Tutoriels pour débutant   Anime   Recherche d’information bibliographique   Spectacle   Installation   Littérature   BD   Cours   Bases de données   arts visuels   HTML   Photographie   Microsoft Office   Edito   Firefox   Europe   Droit   Fable   Pages Ouvertes   Séries TV   Roman   Musique   Android   Métier   Tutoriels   Théâtre   Linux   Peinture   Windows Vista   Vie privée   sport   Windows 7   Culture générale   Société   Education   Windows   Cinéma   Windows Mobile   Manga  
Eclairement © 1998 - 2012
Mentions légales - Contact - Partenaires