Mémento HTML 5 - Balises courantes
La structure HTML 5 Entête
<head>
<!-- DESCRIPTION DU DOCUMENT -->
<!DOCTYPE html> <title>Titre du document</title>
<html 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 charset="utf-8" /> <meta name="description" content="Description du
</head> contenu de la page Web en 150 caractères maximum." />
<meta name="date"
<body> content="2008-12-31T[Link]+01:00">
<!-- Commentaire --> <!-- ICONE DE FAVORIS -->
<p>VOTRE TEXTE</p> <link rel="shortcut icon" type="image/x-icon"
</body> href="[Link]" />
</html> <!-- FEUILLES DE STYLES CSS -->
<link type="text/css" rel="stylesheet" media="all"
Autres doctypes href="[Link]" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<style type="text/css">
"[Link] <!--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" /* Placez ici les directives CSS */
"[Link] -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" </style>
"[Link] <!-- JAVASCRIPT -->
<script src="[Link]" 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
< → < > → > " → " & → &
<p><strong>Attention</strong>, le texte est protégé par un
<em lang="en">copyright</em>.</p> Entités courantes
Retour de ligne br → Espace insécable « → « » → »
<p>Les programmes de Windows se trouvent dans : <br /> € → € © → © ® → ®
<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="[Link]
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="[Link] 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/[Link]" alt="Texte pour les aveugles"
width="480" height="320" />
<!-- Commentaire -->
Mémento HTML - Balises courantes
➊ 1/2
Citations et références Listes
Citations longues blockquote Listes ordonnées ol, li
<blockquote cite="[Link] <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="[Link] <dl>
adupont@[Link]</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="[Link]" 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 2014-09-24
Document publié selon les termes de la licence Creative Commons
<a href="[Link]">Titre de la page</a></p>
CC-BY-SA : [Link]
</iframe>
2/2
➋ Mémento HTML - Balises courantes
