<h1>, <h2>, <h3>, <h4>, <h5>, <h6> : ce sont les structures de base pour obtenir un plan de votre texte. Ces balises définissent les titres (« h » comme Header, c'est-à-dire en-têtes) de différents niveaux (comme titre1, titre2, titre3, etc. dans un traitement de texte).

Ainsi ce code source :

          Bla bla
          bla.
          <h1>Un titre</h1>
          Bla bla bla.
          Bla bla bla.
          <h2>Un sous-titre</h2>
          Bla bla bla.
          Bla bla bla.
          <h2>Un autre sous-titre</h2>
          Bla bla bla.
          Bla bla bla.
          <h1>Un autre titre</h1>
          Bla bla bla.
          Bla bla bla.
      

produira ce résultat :

<p> : retour à la ligne impératif (P pour Paragraph). Vous avez sans doute remarqué que les retours à la ligne dans le code source n'ont aucun effet sur le résultat affiché. (Si ce n'est pas le cas regardez les 3 premiers «  bla » de l'exemple précédent, et comparer leur disposition dans le code source et dans le résultat affiché.) Vous devrez donc forcer les retours à la ligne. Cela correspond à l'appui sur la touche Entrée dans un traitement de texte.

L'utilisation de la balise fermante </p> est inutile (pour l'instant).

<ul>, <ol>, <li> : tout ce qu'il faut pour faire des listes, numérotées ou non. Les éléments de liste sont définis par <li> (pour List Item), qu'ils soient numérotés ou non. C'est le type de liste <ul> (pour Un-numbered List) ou <ol> (pour Ordered List) qui définit la présence ou pas de numérotation.

Ainsi ce code source :

          Une liste non numérotée:
            <ul>
            <li>un,
            <li>deux,
            <li>trois.
          </ul>
          Une liste numérotée:
          <ol>
            <li>un,
            <li>deux,
            <li>trois.
          </ol>
      

produira ce résultat :

<em>, <strong>, <kbd> : les seules balises de mise en valeur que nous verrons. Elle ne définissent pas la présentation, mais le type de texte. Ce type sera traduit à l'écran d'une manière à peu près identique dans tous les navigateurs, mais ce n'est pas garanti (et cela n'a d'ailleurs aucune importance).

Ainsi ce code source :

          Le texte peut être mis en valeur de plusieurs manières, qui
          se traduisent <em>par
          des italiques</em>,
          <strong>du
          gras</strong> ou
          <kbd>une police à
          chasse
          fixe</kbd>. Mais on
          <strong>peut
          <em>aussi
          <kbd>imbriquer</kbd>
          les</em>
          <kbd>styles</kbd></strong>.
      

produira ce résultat :

<hr> : un trait horizontal (Horizontal Rule) sur toute la largeur du texte.

La balise de fermeture n'existe pas.

<a href="***"> : pour construire des liens hypertextes (c'est quand même le but premier de HTML...).

La syntaxe en est simple. Pour construire un lien vers ma page, il suffit d'écrire ceci :

          vers <a href="http://www.grappa.univ-lille3.fr/~gonzalez">ma</a> page.
        

Que peut-on mettre comme adresse après href ?

Il reste les balises de construction de tableaux et d'insertion d'images qu'on verra plus tard.