Les balises HTML

Langage

Sémantique + Syntaxe = Communication
<balise>
Mot <balise attribut="valeur">Contenu</balise>
<balise/>
</balise>

Document = <!DOCTYPE> + <html> + <head> + <body>

Principes d’XHTML
• Une balise doit être fermée
• Les balises et attributs doivent s’écrire en minuscules
• La valeur d’un attribut doit s’écrire entre
apostrophes ou guillemets
• Un attribut doit avoir une valeur
• Les balises doivent être fermées dans le bon ordre

Bloc / en ligne

• Bloc : Peut contenir des bloc et des en ligne
bloc

• En ligne : Peut contenir des en ligne
en

+ des données !

Attributs globaux
Attributs que l’on va pouvoir
utiliser sur toutes les balises

• Core
• id : nom
• class : nom de classe(s)
• style : CSS en ligne
• title : tooltip — infobulle
• i18n
• lang : langue du contenu
• dir : direction du texte
• events
• on* : événements

bloc

<html>
Représente un document HTML.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mon document</title>
</head>
<body>
<h1>Bienvenue !</h1>
</body>
</html>

Note : l’attribut xmlns="http://
www.w3.org/1999/xhtml" est obligatoire.

bloc

<head>
Représente les méta-informations du document.

<head>
<meta http-equiv="Content-Type" content= "text/html;
charset=UTF-8" />
<title>Mon document</title>
</head>

Note : Il ne doit y avoir qu’une balise
<head> et <body> par document.

bloc

<body>
Représente le corps du document.

<body>
<h1>Bienvenue !</h1>
<p>Ce site voue un culte à Friedrich Nietzsche.</p>
</body>

Note : ne peut pas contenir de en ligne directement.

bloc

<div>
Neutre.
Permet de regrouper.

<div>
<p>Je voudrais donner, prodiguer ma sagesse…</p>
<p>Il me faudra pour cela descendre dans les…</p>
<p>Il me faudra comme toi décliner, ainsi que disent…</p>
</div>

en ligne

<span>
Neutre.
Permet de regrouper.

<p>Il me faudra comme toi
<span><em>décliner<sup>1</sup></em><span>, ainsi que
disent les hommes vers lesquels je veux descendre.</p>

bloc

<h1…6>
Représentent des titres,
permettent de hiérarchiser le document.

<h1>Les aliments</h1>
<h2>Les légumes</h2>
<h3>La patate</h3>
<h3>La tomate</h3>
<h2>Les fruits</h2>
<h3>Le kiwi</h3>
<h3>La banane</h3>

Note : ne peuvent pas contenir de bloc

bloc

<p>
Représente un paragraphe de texte.

<p>Je voudrais donner, prodiguer ma sagesse, jusqu’au jour
où les sages d’entre les hommes se sentiront heureux de
leur folie, les pauvres heureux de leur richesse.</p>

Note : ne peut pas contenir de bloc

en ligne

<a>
Représente un lien hypertexte.

Attributs :
• href : adresse du lien
• hreflang : langue de la page ou section ciblée

<a href="http://google.fr">Un lien absolu</a>
<a href="/news/">Un lien relatif</a>

<a href="#moteur-de-recherche">Un lien interne</a>

Note : ne peut pas contenir de <a>

en ligne

<em>/<strong>
Mise en exergue (ajoute de l’importance).
<strong> est plus important que <em>

<p>Attention, c’est <em>important</em> !</p>

<p>Faites <strong>très</strong> attention !</p>

en ligne

<abbr>/<acronym>
Représente une abréviation (HTML, SNCF)
Représente un acronyme (Laser, Sida).

<p>Aujourd’hui, c’est cours de <abbr title="HyperText
Markup Language">HTML</abbr>.</p>

<p>Attention au <acronym title="RAdio Detection And
Ranging">Radar</acronym> !</p>

bloc <blockquote>
en ligne <q>/<cite>

Représente une citation.

<blockquote>
<p>Je voudrais donner, prodiguer ma sagesse, jusqu’au jour où les
sages d’entre les hommes se sentiront heureux de leur folie, les
pauvres heureux de leur richesse.</p>
</blockquote>

