Aide-mémoire HTML - Tutoriel HTML & CSS

Les balises de bloc
Les balises en ligne
Les balises de sémantique en ligne
Les balises de sémantique bloc
Les listes
Les tableaux
Autres attributs
Rappel sur les adresses (liens et images)
Modèles pré-conçus

Voici toutes les balises nécessaires pour faire une page HTML 4.01 Strict, ainsi que quelques attributs.
Les balises et attributs de présentations ont été volontairements supprimés, car ils sont mieux traités en CSS.
Si vous avez compris le fonctionnement du HTML, cette page fera office d'aide-mémoire (voir de référence).

Note : cette page était là dans la première version. Étant donné qu'il existe des aides-mémoires aussi bien fait, voire plus complet, sur internet, il n'est pas sûr que je garde cette page dans le tutoriel. Voyez la page de liens.

Les balises de bloc

<h1></h1> : Titre de page (une seule fois en tout début),
<h2></h2> à <h6></h6> : Sous-titres (hiérarchisés du plus important (h2) au plus précis (h6)),
<p></p> : Paragraphe (la plupart des textes de vos pages s'y trouvent),
<div></div> : Division (bloc générique),

Les balises en ligne

<br> : Saut de ligne,
<a href="cible">Texte</a> : Lien Texte vers l'adresse cible,
<img src="adresse_image" alt="texte_alternatif" width="x" height="y"> : Image contenue dans le fichier adresse_image,
<a name="NomDeLAncre"></a> : Ancre (pour faire un lien vers une ancre : <a href="page.html#ancre">Texte_du_lien</a>),

Les balises de sémantique en ligne

<sup></sup> : Exposant,
<sub></sub> : Indice,

<em></em> : Amphase (EMphasized, en anglais) (usuellement en italique).
<strong></strong> : Amphase forte (usuellement en gras),

<abbr title="Signification">Abbr.</abbr> : Abréviation,
<acronym title="Signification">S.I.G.L.E.</acronym> : Sigle (innitiales),
<dfn></dfn> : Définition d'un terme ,
<cite></cite> : Citation,
<del cite="adresse" datetime="2004-02-18T00:00:00-05:00" title="Explication"></del> : Partie supprimée (bloc ou en ligne),
<ins cite="adresse" datetime="2004-02-18T00:00:00-05:00" title="Explication"></ins> : Partie insérée (bloc ou en ligne),

<code></code> : Code informatique,
<kbd></kbd> : Texte à rentrer par l'utilisateur (texte ou touche(s)),
<samp></samp> : Exemple de sortie,
<var></var> : Variable (mathématique ou informatique),

<span></span> : Bloc en ligne générique (utilisé pour définir une langue ou un style différent, par exemple),
q cite="" (short Quotation) : court : équivalent inline de blockquote

Les balises de sémantique bloc

<hr> : Ligne horizontale,
<blockquote cite="adresse"></blockquote> : Bloc de citation,
<adress></adress> : Informations de contact,
<del></del> et <ins></ins> sont aussi des blocs en ligne (c.f. plus haut),

Les listes

<ul></ul> : Liste non ordonnée (lise à puces, rondes ou carrées),
<ol></ol> : Liste ordonnée (numérotée, 1. pour le premier, 2., etc...),
<li></li> : Ligne de liste (impérativement à l'interieur d'un <ul> ou d'un <ol>),
<dl></dl> : Liste de définitions,
<dt></dt> : Item de Terme à définir,
<dd></dd> : Item de Définition.

Les tableaux

<table summary="Texte"></table> : Tableau, où summary (facultatif) décrit le contenu du tableau,
<caption></caption> : Légende de tableau (ne peut contenir que des blocs en ligne),
<thead></thead> : En-tête de tableau,
<tbody></tbody> : corps du tableau,
<tfoot></tfoot> : Pied de tableau,
<tr></tr> : Ligne de tableau (Table Row),
<td></td> : Celulle de tableau (Table Data),
<th></th> : Cellules d'en-tête pour tableaux.

Autres attributs

Ces attributs sont valables pour toutes les balises

title="info_bulle" : Informations complémentaires, habituellement affichées dans des info-bulles.
lang="fr" : Langue du contenu, si elle est différente de celle de la page : fr, en, de... ,
dir="" : Direction de lexture, de gauche à droite () ou de droite à gauche,
class="nom_classe" : Classe CSS,
id="nom_id" : Identifiant CSS ou Javascript,
style="règle_style" : Style CSS en ligne, fortement déconseillé (utiliser plutôt une classe),

Rappel sur les adresses (liens et images)

Les adresses absolues : adresse complète d'un fichier. Par exemple : http://www.kde.org/index.html ou encore C:\Site\index.html . Fortement déconseillé pour des liens à l'intérieur du site,
Les adresses relatives : adresse relative à la page courante d'un fichier. À utiliser pour lier une page ou une image du même site.
- "image.png" : ce fichier se trouve dans le même dossier que la page en cours,
- "fichiers/image.png" : ce fichier se trouve dans le sous dossier "fichiers/", relativement à l'emplacement de la page courrante,
- "../image.png" : ce fichier se trouve dans le dossier parent de celui qui contient la page en cours.

Modèles pré-conçus

Squelette de tout fichier HTML

Vous pouvez très bien faire un copier / coller de cette structure pour démarrer une nouvelle page (ce qui est dans le body est juste une suggestion de structure) :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
  <head>
    <title>Titre de la page</title>
  </head>
  <body>
    <h1>Titre de la page</h1>
    <p class="intro">Introduction</p>

    <h2>Première partie</h2>
    <p>Premier paragraphe</p>
  </body>
</html>

Squelette de deux listes imbriquées

<ul>
  <li>Ligne</li>
  <li>Ligne qui introduit la sous-liste :
    <ul>
      <li>Ligne</li>
    </ul>
  </li>
</ul>