4) 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".

Précédent | 5/16 | Suivant

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.


 : un retour chariot.

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.