Aide-mémoire html

Cette page sera enrichie au fil du semestre.

Pour plus de détails, se reporter par exemple à

Balises les plus courantes

Structure du fichier

  • <!-- et -->
    Pour encadrer des commentaires
  • <!DOCTYPE html>
    au début du document (html5). Ce n’est pas une balise à proprement parler
  • <html>
    l’élément qui contient tous les autres. Il a deux fils, head et body
  • <head>
    informations diverses sur le document
  • <body>
    contenu du document

Éléments de type bloc (structure grossière de la page)

  • de <h1> à <h6>
    Titres (heading), du plus important (h1) au moins important (h6)
  • <p>
    paragraphe
  • <div>
    bloc quelconque, pour le séparer du reste du document (ce qui sera utile pour la mise en page par css)

Éléments en ligne (découpage du texte)

  • <em>
    mettre en évidence (emphase), italique par défaut.
  • <strong>
    mettre fortement en évidence, gras par défaut.
  • <kbd>
    pour représenter du texte en caractère machine
  • <span>
    pour délimiter un passage (auquel on pourra attribuer un style css ou une action javascript)
  • <a>
    hyperlien (ancre)
  • <img />
    image

Saut de ligne (<br />), barre horizontale (<hr />) : à éviter

A quelques exceptions près, ces deux balises seront remplacés avantageusement par des éléments de style css.

Listes

  • <ul>
    liste à puces (unordered list), contient des <li>
  • <ol>
    liste numérotée (ordered list), contient des <li>
  • <li>
    élément à l’intérieur d’une liste (list item)
  • <dl>
    liste de définitions (definition list), contient une alternance de <dt> et de <dl>
  • <dt>
    un terme à définir (definition term) dans une <dl> ;
  • <dd>
    une définition (qui suit un <dt>) dans une <dl>.

Les listes peuvent être imbriquées, comme dans l’exemple ci-dessous :

<dl>
<dt>Liste à puce</dt>
<dd>
    <ul>
    <li>item1</li>
    <li>item2</li>
    </ul>
</dd>
<dt>Liste numérotée</dt>
<dd>
    <ol>
    <li>item1</li>
    <li>item2</li>
    </ol>
</dd>
</dl>

Qui donne le résultat suivant :

résultat affiché

le rendu de la liste

Tableaux

  • <table>
    pour définir le tableau
  • <th>
    cellule d’en-tête (table head)
  • <tr>
    ligne (table row)
  • <td>
    cellule de données (table data)

L’exemple de w3schools est très parlant.

et pour des tableaux élaborés :

  • <thead>
    en-tête
  • <tfoot>
    bas du tableau (à définir juste après l’en-tête pour permettre au
    navigateur de calculer le rendu avant de lire toutes les données)
  • <tbody>
    corps du tableau

Formulaires

A venir

Nouveautés html5

Structuration sémantique

  • <nav>
    contient une liste de liens
  • <article>
    délimite un texte « complet », ce qui peut inclure header, footer, section etc.
  • <header>
    contient des éléments d’introduction (titre, table des matières, etc.) à l’élément qui le contient (qui peut être la page principale)
  • <footer>
    contient des informations annexes sur l’élément qui le contient (auteur, date, références, etc.)
  • <section>
    délimite différentes parties de l’élément qui le contient (article, document principal, etc.) Une section pourra assez naturellement commencer par un titre (h1 etc.)
  • <aside>
    contient des informations qui ne sont pas partie intégrante du texte (une phrase mise en exergue, un élément nav pour des liens externes, etc.)

Balises plus élaborées

A venir

  • <abbr>
  • <acronym>
  • <dfn>
  • <area>
  • <base>
  • <blockquote>
  • <q>
  • <caption>
  • <cite>
  • <pre>
  • <code>
  • <colgroup>
  • <fieldset>
  • <legend>
  • <iframe>
  • <object>
  • <script>