Vous êtes sur la page 1sur 2

Mémento XHTML - Balises courantes

La structure XHTML Entête


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <head>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- DESCRIPTION DU DOCUMENT -->
<html xmlns="http://www.w3.org/1999/xhtml" <title>Titre du document</title>
xml:lang="fr" lang="fr"> <meta http-equiv="content-type"
<head> content="text/html;charset=utf-8" />
<title>TITRE DU DOCUMENT</title> <meta name="author" content="Albert Dupont" />
<meta http-equiv="content-type" <meta name="description" content="Description du
content="text/html;charset=utf-8" /> contenu de la page Web en 150 caractères maximum." />
</head> <meta name="date"
<body> content="2008-12-31T05:00:00+01:00">
<!-- Commentaire --> <!-- ICONE DE FAVORIS -->
<p>VOTRE TEXTE</p> <link rel="shortcut icon" type="image/x-icon"
</body> href="favicon.ico" />
</html> <!-- FEUILLES DE STYLES CSS -->
<link type="text/css" rel="stylesheet" media="all"
Autres doctypes href="style.css" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <style type="text/css">
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" /* Placez ici les directives CSS */
"http://www.w3.org/TR/html4/strict.dtd"> -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" </style>
"http://www.w3.org/TR/html4/loose.dtd"> <!-- JAVASCRIPT -->
<script src="script.js" language="javascript"
Texte courant type="text/javascript"></script>
<script type="text/javascript">
Titres h1, h2, ..., h6 <!--
// Placez ici le code Javascript
<h1>Titre de la page</h1> Voir aussi la balise //-->
<h2>Titre de 2e niveau</h2> <title> en section </script>
<h3>Titre de 3e niveau</h3> Entête
... </head>
<h6>Titre de 6e niveau</h6> Autre encodage courant :
<meta http-equiv="content-type"
Paragraphe p
content="text/html;charset=iso-8859-1" />
<p>Un simple paragraphe.</p>
Entités obligatoires
Emphase simple et forte em, strong
&lt; → < &gt; → > &quot; → " &amp; → &
<p><strong>Attention</strong>, le texte est protégé par un
<em lang="en">copyright</em>.</p> Entités courantes
Retour de ligne br &nbsp; → Espace insécable &laquo; → « &raquo; → »
<p>Les programmes de Windows se trouvent dans : <br /> &euro; → € &copy; → © &reg; → ®
<code>C:\Program files</code></p>
Hyperliens
Abréviation abbr
Lien a
<p>La <abbr title="Société nationale des chemins de
fer">SNCF</abbr> existe depuis 1938</p> <!-- Hyperlien vers une page Web -->
<a href="http://www.example.com"
Indice et exposant sub, sup title="Explication du lien">Texte cliquable</a>

<p>Le 2<sup>e</sup> élément de l'H<sub>2</sub>O est <!-- Hyperlien vers une adresse email -->
l'oxygène.</p> <a href="mailto:adupont@example.com">Envoyez-nous un
email</a>
Définition d'un terme dfn
Ancre nommée a
<p>L'<dfn>eau</dfn> est un composé chimique, très
courant sur le Terre, [...]</p> <a id="identifiant_unique"
name="identifiant_unique">Texte</a>
Orientation du texte bdo
<p dir="ltr">Il a dit : <q><bdo dir="rtl">‫<السلم عليكم‬/bdo> Images
(<em>Was-salaam alaykum</em>)</q>.</p>
Image img
Commentaires <img src="images/photo.jpg" alt="Texte pour les aveugles"
width="480" height="320" />
<!-- Commentaire -->

Mémento XHTML - Balises courantes


