09. Les principales bases HTML standards

Il existe une soixantaine de balises différentes. Nous ne verrons que les 14 principales.

Les principales balises inline


<span> Dépourvu d'un sens précis, peut servir à regrouper d'autres éléments inline. Son équivalent est <div>.
exemple d'utilisation: <span class="auteur">un texte</span>


<a> Désigne un lien hypertexte. S'accompagne de l'attribut href, qui renferme la cible du lien. Peut s'accompagner de l'attribut title pour afficher une infobulle.
exemple d'utilisation: <a href='www.jeuxvideo.com'>accéder à jeuxvideo.com</a>


<img> Inclut une image dans un document. S'accompagne des attributs alt (texte alternatif pour malvoyant ou navigateur en mode texte) et src (indiquant le chemin de l'image).
exemple d'utilisation: <img alt='poisson' src='www.jeuxvideo.com/poisson.png' />


<em> Met en emphase (souvent italique) une portion de texte.
exemple d'utilisation: <p>Voici un texte<em> important</em>.</p>


<strong> Indique un renforcement, généralement représenté en gras.
exemple d'utilisation: <p>Comme le dit toujours ma mémé : <q>il ne faut<strong> surtout pas</strong> vendre la peau de l'ours avant de l'avoir tué</q>.</p>


<q> S'utilise pour les citations courtes.
exemple d'utilisation: <p>Comme je le dis toujours : <q>D'incolores idées vertes dorment furieusement</q></p>




Les principales balises de type bloc


<div> Conteneur générique de type bloc. Sert à regrouper d'autres balises de type bloc ou en ligne.
exemple d'utilisation: <div><p>Voici un texte <em>important</em>.</p><p>Voici un autre texte</p>.</div>


<p> Désigne un paragraphe de texte. Ne peut contenir d''éléments de type bloc.
exemple d'utilisation: <p>Un paragraphe de texte</p>


<h1>, <h2>, ... <h6> Les six différents niveaux de titre.
exemple d'utilisation: <h1>Un titre principal</h1>


<ol>, <ul> Désignent des listes ordonnées (<ol>) ou à puces simples (<ul>). Comportent exclusivement des éléments de type liste (<li>).
exemple d'utilisation:
<ul>
<li>premier objet de la liste</li>
<li>second objet de la liste</li>
</ul>


<table>Tableau contenant des données. Les cellules sont d'abords rassemblées sous forme de lignes (<tr>).
exemple d'utilisation:
<table>
<tr>
<td>cellule</td>
<td>autre cellule</td>
</tr>
</table>


<form> Délimite un formulaire interactif. Contient généralement des éléments d'interface (champs de texte, boutons de validation, cases à cocher, etc.) Cet élément doit renfermer immédiatement d'autres éléments de type bloc.
exemple d'utilisation:
<form action="pagesuivante.php" method="get">
<p>
<input type="text" name="recherche" />
<input type="submit" value="ok" />
</p>
</form>


<blockquote> Introduit des citations longues.
exemple d'utilisation: <p>Comme le dit toujours ma grand-mère : </p><blockquote><p>il ne faut<strong> pas</strong> vendre la peau de l'ours avant de l'avoir tué</p>
<p>non non, il ne faut pas ! </p></blockquote>


<dl> Liste de définitions. Distingue les titres (<dt>) des éléments de définition (<dd>).
exemple d'utilisation:
<dl>
<dt>Titre de l'élément</dt>
<dd>Description de l'élement</dd>
<dd>Suite de la description</dd>
</dl>


accéder à l'article suivant