Principales balises en html

Il existe beaucoup de balises html, mais on peut faire ici la liste courte des principales balises employées.

Une liste complète des balises sur le site "le site du zero".

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 est pourtant parfait pour décrire de l’info en ligne et colonne. Une table est un objet complexe, avec des entête, des lignes et des colonnes. Voici un exemple de structure simple :

<table>
<tr> <!-- Table Row, un rang-->
<!-- puis des Table Division à l'interieur (des cellules) -->
<td>Un</td><td>element</td><td>et</td><td>un</td><td>autre</td>
</tr>
<tr><!-- un autre rang-->
<td>Un</td><td>element</td><td>et</td><td>un</td><td>autre</td>
</tr>
</table>

Voir ici un article plus complet sur le site du zero.

form permet de définir un formulaire.

quote : sémantiquement, une citation.

<br> : un retour chariot.

HTML5 et de nouveaux tags de type "bloc"

La norme HTML5 a introduit un certain nombre de nouvelles balises, qui correspondent à des usages récurrents dans la construction de page web. Ces tags permettent d’éviter l’emploi du tag "div" qui n’a aucune valeur sémantique.
section permet de rassembler des éléments connectés à même contenu. Par exemple une galerie d’image avec son titre, descriptif et une série d’image ou un ensemble d’articles dans un blog.

article est voué à rassembler un ensemble d’informations reliées par un contenu thématique commun : par exemple un titre, sous-titre, nom d’auteur, texte et pièces jointes.

header est destiné à contenir un entête soit de toute une page web, soit d’une sous-partie. Un tag "article" peut posséder par exemple son tag "header".

nav est destiné à identifier une navigation

figure est prévu pour contenir une image et un descriptif associé, placé dans une balise "figcaption".

footer est destiné à recevoir l’information de base de page, mais comme header il peut s’agir du bas d’un contenu comme un article.

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.