Balises

<a>, <abbr>, <acronym>, <area />, <bdo>, <blockquote>, <body>, <br />, <button>, <caption>, <cite>, <code>, <dd>, <del>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <head>, <hr />, <html>, <i>, <img />, <input />, <ins>, <label>, <legend>, <li>, <link />, <map>, <meta />, <noscript>, <object>, <ol>, <optgroup>, <option>, <p>, <param />, <pre>, <q>, <samp>, <script>, <select>, <span>, <strong>, <style>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <title>, <tr>, <u>, <ul>

Détail des balises

<a>
INLINE
Lien hypertexte
<a href="http://www.hei.fr" target="_blank">HEI</a>
HEI

<abbr>
INLINE
Abréviation
<abbr title="eXtensible HyperText Markup Language" lang="uk">XHTML</abbr>
XHTML

<acronym>
INLINE
Acronyme (à la différence de l'abréviation, l'acronyme peut se prononcer comme un mot)
<acronym title="Light Amplification by Stimulated Emission of Radiation" lang="uk">LASER</acronym>
LASER

<area />
INLINE
Zone réactive.
La balise <area /> possède obligatoirement un attribut alt. L'attribut shape permet de définir quel type de zone on souhaite dessiner :"rect" (rectangle), "circle" (cercle) ou "poly" (polygone).L'attribut coords permet de définir les coordonnées associées à la figure géométrique choisie : "x1, y1, x2, y2" (pour un rectangle), "x, y, rayon" (pour un cercle),"x1,y1,x2,y2,x3,y3,...xn,yn" (pour un polygone).
<img src="img/bob.jpg" width="100" height="142" alt="bob" usemap="#bob">
<map name="bob" id="maMap">
<area shape="rect" coords="13,5,59,22" href="http://www.hei.fr" alt="casque de bob" />
</map>
Cliquez sur mon casque :

bob casque de bob

<bdo>
INLINE
Sens de lecture d'un texte.
L'attribut dir définit le sens de lecture, il comprend 2 valeurs : ltr (left to right) et rtl (right to left).

<P>Voici un joli palindrome :<p>
<bdo dir="rtl">Esope reste ici et se repose</bdo>

Voici un joli palindrome :

Esope reste ici et se repose

<blockquote>
BLOCK
Bloc de citation. On utilise cette balise dans le cas de citation longue (sur plusieurs lignes).
<p>Jean-Paul Sartre</p>
<blockquote lang="fr">Dans la vie on ne fait pas ce que l'on veut mais on est responsable de ce que l'on est.</blockquote>
Jean-Paul Sartre
Dans la vie on ne fait pas ce que l'on veut mais on est responsable de ce que l'on est.
André Frossard
Il a été décidé qu'on reparlerait, dès les petites classes, d'éducation civique, d'honnêteté, de courage, de refus du racisme et d'amour de la République. Il est dommage que l'école ne soit fréquentée que par les enfants.

<body>
BLOCK
C'est le corps du document de la page web qui contient tous les éléments du contenu.
La balise <body> est placée juste en dessous de la balise </head>.

<html>
<head>
<title>Titre de la page</title>
</head>
<body>
<p>Hello</p>
</body>
</html>

<br />
INLINE
Retour à la ligne
<p>Bonjour tout le monde.<br />Vive le <abbr>WWW</abbr></p>

Bonjour tout le monde.
Vive le WWW

<button>
INLINE
bouton de formulaire

<button>Valider le <strong>formulaire</strong></button>

<caption>
BLOCK
Légende d'un tableau de données
<caption>Liste des ingrédients</caption>
Liste des ingrédients
Pâte sablée Crème d'amande

250 g de farine type 55 tamisée
125 g de beurre
125 g de sucre semoule
1 œuf entier (50 g)
2.5 g de sel (1% de la farine)

 50 g de beurre
50 g de sucre
50 g de poudre d'amande
50 g d'oeuf (1oeuf = 50 g)

<cite>
INLINE
Source d'un citation
<p>
     <q>Exige beaucoup de toi-même et attends peu des autres. Ainsi beaucoup d'ennuis te seront épargnés.</q>
     <cite>Confucius</cite>
</p>

Exige beaucoup de toi-même et attends peu des autres. Ainsi beaucoup d'ennuis te seront épargnés. Confucius

<code>
INLINE
Code informatique
Pour afficher un message d'alerte en JavaScript,
tapez <code>alert("coucou")</code>.
Pour afficher un message d'alerte en JavaScript,
tapez alert("coucou").

<dd>
BLOCK

description de définition.
La balise <dd> s'utilise avec les balises <dl> et <dt>

<p>Termes et définitions :</p>
<dl>
     <dt>Appareil</dt>
     <dd>mélange d’ingrédients qui entrent dans la composition d’une recette pâtissière.</dd>
     <dt>Abaisse</dt>
     <dd>l’abaisse est un morceau de pâte que l’on aplatie selon la forme et l’épaisseur que l’on souhaite.</dd>
</dl>

Termes et définitions :

Appareil
mélange d’ingrédients qui entrent dans la composition d’une recette pâtissière.
Abaisse
l’abaisse est un morceau de pâte que l’on aplatie selon la forme et l’épaisseur que l’on souhaite.

<del>
INLINE
Texte supprimé
<p>Il ne faut pas écrire <del>manger</del> mais danger !</p>

Il ne faut pas écrire manger mais danger !

<dfn>
INLINE
Définition d'un terme
<p>
<dfn>Tourer : <dfn>allonger un pâton de feuilletage, puis le plier en 3 ou en 4.
</p>

Tourer : allonger un pâton de feuilletage, puis le plier en 3 ou en 4.

<div>
BLOCK
Elément générique neutre.
La balise <div> peut contenir toute sorte de balises. Elle n'a aucun sens et n'apporte rien d'un point de vue sémantique.
Elle est souvent employée pour regrouper d'autres balises dans des zones par thème de manière un former un bloc. Nous pouvons ensuite positionner ce bloc n'importe où sur le site via les styles CSS ou en manipulant la DOM via JavaScript.

<div>
<p>Entrée</p>
<p>Plat</p>
<p>Dessert</p>
</div>

<dl>
BLOCK
Liste de définitions
La balise <dd> s'utilise avec les balises <dl> et <dt>
<p>Termes et définitions :</p>
<dl>
     <dt>Appareil</dt>
     <dd>mélange d’ingrédients qui entrent dans la composition d’une recette pâtissière.</dd>
     <dt>Abaisse</dt>
     <dd>l’abaisse est un morceau de pâte que l’on aplatie selon la forme et l’épaisseur que l’on souhaite.</dd>
</dl>

Termes et définitions :

Appareil
mélange d’ingrédients qui entrent dans la composition d’une recette pâtissière.
Abaisse
l’abaisse est un morceau de pâte que l’on aplatie selon la forme et l’épaisseur que l’on souhaite.

<dt>
BLOCK
Terme à définir
La balise <dd> s'utilise avec les balises <dl> et <dt>
<p>Termes et définitions :</p>
<dl>
     <dt>Appareil</dt>
     <dd>mélange d’ingrédients qui entrent dans la composition d’une recette pâtissière.</dd>
     <dt>Abaisse</dt>
     <dd>l’abaisse est un morceau de pâte que l’on aplatie selon la forme et l’épaisseur que l’on souhaite.</dd>
</dl>

Termes et définitions :

Appareil
mélange d’ingrédients qui entrent dans la composition d’une recette pâtissière.
Abaisse
l’abaisse est un morceau de pâte que l’on aplatie selon la forme et l’épaisseur que l’on souhaite.

<em>
INLINE
Mise en exergue générique.
Cette balise donne de l'importance au texte, mais moins que la balise <strong>.
De nombreux navigateurs affichent le texte en italique.
<p>Le <abbr>XHTML</abbr> est une <em>abréviation</em> ainsi qu'une manière de <strong>structurer la page</strong>.</p>

Le XHTML est une abréviation ainsi qu'une manière de structurer la page.

<fieldset>
BLOCK
Regroupement dans un formulaire.
Cette balise permet de regrouper des champs et informations de même thème ou de même nature.
<form action="">
     <fieldset>
          <legend>Informations personnelles</legend>
          Nom : <input type="text" name="Nom" />
          Prénom : <input type="text" name="Prenom" />
     </fieldset><br>
     <fieldset>
          <legend>Informations bancaires</legend>
          N°carte : <input type="text" name="NumCarte" />
          cryptogramme : <input type="text" name="cryptogramme" />
     </fieldset>
</form>
Informations personnelles Nom : Prénom :

Informations bancaires N°carte : cryptogramme :

<form>
BLOCK

Formulaire dans une page web.
La balise <form> ne doit contenir directement que des éléments de type BLOC. La balise <form> doit au moins posséder l'attribut action dont la valeur définit l'url de la page qui recevra les données du formulaire saisies par l'utilisateur. Il existe d'autres attributs : method (définit la méthode d'envoi des informations : en GET ou POST), name (définit le nom du formulaire), id (définit l'identifiant du formulaire)... La balise <form> ne peut pas contenir d'autres balises <form>.

<form action="traitement.php">

</form>

<h1> <h2> <h3> <h4> <h5> <h6>
BLOCK
h1 : élément hierarchique de niveau 1 : niveau hiérarchique le plus élevé de la page
h2 : élément hierarchique de niveau 2
h3 : élément hierarchique de niveau 3
h4 : élément hierarchique de niveau 4
h5 : élément hierarchique de niveau 5
h6 : élément hierarchique de niveau 6 : niveau hiérarchique le plus bas de la page

<h1>Je suis un titre de niveau 1</h1>
<h2>Je suis un titre de niveau 2</h2>
<h3>Je suis un titre de niveau 3</h3>
<h4>Je suis un titre de niveau 4</h4>
<h5>Je suis un titre de niveau 5</h5>
<h6>Je suis un titre de niveau 6</h6>

Je suis un titre de niveau 1

Je suis un titre de niveau 2

Je suis un titre de niveau 3

Je suis un titre de niveau 4

Je suis un titre de niveau 5
Je suis un titre de niveau 6

<head>
BLOCK
En-tête de la page web.
Tout ce que l'on insère dans la balise sont les en-têtes de document : <title>, <meta>, <link>, <script>. Ces en-têtes ne s'affichent pas dans le corps du document.
<html>
<head>
     <title>Mon super site Web !!!</title>
     <meta name="keywords" lang="fr" content="HEI" />
     <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
</body>
</html>

<hr />
BLOCK
séparation horizontale symbolisée par une ligne
<div>
     <p>Ici, mon premier paragraphe</p>
     <hr />
     <p>Ici, mon deuxième paragraphe</p>
</div>

Ici, mon premier paragraphe

Ici, mon deuxième paragraphe

<html>
BLOCK

Elément racine de la page web.
La balise <html> définit le début du document html. Aucune balise ne doit se trouver au-dessus de la balise <html>, ni en dessous de la balise </html>

<html>
<head>
     <title>Mon super site Web !!!</title>
     <meta name="keywords" lang="fr" content="HEI" />
     <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
</body>
</html>

<i>
INLINE
Mise en italique.
<p>Le <abbr>XHTML</abbr> est une <i>abréviation</i> ainsi qu'une manière de <strong>structurer la page</strong>.</p>

Le XHTML est une abréviation ainsi qu'une manière de structurer la page.

<img />
INLINE

Image intégrée dans la page web. La balise <img /> doit obligatoirement contenir un attribut src (source) et alt (texte alternatif).

<img src="img/php.gif" width="130" height="80" alt="PHP">
<img src="img/php.gif" height="60" alt="PHP">
<img src="img/php.gif" height="40" alt="PHP">

PHP PHP PHP

<input />
INLINE
Champ de formulaire.
La balise <input /> possède un attribut type dont les valeurs correspondent à différents types de champs de formulaires : text (champ texte), checkbox (case à cocher), radio (bouton radio), file (champ fichier), image (soumission avec une image), password (mot de passe), submit (soumission du formulaire), reset (initialisation du formulaire), hidden (champ caché), button (bouton générique).
<form action="">
<fieldset>
<legend>Informations</legend>
<label for="nom">Nom</label> :
<input type="text" name="monNom" id="nom" />
<label for="prenom">Prénom</label> :
<input type="text" name="monPrenom" id="prenom" />
<hr />
<input type="checkbox" name="maNewsletter" id="newsletter" />
<label for="newsletter">Recevoir la newsletter</label>
HEI
<hr />
<input type="radio" name="monSexe" id="homme" />
<label for="homme">Homme</label>
<input type="radio" name="monSexe" id="femme" />
<label for="femme">Femme</label>
<hr />
<label for="photo">Photo</label> :
<input type="file" name="maPhoto" id="photo" />
<hr />
<label for="pass">Mot de passe</label> :
<input type="password" name="monPass" id="pass" />
<hr />
<label for="champCacher">Champ caché</label> :
<input type="hidden" name="monChampCacher" id="champCacher" />
<hr />
<label for="bouton">Un bouton</label> :
<input type="button" name="monBouton" id="bouton" value="Cliquez ici!" />
<hr />
<label for="initialize">Réinitialiser le formulaire</label> :
<input type="reset" name="monInitialize" id="initialize" />
<hr />
<label for="image">Soumission avec une image</label> :
<input type="image" name="monImage" id="image" src="img/fleche_droite.gif" />
<hr />
<label for="soumission">Soumission traditionnelle</label> :
<input type="submit" name="maSoumission" id="soumission" />
</fieldset>
</form>
Informations : :
HEI
:
:
:
:
:
:
:

<ins>
INLINE
texte inséré
Le XHTML <del>d&eacute;structure</del> <ins>structure</ins> la page web.
Le XHTML déstructure structure la page web.

<label>
INLINE
Etiquette d'un champ de formulaire.
La balise <label> possède un attribut for qui fait référence à l'attribut id d'un champ de formulaire. Cela permet ainsi d'associer la balise <label> avec le champ auquel elle correspond.
<form action="">
     <fieldset>
          <legend>Informations</legend><br/>
          <label for="nom">Nom</label> :<input type="text" name="nom" id="nom" />
          <label for="prenom">Prénom</label> : <input type="text" name="prenom" id="prenom" />
     </fieldset>
</form>
Informations
: :

<legend>
INLINE
Légende du regroupement dans un formulaire.
La balise <legend> est obligatoirement associée à la balise <fieldset> qui la précède.
<form action="">
     <fieldset>
          <legend>Informations personnelles</legend>
          Nom : <input type="text" name="Nom" />
          Prénom : <input type="text" name="Prenom" />
     </fieldset><br>
     <fieldset>
          <legend>Informations bancaires</legend>
          N°carte : <input type="text" name="NumCarte" />
          cryptogramme : <input type="text" name="cryptogramme" />
     </fieldset>
</form>
Informations personnelles Nom : Prénom :

Informations bancaires N°carte : cryptogramme :

<li>
BLOCK
Elément d'une liste.
Cette balise peut faire partie d'une liste non-ordonnée (<ul>) ou ordonnée (<ol>).
<p>Voici une liste non-ordonnée :</p>
<ul>
     <li>Le HTML est accessible</li>
     <li>Le HTML est structuré</li>
     <li>Le HTML est donne un sens à vos page web</li>
</ul>

<p>Voici une liste ordonnée :</p>
<ol>
     <li>Le HTML est accessible</li>
     <li>Le HTML est structuré</li>
     <li>Le HTML est donne un sens à vos page web</li>
</ol>

Voici une liste non-ordonnée :

  • Le HTML est accessible
  • Le HTML est structuré
  • Le HTML est donne un sens à vos page web

Voici une liste ordonnée :

  1. Le HTML est accessible
  2. Le HTML est structuré
  3. Le HTML est donne un sens à vos page web

<link />
INLINE
Ajout d'un lien externe dans une page web.
Un lien externe permet d'intégrer certains éléments dans une page web comme par exemple des styles CSS externes.
<link rel="stylesheet" type="text/css" href="style.css" />

<map>
BLOCK

Image réactive.
La balise <map> regroupe les différentes zones réactives d'une même image. Elle regroupe donc les balises <area/ >.
La balise <map> possède obligatoirement un identifiant (attribut id). L'attibut "name" permet de faire réference à l'image sur laquelle on veut intégrer un ou plusieurs zones réactives. A noter que la valeur de l'attribut id doit être identique à celle de l'attribut "name".

<img src="img/bob.jpg" width="100" height="142" alt="bob" usemap="#bob">
<map name="bob" id="maMap">
<area shape="rect" coords="13,5,59,22" href="http://www.hei.fr" alt="casque de bob" />
</map>
Cliquez sur mon casque :

bob casque de bob

<meta />
INLINE
Méta-informations.
La balise <meta /> vous donne des infos sur la description de la page web, ses mots-clés, son auteur, les règles spécifiques destinées aux robots des moteurs de recherches, la langue de la page web... L'attribut content est obligatoire. Ces balises <meta /> sont plus ou moins prises en compte par les moteurs de recherche.

<html>
<head>
     <title>Mon super site Web !!!</title>
     <meta name="keywords" lang="fr" content="HEI" />
     <meta name="description" content="Description de ma page web." />
     <meta http-equiv="Content-Language" content="fr" />
     <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
</body>
</html>

<noscript>
BLOCK
Affiche un texte alternatif aux scripts.
La balise <noscript> permet d'afficher un texte si le navigateur de l'internaute n'interprète pas les scripts (l'interprétation des scripts pouvant être aussi désactivée volontairement).

<script type="text/javascript">
alert("I love HTML");
</script>
<noscript>
I love HTML !
</noscript>

<object>
INLINE
Objet dans une page web.
Un objet peut être une animation flash, une applet java, un fichier audio...
<object type="audio/mpeg" data="img/CrashTestDummies-MmmMmmMmmMmm.mp3" width="200" height="100">
<param name="src" value="img/CrashTestDummies-MmmMmmMmmMmm.mp3">
<param name="autoplay" value="false">
<param name="autoStart" value="0">
alt : <a href="img/CrashTestDummies-MmmMmmMmmMmm.mp3">Crash Test Dummies - Mmm Mmm Mmm Mmm.mp3</a>
</object
alt : Crash Test Dummies - Mmm Mmm Mmm Mmm.mp3

<ol>
BLOCK

Liste ordonnée.
Même si la balise <ol> est une balise de type BLOC, elle ne peut contenir que des balises <li>

<p>Voici une liste non-ordonnée :</p>
<ul>
     <li>Le HTML est accessible</li>
     <li>Le HTML est structuré</li>
     <li>Le HTML est donne un sens à vos page web</li>
</ul>

<p>Voici une liste ordonnée :</p>
<ol>
     <li>Le HTML est accessible</li>
     <li>Le HTML est structuré</li>
     <li>Le HTML est donne un sens à vos page web</li>
</ol>

Voici une liste non-ordonnée :

  • Le HTML est accessible
  • Le HTML est structuré
  • Le HTML est donne un sens à vos page web

Voici une liste ordonnée :

  1. Le HTML est accessible
  2. Le HTML est structuré
  3. Le HTML est donne un sens à vos page web

