CE SITE EST EN COURS DE CONSTRUCTION

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 :

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 :

La différence fondamentale entre ces deux structures d'éléments est aisément compréhensible :

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 :

image d'exemple représentant un bébé manchot nommé Tux É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" :

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 :

  1. <div class="forceBlock">
  2.   <p>
  3.     Élément possèdant un rendu CSS de type display: bloc;.
  4.   </p>
  5.   <p>
  6.     <span class="forceInline">
  7.       Élément possèdant un rendu CSS de type display: inline;.
  8.     </span>
  9.     <span class="forceInline">
  10.       Autre élément possèdant un rendu CSS de type display: inline;.
  11.     </span>
  12.   </p>
  13. </div>
  14. <p class="forceBlock">
  15.   Autre élément possèdant un rendu CSS de type display: bloc;.
  16. </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 :

Haut de page

McPeter à écrit le 08/04/2009 :

#1

Ouais de la balle !!

ça rox les mamouths !!

Fusco à écrit le 08/04/2009 :

#2

Moooooooooooooooooooooooorteeeeeeeeeeeeeelllll !!!

newneo à écrit le 08/04/2009 :

#3

C'est ici la fête ?!

Y'a quoi à boire ?!

Mattux_ à écrit le 08/04/2009 :

#4

mais c'est koi c'te daube en carton pâte ?

cobex4 à écrit le 08/04/2009 :

#5

s'toi la daube (avariée)