Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> La classification des balises

La classification des balises

On peut classifier les balises selon plusieurs critères, leur physiologie (éléments vides et éléments non vides), contexte (éléments d'en-tête et éléments du corps), le degré d'exigence (balises obligatoires et balises facultatives), leur rôle (structuration, présentation), et enfin la façon d'apparaître dans le flux (en-ligne et bloc).

Bloc (block) et en-ligne (inline)

C'est la classification la plus importante et qui permet aux gens de bien comprendre le comportement des balises et leur rendu visuel par défaut dans la page. Ceci est aussi trop important dans certaines pratiques : par exemple l'imbrication de balises (on peut pas imbriquer un inline dans un bloc), le centrage des éléments (centrage horizontal, centrage vertical, centrage par marges négatives), connaître les propriétés de style applicables à une balise (par exemple les propriétés css width et height et les marges verticales c'est-à-dire margin-top et margin-bottom ne peuvent pas être appliquées à des balises de type en-ligne non remplacées) etc.

Vous trouverez dans ce tableau quelques exemples de chaque type :

Exemples de balises bloc et en-ligne

Balises "bloc" Balises "inline"
<p> et <pre> <em>
<blockquote> <strong>
<h1> . . . <h6> <q>
<ul> <sup> et <sub>
<ol> <a>
<div> <img />
<table> <input />
<form> <span>
<fieldset> <br />
<address> <object>
<dl> phrase elements

Eléments vides et éléments non vides

Eléments vides

Ce sont des balises qui commencent par le signe inférieur "<" suivi par le nom de la balise et un ou plusieurs attributs ainsi que leurs valeurs respectives, puis par une espace blanche (facultatif, mais recommandé), et enfin un slash "/" et le signe supérieur ">".

Le slash "/" permet de clôturer la balise en langage xhtml, mais si vous codez en html vous pouvez omettre cette barre oblique. Ce type de balises n'est pas fait pour encercler d'autres éléments (texte, autres balises etc.). Voici la syntaxe générale :

<nom-balise attributs-valeurs />

Eléments non vides

Ce sont des balises qui comportent deux repères : un pour l'ouverture, et l'autre pour la fermeture, ces balises ont la particularité d'encadrer d'autres éléments : balises (dans ce cas on parle d'imbrication de balises), ou du texte.

Les éléments non vides finissent par une balise de fermeture qui comprend un slash juste après le signe inférieur "<". Voici en gros la syntaxe : <nom-balise> éléments-enfants </nom-balise>.

En xhtml on doit toujours veiller à clôturer les balises (que ce soit pour les éléments vides ou non vides), mais en html c'est moins strict.

Eléments d'en-tête et éléments du corps

Eléments d'en-tête

Ce sont des éléments que vous placez entre les deux balises <head></head>, ces éléments ne s'affichent pas par le navigateur, parmi ces éléments il y a :

Eléments du corps

Ce sont toutes les balises dont l'objectif est de créer des éléments affichables par le navigateur et imprimables par l'imprimante, ce sont les balises qui dominent dans une page web, car avant tout une page web est destinée à être lue par des internautes.

Balises obligatoires et facultatives

Balises obligatoires

Elles sont contenues dans ce schéma minimal que doit avoir chaque page web :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title></title> </head> <body> </body> </html>

Comme vous pouvez le constater les balises obligatoires sont : <!DOCTYPE>, <html>, <head>, <title>, <body>.

Balises facultatives

Toutes les autres balises sont facultatives, celles du corps vous pouvez en insérer autant que vous voulez, celles de l'en-tête ça dépend, il y a certaines qui doivent être placées une seule fois (par exemple : <title>) et d'autres plusieurs fois (<meta>, <link>).

Balises de structuration et balises de présentation

Balises de structuration

Ce sont des balises qui permettent de structurer votre document, d'ajouter du sens à son contenu et d'insérer des éléments, grâce à ce type de balises vous pouvez définir par exemple : un paragraphe, une liste, une citation, des en-têtes, des images, des tableaux, des formulaires etc.

Balises de présentation

La plupart de ces balises sont en cours d'abandon suite à l'avènement des CSS, dans un DTD strict vous n'avez pas le droit de vous en servir, car tout ce qui se rapporte au rendu visuel doit être confié aux CSS, et la seule raison d'être du XHTML c'est la structuration des pages web. Parmi ces balises de présentation on peut citer : <font> (formatage de texte), <strike> (texte barré), <u> (texte souligné) etc.

Ces balises ne donnent pas de sens et ne permettent pas d'insérer des éléments, par exemple la balise <font> ne signifie rien, et ne permet pas d'insérer un élément.

Voilà je me suis profondément épuisé Avant de finir ce chapitre, j'espère qu'il vous a apporté une valeur ajoutée. Bon, ne croyez pas que vous en avez échapé pour de bon. Au fil des chapitres, je vais pas cesser d'évoquer certaines notions retenues dans ce didacticiel surtout ce qui concerne la première classification : balises bloc et en-ligne. Alors vaut mieux bien capter les choses

Lors du prochain chapitre, vous allez apprendre à insérer un texte pré-formaté avec la balise XHTML <pre> (preformatted text).

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau