Structurez votre site !

Insérer des citations

Tous les éléments de base du HTML sont en place. Vous êtes passé du journal manuscrit à sa version en ligne en un clin d'oeil en vous servant des éléments <p>, <h1>, <h2> et <img>. Il est temps d'insérer des éléments supplémentaires afin d'embellir le site de Marc.

Nous pourrions par exemple insérer des citations à différents endroits de la page: une courte citation de Lao Tseu à insérer entre guillemets et une citation plus longue, sous forme de slogan, à mettre en valeur dans un nouveau bloc.

Le langage HTML distingue ces deux types de citations à l'aide de deux balises:

• Citation en ligne
  L'élément <q> permet de baliser une citation située dans une partie d'un paragraphe. Afin de mettre en évidence le contenu de cette balise, la plupart des navigateurs affichent des guillemets autour du texte.
  

  Citation courte en HTML

  

  Affichage d'une citation courte par un navigateur

• Citation en bloc
  L'élément <blockquote> permet de baliser une citation qui constitue à elle-même un nouveau paragraphe. Afin de mettre en évidence le contenu de cette balise, la plupart des paragraphes crée un nouveau paragraphe qu'ils indentent.
  
  

  Citation longue en HTML

  

  Affichage d'une citation longue par un navigateur

Comme nous pouvons le constater à partir des exemples ci-dessus, <q> et <blockquote> son deux types d'éléments distincts: l'élément <blockquote> est un élément de type bloc et l'élément <q> est un élément en-ligne. Notons que les éléments de type bloc s'affichent toujours comme s'il y avait un saut de ligne avant et après, tandis que les éléments en-ligne s'affichent dans le cours du texte de la page:

Notez que les navigateurs ignorent les tabulations, les sauts de ligne et la plupart des blancs qui se trouvent dans le code HTML. Ils ne se fient qu'aux balises pour savoir où placer un saut de ligne ou de paragraphe. Dès lors, n'hésitez pas à aérer votre code HTML avec des espaces, des retours de chariot et des indentations pour en faciliter la lecture. Les sauts de ligne sont affichés par le navigateur lorsque vous utilisez un élément de type bloc. Dans ce cas, le navigateur recourt au saut de lignes pour mettre le bloc en évidence.

Vous pouvez penser aux éléments de type bloc comme aux éléments principaux de votre page web et aux éléments en-ligne comme servant à baliser des petites parties de contenu. A la phase de conception d'une page, on commence la plupart du temps par les parties les plus conséquentes (les éléments de type bloc) puis on ajoute les éléments en-ligne au moment des finitions.

La récompense viendra lorsque nous en serons au stade de pouvoir contrôler la présentation HTML avec les feuilles de style CSS. Connaître la différence entre un élément en-ligne et un élément de type bloc s'avérera alors capitale.

Insérer des sauts de lignes

Afin d'obtenir un rendu de la publicité «Dubonnet» sur plusieurs lignes comme désiré, nous pourrions mettre chaque mot dans un élément de type bloc. Néanmoins, il existe un élément forçant le navigateur à appliquer un saut de ligne à l'endroit indiqué: l'élément <br>.

Comme il ne sert qu'à faire un saut de ligne, l'élément <br> est un élément spécial qui ne possède pas de contenu. Dès lors, plutôt que d'écrire <br> </br>, qui n'a guère de sens, nous utilisons plutôt l'abréviation <br>. Cette abréviation est pratique dans la mesure où elle diminue la quantité de balisage dans le HTML. Notez que l'élément <img>, rencontré précédemment et sur lequel nous reviendrons par la suite, est également un élément vide, c'est-à-dire exempt de contenu.