➊ 1/2
Citations et références Listes
Citations longues blockquote Listes ordonnées ol, li
<blockquote cite="http://abu.cnam.fr/"> <ol>
<p>Une embuscade était probable.</p> <li>1er élément de la liste</li>
<p>Trente grenadiers, détachés en éclaireurs et <li>2e élément de la liste</li>
commandés par un sergent, marchaient [...]</p> <li>3e élément de la liste</li>
<cite>Victor HUGO, Quatre-vingt Treize.</cite> </ol>
</blockquote>
OL CSS - list-style-type : none|decimal|lower-roman|upper-
Citation courtes q roman|lower-alpha|upper-alpha
Listes non-ordonnées (puces) ul, li
<p>Il dit : <q>Fermez la porte !</q></p>
<ul>
Référence à un document cite <li>1er élément de la liste</li>
<li>2e élément de la liste</li>
<p>C'est V. Hugo qui a écrit <cite>Ruy Blas</cite>.</p>
<li>3e élément de la liste</li>
Auteur de la page Web address </ul>

<address> UL CSS - list-style-type : none|disc|circle|square


Albert Dupont,<br /> Listes de termes dl, dt, dd
<em>Journaliste, spécialiste Web 2.0</em>,<br />
<a href="mailto:adupont@monjournal.com"> <dl>
adupont@monjournal.com</a> <dt>Terme 1</dt>
</address> <dd>Définition du terme 1</dd>
<dt>Terme 2</dt>
<dd>Définition du terme 2</dd>
Texte technique <dt>Terme 3</dt>
Texte préformaté pre <dd>Définition du terme 3</dd>
</dl>
<pre>$a = "fr_FR";
setlocale(LC_ALL, $a);
date_default_timezone_set('Europe/Paris');
Tableaux
</pre> Tableaux simples table, tr, th, td, caption
Code source et variable code, var <table width="240" border="1">
<caption>Légende du tableau</caption>
<p>La commande <code>$a="fr_FR"</code> permet <tr>
d'affecter une valeur à la variable <var>$a</var>.</p> <th width="40%">Titre col. 1</th>
<th width="30%">Titre col. 2</th>
Commandes keyb, samp
<th width="30%">Titre col. 3</th>
<p>Si vous tapez la commande <keyb>del mydir</keyb>, le </tr>
programme répondra <samp>C:\mydir\*, êtes-vous sûr <tr>
(O/N) ?</samp>. Répondez : <keyb>N</keyb>.</p> <td>Données l1 : col1</td>
<td>Données l1 : col2</td>
<td>Données l1 : col3</td>
Balises génériques </tr>
Elément Bloc générique div <tr>
<td>Données l2 : col1</td>
<div class="avertissement"> <td>Données l2 : col2</td>
<p><strong>Attention</strong></p> <td>Données l2 : col3</td>
<p>Le formatage peut causer la perte de données.</p> </tr>
</div> </table>
Fusion des cellules dans un tableau:
Elément en-ligne générique span
<td colspan="2"> Cellule fusionnée sur 2 colonnes</td>
<p>La fonction <span class="fonction">trim</span> retire <td rowspan="2"> Cellule fusionnée sur 2 lignes</td>
les espaces des extrémités de chaine.</p>
Balises obsolètes
Attributs génériques ... ou en passe de le devenir
<p class="classe_css" id="id_unique" title="etiquette" tt, i, b, big, small, hr, frame, frameset
style="color:#FF0000" >Texte de la balise</p>
Balises non décrites dans ce document
‣ map et area (zones cliquables)
Cadre incorporé
‣ object, embed et param (incorporation de médias)
<iframe src="page.html" width="480" height="240" ‣ form, input, select, textarea, etc. (formulaires)
name="inclusion1"> ‣ del et ins (versionning)
<p>Votre navigateur ne peut malheureusement pas
afficher de cadre incorporé. Vous pouvez appeler
la page incorporée par ce lien: Auteur : Eric Bellot. Mis à jour le 2010-01-24
Document publié selon les termes de la licence Creative Commons
<a href="page.html">Titre de la page</a></p>
CC-BY-SA : http://creativecommons.org/licenses/by-sa/2.0/fr/
</iframe>

2/2
➋ Mémento XHTML - Balises courantes

Vous aimerez peut-être aussi