You are on page 1of 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="text/html;charset=utf-8" /> content="Desc. du document (150 car. max.)" />
</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"
Doctype transitional href="style.css" />
<style type="text/css">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <!--
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
/* Placez ici les directives CSS */
-->
Texte courant </style>
<!-- JAVASCRIPT -->
Titres h1, h2, ..., h6 <script src="script.js" language="javascript"
type="text/javascript"></script>
<h1>Titre de la page</h1> Voir aussi la balise <script type="text/javascript">
<h2>Titre de 2e niveau</h2> <title> en section <!--
...
Entête // Placez ici le code Javascript
<h6>Titre de 6e niveau</h6>
//-->
</script>
Paragraphe p </head>
<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>
Tableaux
Abréviation abbr
<p>La <abbr title="Société nationale des chemins de Tableaux simples table, tr, th, td, caption
fer">SNCF</abbr> existe depuis 1938</p> <table width="640">
<caption>Légende du tableau</caption>
Indice et exposant sub, sup <tr>
<th width="40%">Titre col. 1</th>
<p>Le 2<sup>e</sup> élément de l'H<sub>2</sub>O est
<th width="30%">Titre col. 2</th>
l'oxygène.</p>
<th width="30%">Titre col. 3</th>
</tr>
Définition d'un terme dfn <tr>
<p>L'<dfn>eau</dfn> est un composé chimique, très <td>Données ligne1 : colonne1</td>
courant sur le Terre, [...]</p> <td>Données ligne1 : colonne2</td>
<td>Données ligne1 : colonne3</td>
Orientation du texte bdo </tr>
<tr>
<p dir="ltr">Il a dit : <q><bdo dir="rtl">‫<السلم عليكم‬/bdo> <td>Données ligne2 : colonne1</td>
(<em>Was-salaam alaykum</em>)</q>.</p> <td>Données ligne2 : colonne2</td>
<td>Données ligne2 : colonne3</td>
<tr>
Attributs génériques </table>
<p class="classe_css" id="id_unique" title="etiquette"
style="color:#FF0000" >Texte de la balise</p>

Mémento XHTML - Balises courantes 1/2


Listes Images
Listes ordonnées ol, li Image img
<ol> <img src="images/photo.jpg" alt="Texte pour les aveugles"
<li>1er élément de la liste</li> width="480" height="320" />
<li>2e élément de la liste</li>
<li>3e élément de la liste</li>
</ol> Balises génériques

OL CSS - list-style-type : none|decimal|lower-roman|upper- Elément Bloc générique div


roman|lower-alpha|upper-alpha <div class="avertissement">
<p><strong>Attention</strong></p>
Listes non-ordonnées (puces) ul, li <p>Le formatage peut causer la perte de données.</p>
<ul> </div>
<li>1er élément de la liste</li>
<li>2e élément de la liste</li> Elément en-ligne générique span
<li>3e élément de la liste</li>
<p>La fonction <span class="fonction">trim</span> retire
</ul>
les espaces des extrémités de chaine.</p>
UL CSS - list-style-type : none|disc|circle|square
Listes de termes dl, dt, dd Texte technique
<dl> Texte préformaté pre
<dt>Terme 1</dt>
<dd>Définition du terme 1</dd> <pre>
<dt>Terme 2</dt> $a = "fr_FR";
<dd>Définition du terme 2</dd> setlocale(LC_ALL, $a);
<dt>Terme 3</dt> date_default_timezone_set('Europe/Paris');
<dd>Définition du terme 3</dd> </pre>
</dl>
Code source et variable code, var

Hyperliens <p>La commande <code>$a="fr_FR"</code> permet


d'affecter une valeur à la variable <var>$a</var>.</p>
Lien a
Commandes keyb, samp
<a href="http://www.domain.com"
title="Explication du lien">Texte cliquable</a> <p>Si vous tapez la commande <keyb>del mydir</keyb>, le
programme répondra <samp>C:\mydir\*, êtes-vous sûr
Ancre nommée a (O/N) ?</samp>. Répondez : <keyb>N</keyb>.</p>

<a id="identifiant_unique"
name="identifiant_unique">Texte</a> Cadre incorporé
<iframe src="page.html" width="480" height="240"
Citations et références name="inclusion1">
<p>Votre navigateur ne peut malheureusement pas
Citations longues blockquote afficher de cadre incorporé. Vous pouvez appeler
<blockquote cite="http://abu.cnam.fr/"> la page incorporée par ce lien:
<p>Une embuscade était probable.</p> <a href="page.html">Titre de la page</a></p>
<p>Trente grenadiers, détachés en éclaireurs et </iframe>
commandés par un sergent, marchaient [...]</p>
<cite>Victor HUGO, Quatre-vingt Treize.</cite> Commentaires
</blockquote>
<!-- Commentaire -->
Citation courtes q
<p>Il dit : <q>Fermez la porte !</q></p> Balises obsolètes
... ou en passe de le devenir
Référence à un document cite
tt, i, b, big, small, hr, frame, frameset
<p>C'est V. Hugo qui a écrit <cite>Ruy Blas</cite>.</p>
Balises non décrites dans ce document
Auteur de la page Web address
‣ map et area (zones cliquables)
<address> ‣ object, embed et param (incorporation de médias)
Albert Dupont,<br />
<em>Journaliste, spécialiste Web 2.0</em>,<br /> ‣ form, input, select, textarea, etc. (formulaires)
<a href="mailto:adupont@monjournal.com"> ‣ del et ins (versionning)
adupont@monjournal.com</a>
</address> Auteur : Eric Bellot. Mis à jour le 2009-10-18
Document publié selon les termes de la licence Creative Commons
CC-BY-SA : http://creativecommons.org/licenses/by-sa/2.0/fr/

2/2 Mémento XHTML - Balises courantes

You might also like