<p>Hamlet commença son monologue : <q>Être ou ne pas être ?</q></p>

Note : <blockquote> ne peut pas contenir
de en ligne directement.

en ligne

<sup>/<sub>
Mise en exposant.
Mise en indice.

<p>C’était ma 1<sup>ère<sup> fois…</p>

<p>J’aime l’<abbr title="Eau">H<sub>2</sub>O</abbr>.</p>

en ligne

<ins>/<del>
Représente un texte inséré.
Représente un texte supprimé.

<p>Jean-Claude Vandamme est un <del>philosophe<del>
<ins>acteur<ins> d’origine belge.</p>

bloc

<pre>
Représente du texte pré-formaté.

<pre>
(__)
(oo)
/-------/
/ | ||
* ||----||
~~ ~~
</pre>

Note : ne peut pas contenir de <sup>, <sub>,
<img/>, <object>

en ligne
<code>/<var>
<kbd>/<samp>
Représente du contenu lié à l’informatique.

<pre><code>
<var>$x</var> = 3;
echo <var>$x</var>; // Affiche <samp>3</samp>
</code></pre>

<p>Tapez <kbd>1</kbd> pour voter pour
Cunégonde, et <kbd>2</kbd> pour voter pour
Pierre-Alfred.</p>

en ligne

<img/>
Représente une image.

Attributs obligatoires :
• src : adresse du ﬁchier
• alt : texte alternatif

<img src="images/chatons.jpg" alt="De mignons lolcats" />

bloc

<map>
Représente des zones pour une image.

• id : nom de l’ensemble de zones

<map id="monde">
<area shape="rect" coords="0,0,100,90" href="france.html"
alt="France" />
</map>

en ligne

<area/>
Représente une zone.
• alt : texte alternatif
Attributs :
• shape : forme de la zone
• coords : coordonnées de la zone
• href : adresse du lien

<map id="monde">
<area shape="rect" coords="0,0,100,90" href="france.html"
alt="France" />
</map>

bloc

<ul>/<ol>/<li>
Représente une liste.
<p>Liste de courses :</p> <p>À faire aujourd’hui :</p>
<ul> <ol>
<li>Pizza</li> <li>Sortir le chien</li>
<li>Patates</li> <li>Manger</li>
<li>Boissons <li>Cours HTML
<ul> <ul>
<li>Bière</li> <li>Finir le cours !</li>
<li>Vodka</li> <li>Donner le cours</li>
</ul> </ul>
</li> </li>
</ul> </ol>

Note : <ul> et <ol> ne peuvent contenir
que des <li> directement.

bloc

<dl>/<dt>/<dd>
Représente une liste de déﬁnitions.

<dl>
<dt>Le kiwi</dt>
<dd>C’est un fruit, mais aussi un animal</dd>
<dt>Le litchi</dt>
<dd>Un excellent fruit exotique</dd>
</dl>

Note : <dt> ne peut pas contenir de bloc

bloc

<form>
Représente un formulaire.
• action : adresse de soumission
Attributs :
• method : type de requête
• enctype : content-type pour la soumission

<form method="post" action="inscription.php">
…
</form>

Note : ne doit pas contenir d’autres <form>.

en ligne

<input/>
Représente un champ de formulaire.

Attributs :
• type : type de champ
• name : nom de la donnée (utilisé pour traiter le formulaire)
• value : valeur du champ
• maxlength : taille maximale de la saisie (en caractères)

• checked : coché ?
• disabled : désactivé ?
• readonly : en lecture seule ?

en ligne

<input/>
Représente un champ de formulaire.

<input type="text" name="prenom" />
<input type="password" name="mot-de-passe" />

<input type="checkbox" name="accepte" />
<input type="radio" name="sexe" />

<input type="file" name="avatar" />

<input type="submit" />
<input type="reset" />
<input type="button" value="Bouton inutile" />

<input type="hidden" name="sid" value="123" />

en ligne
<select>
<optgroup>/<option>
Représente une liste déroulante.
Attributs (<select>) :
• multiple : permet de choisir plusieurs options
Attributs (<optgroup>) :
• label : nom du groupe d’options
Attributs (<option>) :
• value : valeur du champ
• selected : sélectionné ?

