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>

3 réponses à Aide-mémoire html

  1. Baptiste F dit :

    À propos de l’italique et du gras, il y a une subtilité sémantique à connaître:
    (Dans la suite, remplacez les crochets par des « plus grand/petit »)

    [i] permet de mettre un texte en italique par simple volonté stylistique.
    [em] permet de mettre l’accent (emphase) sur le texte.
    [b] permet de mettre un texte en gras par simple volonté stylistique.
    [strong] permet de mettre un texte en valeur (plus fortement qu’avec [em]).

    Bien sûr, visuellement, [i] et [em] (respectivement [b] et [strong]) auront la même apparence), mais les deux balises ne veulent pas dire la même chose. Les lecteurs visuels le prennent en compte, par exemple, de même que Google. Pour le moteur de recherche, un texte entre [i] ou [b] n’a pas d’importance particulière, alors qu’entre [em] ou [strong], il en a plus.

  2. Christophe dit :

    ouais, moi je suis pas fan de i et b, la « volonté stylistique », ça ressemble quand même beaucoup à un truc qui devrait être dans le CSS.

    Donc merci pour ton commentaire qui me donne l’occasion d’insister sur ce point :)

  3. That is a very good tip particularly to those new to
    the blogosphere. Short but very accurate information… Thanks for sharing this one.
    A must read article!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Merci de répondre à cette question pour prouver que vous n'êtes pas un robot :

Combien font 6 plus 3 ?