En-tête de la page
meta : balise permettant de déclarer au navigateur et aux moteurs de recherche des informations importantes : langue, mots-clés, description, auteur, charset (codage du texte).
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
script : permet de placer du code (javascript souvent) directement ou dans un fichier attaché.
<script src='javascript-public.js' type='text/javascript' language='javascript'></script>
link : permet de lier des pages externes : feuilles de style css ou fichiers backend.
<link href='bloc-video.css' rel='stylesheet' type='text/css' media='screen' />
style : permet de déclarer des comportements css directement dans le head.
<style type='text/css'>
<!--
#bandeau { background-image: url(./IMG/bandeau/bandeau.png); }
-->
</style>Corps de la page, éléments de type bloc
h1, h2,... h6 : permettent de déclarer des titres, 6 niveaux disponibles.
p permet de créer un paragraphe.
ul et li permettent de structurer des listes d’élément, typiquement la navigation par exemple. Se code comme ceci :
<ul>
<li>un element</li>
<li>un autre</li>
</ul>ul signifie "unsorted list", liste non-ordonnée. Il existe le couple ol-li pour les listes ordonnées (avec des chiffre générés automatiquements, ou des lettres). Mais aussi le trio dl-dd-dt. Sémantiquement, c’est une définition list, une liste de termes et de leur définition. On code comme ça :
<dl>
<dd>Un terme</dd>
<dt>La définition de ce terme</dt>
<dd>Un deuxième terme</dd>
<dt>La définition de ce deuxième terme</dt>
</dl>div est un element de type bloc sans valeur sémantique. Il signifie seulement "division". Il est beaucoup utilisé, notamment pour structurer les grandes sections de la page (tete de page, navigation, corps et footer).
table permet de structurer un tableau. Trop utilisé au bon vieux temps du html 4, il es pourtant parfait pour décrire de l’info en ligne et colonne.
form permet de définir un formulaire.
quote : sémantiquement, une citation.
Corps de la page, éléments de type "inline"
img : à l’affichage, l’élément est remplacé par l’image que pointe son attribut src. <img src="monimage.gif" />
a : définit un lien. Contient un attribut href qui donne l’adresse vers laquelle pointe le lien. <a href="lien.html>texte du lien</a>
em : sémantiquement une emphase. Met en italique une portion de texte dans un texte normal et en normal dans un texte en italique. Remplace la balise <i> dépréciée.
strong : met en gras une portion de texte. Remplace la balise <b> dépréciée.
span : équivalent de div car sémantiquement neutre.