Guide rédactionel HTML

Ce guide à pour but de faire la synthèse des élements HTML utilisé pour la rédaction de contenu web. Les éléments fonctionnels (les élements de formulaires par exemple) ne seront pas traités.

Sommaire

Avant propos

Le HTML joue un rôle essentiel pour définir le sens sémantique des éléments d'un document. La plupart des élements HTML rédactionnels servent à définir le signifié de ce qui est énoncé. Seul quelques élements rédactionnels ont un rôle purement fonctionnels (comme l'élement br ou img).

Donc, même si un élement HTML possède un rendu esthétique particulier, on ne le choisira jamais pour son aspect, mais bien pour sa qualité sémantique. Ainsi, on ne marqueras pas un texte avec un élement de titrage h pour qu'il soit affiché en plus grande taille, mais bien par ce que celui-ci doit signifier le titre d'une section.

↩︎ Retour au sommaire

Le paragraphe et le saut de ligne forcé

Exemple de paragraphes

Impedit dolorem corrupti enim quo! Blanditiis dolores, libero illum voluptatem voluptatum modi veritatis dolor vero quisquam veniam repellendus placeat quasi rem voluptatibus

Velit aut voluptate maiores magnam illo, libero facere explicabo dolor? Corporis illo dolore animi provident nostrum tempore tenetur ipsa non, laboriosam vero!

<p>
  Impedit dolorem corrupti enim quo! Blanditiis dolores, libero illum voluptatem voluptatum modi veritatis dolor vero quisquam veniam repellendus placeat quasi rem voluptatibus
</p>
<p>
  Velit aut voluptate maiores magnam illo, libero facere explicabo dolor? Corporis illo dolore animi provident nostrum tempore tenetur ipsa non, laboriosam vero!
</p>

Exemples de saut de ligne forcé

<br> <wbr>

Ressources

↩︎ Retour au sommaire

Les hyperliens

Composant primordial d'internet, les hyperliens sont des liens entre divers documents d'internet, permettant depasser d'un document consulté à une autre ressource.

Sont attribut href permet de spécifier la localisation de l'une ressource (URL).

Exemples d'hyperliens

Les exemples suivant illustrent des hyperliens possédant respéctivement : une ancre, une URL relative et une URL absolue.

Retourner au sommaire 

<a href="#sommaire">retourner au sommaire</a>

À propos 

<a href="a-propos.html">À propos</a>

un moteur de recherche qui protège vos données privées 

<a href="https://www.qwant.com/">un moteur de recherche qui protège vos données privées</a>

Les autres attributs des hyperliens

Outre l'attribut href, HTML permet de spécifier notamemnt un titre title, une relation rel ou d'indiquer que la ressoruces est à télécharger dowload.

Exemples d'attribut title et rel

Créer des hyperliens 

<a href="#les-hyperliens" title="Documentation HTML sur les hyperliens" rel="help">Créer des hyperliens</a>

Ressources

↩︎ Retour au sommaire

Les titrages

Les élements de titrages sont utilisés pour créer des titres de sections dans un document (introduire un article, un chapitre ou autres paragraphes).

Les titres ont une valeur sématique, du titre le plus important h1 au titre le moins important h6.

Exemples de titrages

Le titre d'un article

<h1>Le titre d'un article</h1>

le titre d'un chapitre

<h2>Le titre d'un chapitre</h2>

Si l'on a besoin de sectionner un chapitre

<h3>Si l'on a besoin de sectionner un chapitre</h3>

On peut avoir besoin de sectionner la section d'un chapitre

<h4>On peut avoir besoin de sectionner la section d'un chapitre</h4>
Admettons que l'on ait besoin de sectionner une section qui sectionne un chapitre, ça peut arriver
<h5>Admettons que l'on ait besoin de sectionner une section qui sectionne un chapitre, ça peut arriver</h5>
Bon là, il faut commencer à se poser la question du découpage rédactionnel de son document…
<h6>Bon là, il faut commencer à se poser la question du découpage rédactionnel de son document…</h6>

Ressources

↩︎ Retour au sommaire

L'emphase

Les élements HTML d'emphase permettent de preciser une information sémantique de qualité de mots. Les élements suivant sont cités par ordre de qualité.

Exemple d'italique

Certains mots doivent être soutenus. 

Certains mots doivent être <em>soutenus</em>.

Exemple de gras

D'autres mots doivent être écrits avec force. 

D'autres mots doivent être écrits <strong>avec force</strong>.

Exemple de gras & d'italique

Des cas imposent de marteler les mots. 

Des cas imposent de <strong><em>marteler les mots</em></strong>.

Ressources

↩︎ Retour au sommaire

Les listes

Les listes offrent la possibilté d'indiquer un sens sémantique de nature « liste de choses » à des informations.

La liste non ordonnée

La liste non-ordonnées sert à lister des informations sans ordre particulier.

<ul>
    <li>banane ;</li>
    <li>poire ;</li>
    <li>melon.</li>
</ul>

La liste ordonnée

La liste ordonnées sert classer des informations dans un ordre particulier.

  1. Mettre du beurre à fondre dans une poêle ;
  2. Casser les œufs dans la poêle ;
  3. Attendre ;
  4. Manger.
<ol>
    <li>Mettre du beurre à fondre dans une poêle ;</li>
    <li>Casser les œufs dans la poêle ;</li>
    <li>Attendre ;</li>
    <li>Manger.</li>
</ol>

↩︎ Retour au sommaire

Le tableau

Tableau simple

1 2 3 
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

Tabeau complet

Présentation d'un tableau complet avec entête et légende en pied.

A B C
1 2 3
4 & 5 6
A est a en lettre capitale B est b en lettre capitale C est c en lettre capitale 
<table>
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td colspan="2">4 & 5</td>
      <td>6</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>A est a en lettre capitale</td>
      <td>B est b en lettre capitale</td>
      <td>C est c en lettre capitale</td>
    </tr>
  </tfoot>
</table>

↩︎ Retour au sommaire

Les médias

<img> <figure> <figcaption> <picture> <audio> <video> <source> <track>

↩︎ Retour au sommaire

Divers

HTML offre la possibilité supplémentaires d'enrichir la sémantique d'un document.

<kbd> <samp>

Définir des termes

<abbr title> <dfn> <dl><dt><dd>

La liste de définitions

Chose à définir

Définition de la chose.

<dl>
  <dt>Chose à définir</dt>
  <dd>
    <p>Définition de la chose.</p>
</dd>
</dl>

Faire une citation

<cite> <q cite> <blockquote cite>

Corrections de texte

<del cite datetime> <ins> <u>

Indice et exposant

<sub> <sup>

Résumé et légende

<details> <summary> Attention d'illustrer que des élements HTML recommandé (REC)

Information de contact

<address>

Marquer du code

Afficher du code en HTML se fait de deux manières, soit un extrait dans le texte avec l'élement code, soit en paragraphe isolé avec l'élement pre.

Exemples

L'élement d'hyperlien HTML, possède un attibut href qu permet de spécifier une adresse URL. 

L'élement d'hyperlien HTML, possède un attibut <code>href</code> qu permet de spécifier une adresse URL.

Marquer un paragraphe de code : 

function dreaming($i, $dream = NULL){
  $dream = [];
  if ($i--) $dream['dream'] = dreaming($i, $dream);
  return $dream;
  }
  dreaming(3);
<pre>
function dreaming($i, $dream = NULL){
  $dream = [];
  if ($i--) $dream['dream'] = dreaming($i, $dream);
  return $dream;
  }
  dreaming(3);
</pre>

Ressources