Les balises XHTML - Introduction
Qu'est-ce qu'une balise XHTML ?
Une page HTML est un fichier texte contenant des balises, repères ou tags en anglais destinées à indiquer la nature du
contenu qu'elle encadre, en lui donnant un sens et permettant ainsi de mettre en forme le texte.
Les balises indiquent au navigateur Web comment doit être affiché un document.
Comment utiliser les balises XHTML ?
Pour utiliser correctement les balises XHTML il faut respecter la sémantique c'est à dire qu' une balise doit représenter un élément afin de lui donner un sens ce qui va permettre de donner une structure cohérente à votre page web et de surcroît la rendre accessible au plus grand nombre !
Une balise est un élément de texte (un nom) encapsulée entre le chevron inférieur < et le chevron supérieur >.
<balise>
Il existe 2 types de balises : les balises qui vont par paire <a></a> et les balises seules
<img />.
Les balises qui vont par paire comportent deux types de balise :
- Une qui est apellée "balise ouvrante" (
<a>) car elle ouvre un élément (ici c'est le lien), - Une autre qui est appelée "balise fermante" (
</a>) reconnaissable au slash "/" car elle indique la fin de l'élément.
Les balises qui sont seules sont appelées "auto-fermantes", car elles n'ont pas besoin d'une balise de fermeture.
Ces balises se referment grâce à "/>" exemple : <img /> la balise qui sert à insérer une image.
Une balise XHTML doit toujours être refermées !
Valeur de rendu des balises XHTML :
Les balises XHTML ont toutes par défaut une valeur de rendu CSS défini selon le bon vouloir de chaque navigateur.
Il existe deux groupes principaux de balises : les balises de rendu CSS "bloc" et les balises de rendu CSS "en-ligne" (ou "inline").
Il est particulièrement important de comprendre que :
- de leur structure HTML vont dépendre les imbrications et emboîtements autorisés,
- et de leur rendu CSS vont dépendre leurs comportements, positionnements, affichages, etc...
La différence fondamentale entre ces deux structures d'éléments est aisément compréhensible :
- les éléments de rendu "bloc" servent à distinguer les parties entières de texte (titres, des paragraphes, des listes, des citations, etc...),
- les éléments "en-ligne" sont prévus pour rester dans le texte pour l'enrichir (lien hypertexte, emphase, renforcement, etc...).
Exemple :
Élément possèdant un rendu CSS de type display: bloc;.
Élément possèdant un rendu CSS de type display: inline;.
Imbrications et emboitements des balises :
Les balises HTML ont la particularité de pouvoir être imbriquées de manière hiérarchique afin de permettre le cumul de leur propriétés.
En contrepartie le chevauchement de balises n'est pas autorisé.
Les imbrications et emboîtements autorisés vont dépendre de la structure HTML de l'élément et n'a rien à voir avec le rendu CSS.
En règle générale, un bloc peut contenir des éléments en-ligne mais aussi d'autres blocs. De leur côté, les balises en-ligne ne peuvent contenir que d'autres balises en-ligne.
Il existe deux type d'élément en-ligne : les éléments "remplacés" et les éléments "non-remplacés".
Les éléments "remplacés" sont les seuls qui possèdent des dimensions (height, width) par défaut.
Il s'agit des éléments <img>, <input>, <textarea>, <select> et <p>.
Tous les autres éléments inline ("non-remplacés") n'ont pas de dimension à proprement parlé par défaut (il n'occupent que la place minimum nécessaire à leur contenu).
Exemple :
Éléments "remplacés" :
le contenu de l'élément "img" est remplacé par l'image qu'indique l'attribut "src", auquel on peut attribuer une hauteur (height) et une largeur (width).
CSS ne définit pas la façon de déterminer ces dimensions intrinsèques (width/height).
L'élément "img" est de type inline avec un comportement de type block.
Le positionnement par défaut des éléments de rendu "bloc" et "en-ligne" :
- Les éléments de rendu "bloc" se placent toujours l'un en dessous de l'autre par défaut (comme un retour chariot). Un élément "bloc" occupe automatiquement par défaut toute la largeur disponible dans son conteneur.
- Les éléments de rendu "en-ligne" se placent toujours l'un à côté de l'autre afin de rester dans le texte (aucun retour chariot).
Exemple :
Élément possèdant un rendu CSS de type display: bloc;.
Élément possèdant un rendu CSS de type display: inline;.
Autre élément possèdant un rendu CSS de type display: inline;.
Autre élément possèdant un rendu CSS de type display: bloc;.
Code XHTML :
<div class="forceBlock"><p>Élément possèdant un rendu CSS de type display: bloc;.</p><p><span class="forceInline">Élément possèdant un rendu CSS de type display: inline;.</span><span class="forceInline">Autre élément possèdant un rendu CSS de type display: inline;.</span></p></div><p class="forceBlock">Autre élément possèdant un rendu CSS de type display: bloc;.</p>
Les balises en-ligne
Par défaut les balises de structure inline ne sont pas faites pour être positionnées sur la page et ne possédent pas de marges internes, ni externes contrairement aux balises de rendu bloc.
Le rendu CSS est de type display: inline;.
Les balises bloc
Les balises de structure block possèdent par défaut un rendu CSS de type display: bloc;.
Ce rendu leur permet de bénéficier de dimensions (hauteur, largeur, profondeur), de contenir d'autres éléments dimensionnés, de posséder des marges internes (padding) et externes (margin) mais également, et surtout, d'être positionnés, c'est à dire de contribuer à la mise en page du document.
Auteur : BBoux | Contact : | Site :