en ligne
<select>
<optgroup>/<option>
Représente une liste déroulante.

<select name="pays">
<option value="ca">Canada</option>
<option value="jp" selected="selected">Japon</option>
<optgroup label="Europe">
<option value="fr">France</option>
<option value="de">Allemagne</option>
</optgroup>
</select>

en ligne

<textarea>
Représente un champ de saisie de texte.
• rows : nombre de lignes
• cols : nombre de colonnes
Attributs :

<textarea name="description" rows="3" cols="80">…</textarea>

Note : <textarea> ne peut contenir que du texte.

en ligne

<button>
Représente un bouton.

Attributs :
• type : type de bouton

<button type="submit">Envoyer</button>
<button type="reset">Recommencer</button>
<button type="button">Bouton inutile</button>

Note : ne doit pas contenir <input>, <select>,
<textarea>, <label>, <button>, <form>,
<fieldset>, <iframe>.

en ligne

<label>
Représente une étiquette associée à un champ.

Attributs :
• for : cible de l’étiquette

<label for="email">Adresse mail :</label>
<input type="text" id="email" name= "mail" />

Note : ne peut pas contenir d’autres <label>.

bloc

<fieldset>
Représente une section de formulaire.

<fieldset>
<legend>Informations personnelles</legend>
</fieldset>

Note : doit contenir <legend> directement.

en ligne

<legend>
Représente un titre de section de formulaire.

<fieldset>
<legend>Informations personnelles</legend>
</fieldset>

bloc

<table>
Représente un tableau de données.

Attributs :
• summary : résumé du tableau

<table summary="…">
<thead>
<tr>
<th>Nom<th>
<th>Prénom</th>
</tr>
</thead>
…
</table>

bloc
<thead>/<tfoot>
<tbody>
Représente des sections de tableau.
<table summary="…">
<thead>
<tr>
<th>Nom<th>
<th>Prénom</th>
</tr>
</thead>
<tfoot>…</tfoot>
<tbody>
<tr>
<td>Abitbol</td>
<td>Georges</td>
</tr>
</tbody>
</table>

bloc
<tr>
<th>/<td>
Représente une ligne de tableau.
Représente une cellule d’en-tête.
Représente une cellule.

Attribut (<th>) :
• scope : spéciﬁe les données qui doivent être associées à ce
<th> (col ou row)
Attributs (toutes) :
• rowspan : nombre de cellules à fusionner sur la ligne
• colspan : nombre de cellules à fusionner sur la colonne

en ligne

<caption>
Représente une légende de tableau.

<table>
<caption>Tableau très intéressant</caption>
…
</table>

Note : doit se trouver directement après <table>.

en ligne

<title>
Représente le titre du document.

<title>La page web de ma vie</title>

en ligne

<meta/>
Représente une méta-information du document.

Attribut obligatoire :
• content : l’information
Attributs :
• name : nom de la méta-information
• http-equiv : nom de l’en-tête HTTP

<meta name="auteur" content="Nicolas Le Gall" />

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

en ligne

<link/>
Représente une relation entre documents.

Attributs :
• type : type MIME du contenu
• href : adresse du document
• media : support pour lequel la relation est faite

<link rel="stylesheet" type="text/css" href="…" media="screen" />

en ligne

<base/>
Déﬁnis l’adresse de base à utiliser
pour les adresses relatives.

Attribut obligatoire :
• href : adresse de base

<base href="http://example.org/site/" />

Je vous déconseille…
<b>, <i>, <u>, <s>, <strike>, <big>, <small>, <tt>,
<center>,
<basefont>, <font>,
<frame>, <frameset>, <noframes>,
<applet>,
<noscript>

(<br/>)

Il en reste…

<script>, <style>,
<object>, <param/>,
<iframe>,
<address>, <hr/>, <bdo>, <dfn>

Commentaires

Contact

Nicolas Le Gall
me@neovov.com
twitter.com/neovov

Les balises HTML

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à Les balises HTML

Similaire à Les balises HTML (20)

Dernier

Dernier (13)

Les balises HTML