<optgroup>
INLINE
Groupe d'options
La balise <optgroup> s'utilise avec les balises <select> et <option>
Cette balise utilise obligatoirement l'attribut label.
<select>
     <optgroup label="europe">
          <option>France</option>
          <option>Angleterre</option>
     </optgroup>
     <optgroup label="amérique">
          <option>Etats-Unis</option>
          <option>Mexique</option>
     </optgroup>
</select>

<option>
INLINE
Elément d'une liste déroulante.
La balise <select> s'utilise avec les balises <select> et <optgroup> (optionnelle).
<select>
     <optgroup label="europe">
          <option>France</option>
          <option>Angleterre</option>
     </optgroup>
     <optgroup label="amérique">
          <option>Etats-Unis</option>
          <option>Mexique</option>
     </optgroup>
</select

<p>
BLOCK

paragraphe.
La balise <p> peut contenir du texte, toutes sortes de balises en ligne mais aucune balise de type BLOC (pas de balises <h1> à <h6>, ni de balise <p> ou de <div>...

<div>
     <h3>Le titre de mon site WEB</h3>
     <p>Une place pour le dessert</p>
</div>

Le titre de mon site WEB

Une place pour le dessert

<param />
INLINE
Paramètres d'objet
<object type="application/x-shockwave-flash" data="/flash/animFlash.swf" width="831" height="143">
     <param name="movie" value="/flash/animFlash.swf" />
     <param name="quality" value="high" />"
     <param name="wmode" value="transparent" />"
</object>

<pre>
BLOCK

Inserer un bloc de code.
La balise <pre> affiche exactement ce que l'on y met. Elle permet d'afficher les tabulations, sauts de lignes... C'est pour ces raisons qu'elle est employée pour afficher rapidement des tableaux de données, des listes de prix... Il ne peut pas être contenu dans une balise <p> et ne peut avoir pour enfant que des balises de type EN LIGNE

<pre>
Bonjour à tous
Le HTML est un langage informatique !
A bientôt!
</pre> 
	Bonjour à tous
	Le HTML est un langage informatique !
	A bientôt!

<q>
INLINE
citation courte.
L'attribut cite contient la référence de la citation. L'attribut lang définit la langue dans laquelle la citation est écrite.
<p>
     <q lang="fr">Exige beaucoup de toi-même et attends peu des autres. Ainsi beaucoup d'ennuis te seront épargnés.</q>
     <cite>Confucius</cite>
</p>

Exige beaucoup de toi-même et attends peu des autres. Ainsi beaucoup d'ennuis te seront épargnés. Confucius

<samp>
INLINE
sortie de code informatique.
<samp>Vive le HTML</samp>.
Vive le HTML.

<script>
BLOCK
Incorporer des scripts.
La balise <script> vous permet soit d'importer un script externe, soit d'utiliser directement un script à même la page.

<html>

<head>
<script type="text/javascript" src="monscript.js"></script>
</head>

<body>
<script type="text/javascript">
alert("Au secours");
</script>
</body>
</html>

<select>
INLINE
Liste déroulante.
La balise <select> s'utilise avec les balises <option> et <optgroup>(optionnelle). Cette balise n'est pas obligatoirement intégrée à un formulaire.
<select>
     <optgroup label="europe">
          <option>France</option>
          <option>Angleterre</option>
     </optgroup>
     <optgroup label="amérique">
          <option>Etats-Unis</option>
          <option>Mexique</option>
     </optgroup>
</select>

<span>
INLINE

Elément générique neutre.
La balise <span>, comme la balise <div>, n'a aucune sémantique. Elle peut contenir des balises EN LIGNE ayant un sens, mais en aucun cas des balises de type BLOC.

<p>Il fait <span style="font-size:20px">beau</span> aujourd'hui</p>

Il fait beau aujourd'hui

<strong>
INLINE
Mise en exergue importante.
Cette balise donne de l'importance au texte, bien plus que la balise <em>.
<p>Il fait <strong>beau</strong> aujourd'hui</p>

Il fait beau aujourd'hui

<style>
BLOCK

Styles CSS.
Ainsi, la balise <style> vous permet d'attribuer des styles CSS spécifiques à la page web, on parle alors de styles CSS internes. Cette manière de procéder est déconseillée d'un point de vue conceptuel et technique. Il est préférable d'utiliser des styles CSS externes : la feuille de styles est alors importer par la page web (voir la balise <link>).

<html>
<head>
     <style>
          * {padding:0px;margin:0px;}
          body {background-color:#ffffff;}
     </style>
</head>
<body>
<p>mon texte</p>
</body>
</html>

<sub>
INLINE
Mise en indice
La formule chimique du méthane est CH<sub>4</sub>
La formule chimique du méthane est CH4

<sup>
INLINE
Mise en exposant
Le nombre 1000 peut aussi s'écrire 10<sup>3</sup>
Le nombre 1000 peut aussi s'écrire 103

<table>
BLOCK
Tableau de données
<table>
				<caption>Liste des ingrédients</caption>
				<tr>
				<td>P&acirc;te sabl&eacute;e</td>
				<td>Cr&egrave;me d'amande</td>
				</tr>
				<tr>
				<td>
				250&nbsp;g de farine type 55 tamis&eacute;e<BR />
				125&nbsp;g de beurre<BR />
				125&nbsp;g de sucre semoule<BR />
				1&nbsp;&oelig;uf entier (50&nbsp;g)<BR />
				2.5&nbsp;g de sel (1% de la farine)
				</td>
				<td>
				50&nbsp;g de beurre<BR />
				50&nbsp;g de sucre<BR />
				50&nbsp;g de poudre d'amande<BR />
				50&nbsp;g d'oeuf (1oeuf = 50&nbsp;g)
				</td>
				</tr>
				</table>
Liste des ingrédients
Pâte sablée Crème d'amande

250 g de farine type 55 tamisée
125 g de beurre
125 g de sucre semoule
1 œuf entier (50 g)
2.5 g de sel (1% de la farine)

 50 g de beurre
50 g de sucre
50 g de poudre d'amande
50 g d'oeuf (1oeuf = 50 g)

<tbody>
BLOCK
Groupe de cellules de corps d'un tableau de données.
Cette balise doit obligatoirement se trouver après la balise <thead> et <tfoot>. 
<table>

				 <caption>Liste</caption>

				  <thead>
				  <tr>
				   <td>Aliment</td>
				   <td>Prix</td>
				   <td>Poids</td>
				  </tr>
				  </thead>

				  <tfoot>
				  <tr>
				   <td>Total</td>
				   <td>35</td>
				   <td>1400</td>
				  </tr>
				  </tfoot>

				  <tbody>
				  <tr>
				   <th>Poisson</th>
				   <td>20</td>
				   <td>500</td>
				  </tr>
  <tr>
				   <th>Viande</th>
				   <td>15</td>
				   <td>900</td>
				  </tr>
				  </tbody>

				</table>
Liste
Aliment Prix Poids
Total 35 1400
Poisson 20 500
Viande 15 900

<td>
BLOCK
Cellule d'un tableau de données
<table>
  <tr>
   <td>Poisson</td>
   <td>20</td>
   <td>500</td>
  </tr>
  <tr>
   <td>Viande</td>
   <td>15</td>
   <td>900</td>
  </tr>
</table>
Poisson 20 500
Viande 15 900

<textarea>
INLINE
Champ de texte multiple dans un formulaire.
La balise <label> possède un attribut for qui fait référence à l'attribut id d'un champ de formulaire. Cela permet ainsi d'associer la balise <label> avec le champ auquel elle correspond. 
<form>
  <fieldset>
  <legend>Informations sur vous</legend>
  <label for="description">Description</label> : <br />
  <textarea rows="4" cols="50" name="moi">Je suis enseignant à HEI...</textarea>
  </fieldset>
</form>
Informations sur vous :

<tfoot>
BLOCK
Groupe de cellules de pied d'un tableau de données
<table>

 <caption>Liste</caption>

  <thead>
  <tr>
   <td>Aliment</td>
   <td>Prix</td>
   <td>Poids</td>
  </tr>
  </thead>

  <tfoot>
  <tr>
   <td>Total</td>
   <td>35</td>
   <td>1400</td>
  </tr>
  </tfoot>

  <tbody>
  <tr>
   <th>Poisson</th>
   <td>20</td>
   <td>500</td>
  </tr>
  <tr>
   <th>Viande</th>
   <td>15</td>
   <td>900</td>
  </tr>
  </tbody>

</table>
Liste
Aliment Prix Poids
Total 35 1400
Poisson 20 500
Viande 15 900

<th>
BLOCK
Cellule d'en-tête d'un tableau de données
<table>
  <tr>
   <th>Aliment</th>
   <th>Prix</th>
   <th>Poids</th>
  </tr>
  <tr>
   <td>Poisson</td>
   <td>20</td>
   <td>500</td>
  </tr>
  <tr>
   <td>Viande</td>
   <td>15</td>
   <td>900</td>
  </tr>
</table>
Aliment Prix Poids
Poisson 20 500
Viande 15 900

<thead>
BLOCK

Groupe de cellules d'en-tête d'un tableau
Cette balise doit obligatoirement se trouver avant la balise <tbody>. 

<table>

 <caption>Liste</caption>

  <thead>
  <tr>
   <td>Aliment</td>
   <td>Prix</td>
   <td>Poids</td>
  </tr>
  </thead>

  <tfoot>
  <tr>
   <td>Total</td>
   <td>35</td>
   <td>1400</td>
  </tr>
  </tfoot>

  <tbody>
  <tr>
   <th>Poisson</th>
   <td>20</td>
   <td>500</td>
  </tr>
  <tr>
   <th>Viande</th>
   <td>15</td>
   <td>900</td>
  </tr>
  </tbody>

</table>
Liste
Aliment Prix Poids
Total 35 1400
Poisson 20 500
Viande 15 900

<title>
INLINE
Titre du document de la page web.
La balise <title> vous permet de donner un titre au document HTML.
Ce titre s'affichera tout en haut du navigateur.
<html>
<head>
     <title>Mon super site Web !!!</title>
     <meta name="keywords" lang="fr" content="HEI" />
     <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
</body>
</html>

<tr>
BLOCK
Ligne d'un tableau de données.
Elle permet de regrouper les cellules d'une même ligne. 
<table>
  <tr>
   <th>Aliment</th>
   <th>Prix</th>
   <th>Poids</th>
  </tr>
  <tr>
   <td>Poisson</td>
   <td>20</td>
   <td>500</td>
  </tr>
  <tr>
   <td>Viande</td>
   <td>15</td>
   <td>900</td>
  </tr>
</table>
Aliment Prix Poids
Poisson 20 500
Viande 15 900

<u>
INLINE
texte souligné
Le XHTML <u>structure</u> la page web.
Le XHTML structure la page web.

<ul>
BLOCK

Liste non-ordonnée.
Même si la balise <ul> est une balise de type BLOC, elle ne peut contenir que des balises <li>

<p>Voici une liste non-ordonnée :</p>
<ul>
     <li>Le HTML est accessible</li>
     <li>Le HTML est structuré</li>
     <li>Le HTML est donne un sens à vos page web</li>
</ul>

<p>Voici une liste ordonnée :</p>
<ol>
     <li>Le HTML est accessible</li>
     <li>Le HTML est structuré</li>
     <li>Le HTML est donne un sens à vos page web</li>
</ol>

Voici une liste non-ordonnée :

  • Le HTML est accessible
  • Le HTML est structuré
  • Le HTML est donne un sens à vos page web

Voici une liste ordonnée :

  1. Le HTML est accessible
  2. Le HTML est structuré
  3. Le HTML est donne un sens à vos page web