Ceci est une ancienne révision du document !

Table des matières

head
body
Multimédia
- Images
Exemples
Cas particuliers

(Presque) toute la documentation provient de MDN Web Docs

head

<head>
  <meta charset="utf-8" />
  <title>My test page</title>
  <meta name="author" content="Chris Mills" />
  <meta name="description" content="Bla bla." />
 
  <link rel="icon" href="https://example.com/favicon-150x150.png" sizes="32x32" type="image/x-icon" />
  <link rel="icon" href="https://example.com/favicon.png" sizes="192x192" type="image/x-icon" />
  <link rel="icon" href="favicon.ico" />
  <link rel="apple-touch-icon" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png" />
  <link rel="apple-touch-icon" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png" />
  <link rel="apple-touch-icon" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png" />
  <link rel="apple-touch-icon" href="https://developer.mozilla.org/static/img/favicon57.png" />
 
  <link rel="stylesheet" href="my-css-file.css" />
 
  <script src="my-js-file.js" defer></script>
</head>

Pour <link rel="stylesheet">, voir css.

Pour <script src="my-js-file.js" defer></script>, voir css. Il est nécessaire d'écrire </script>.

Les seuls pouvant s’abréger sont : <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <param>, <source>, <track>, <wbr>. Void element

Open Graph Protocol

Open Graph protocol

Données pour présenter sous forme de miniature la page web.

  <meta property="og:locale" content="fr_FR" />
  <meta property="og:type" content="article" />
  <meta property="og:title" content="Title" />
  <meta property="og:description" content="Bla bla" />
  <meta property="og:url" content="https://example.com/original/url" />
  <meta property="og:site_name" content="Site Name" />
  <meta property="og:image" content="https://example.com/image.webp" />
  <meta property="og:image:width" content="1280" />
  <meta property="og:image:height" content="620" />
  <meta property="og:image:type" content="image/webp" />

Miniature : spécifique Twitter

Getting started with Cards

  <meta name="twitter:card" content="summary" />
  <meta name="twitter:site" content="@nytimesbits" />
  <meta name="twitter:creator" content="@nickbilton" />

body

Structure de la page

Tous les champs servent essentiellement aux crawlers.

<header> : entête.

<nav> : contient les liens pour naviguer dans le site.

<main> : contenu global du site.

<article>, <section>, <div>.

<article> : le contenu est un article.

<section> : rubriques d'un article.

<div> : bloc pour un contenu divers. Le crawler ne connait pas l'importance du contenu.

<aside> : bloc d'information secondaire. Généralement c'est les liens associés (pub, bibliographie, sommaire)

<footer> : bas de page.

Paragraphes

<h1> jusqu'à <h6> (header) : <h1> désigne le titre de la page et ne doit être présent qu'une seule fois.

Attribut id : désigne un point d'ancrage pour les liens hypertexte,

<h1>h1 header</h1>
<h2>h2 header</h2>
<h3>h3 header</h3>
<h4>h4 header</h4>
<h5>h5 header</h5>
<h6>h6 header</h6>

h1 header

h2 header

h3 header

h4 header

h5 header

h6 header

<p> : les paragraphes. A ne pas confondre avec <br />.

Texte

non

multi-ligne.

<p>Texte</p>
<p>multi-ligne.</p>

Texte non multi-ligne.

Texte

multi-ligne.

<br /> : force un retour à la ligne mais sans changer de paragraphe.

Par exemple : utiliser <p> pour délimiter les couplets et refrains d'une chanson et utiliser <br /> pour les rimes.

Ligne 1<br />
Ligne 2

Ligne 1
Ligne 2

<ul>, <ol> et <li> : listes pucées. Début et fin de la liste non numérotée <ul> (unordered list), début et fin de la liste numérotée <ol> (ordered list), élément dans les listes <li> (list item).

<ol>
  <li>liste ordonnée
    <ul>
      <li>liste non ordonnée imbriquée</li>
    <ul>
  </li>
<ol>

liste ordonnée
- liste non ordonnée imbriquée

<dl>, <dt>, <dd> : listes non pucées. Début et fin de la liste sans puce <dl> (description list), terme <dt> (description term) et détails <dd> (description details).

<dl>
  <dt>Terme</dt>
  <dd>Description 1</dd>
  <dd>Description 2</dd>
<dl>

Terme: Description 1; Description 2

<cite> et <blockquote> et son attribut cite (n'est pas affiché).

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
<p>blabla</p>
</blockquote>

blabla

Il y a <q> pour une citation dans un paragraphe.

On peut aussi combiner <blockquote> et <cite>

<blockquote>
  <p>Text</p>
  <footer>
   <cite><a href="http://www.example.com/">Cite text</a></cite>
  </footer>
</blockquote>

Text

Cite text

<address>. Texte libre à l'intérieur. Met en italique.

<address>
  <a href="mailto:jim@example.com">jim@example.com</a><br />
  <a href="tel:+14155550132">+1 (415) 555‑0132</a>
</address>

Auteur: W3docs team
Contacter à l'auteur

<code>, <var>, <kbd>, <samp> : police monospace. Pour faire du multi-ligne, il faut entourer par <pre><code><code></pre>.

Toutes les affichages sont identiques. code représente du code informatique, var représente une variable, kbd représente la commande saisie au clavier, samp représente la sortie standard.

Groupes de mots

<span> : modification du style sans mise en évidence par les crawlers.

<span style="font-size: 32px; margin: 21px 0; display: block;">
  Is this a top level heading?
</span>

Is this a top level heading?

<em> (emphasis) : accentuer un mot pour les crawlers. Met également en italique.

I am <em>glad</em> you weren't <em>late</em>.

I am glad you weren't late.

<strong> (important) : accentuer fortement un mot pour les crawlers . Met également en gras.

This liquid is <strong>highly toxic</strong>.

This liquid is highly toxic.

<mark> (pertinence) pour les crawlers. Met également en surligné.

This liquid is <mark>highly toxic</mark>.

This liquid is highly toxic.

Obsolète : <i> (italic), <b> (bold), <u> (underline). Préférer span + CSS.

<a> (lien) : <a href="https://www.example.com">texte</a>.

La documentation de Mozilla indique de mettre le format à l'intérieur du <a>.

<a href="https://developer.mozilla.org/en-US/">
  <h1>MDN Web Docs</h1>
</a>
<a href="https://developer.mozilla.org/en-US/">
  <img src="mdn_logo.svg" alt="MDN Web Docs" />
</a>

MDN Web Docs

On peut ajouter #XYZ en fin d'adresse Internet pour se positionner à l'emplacement dans la page qui contient l'attribut id="XYZ".

L'attribut title ajoute un texte via une tooltip (déprécié, non utilisable sans souris).

Le texte du lien doit être une description autonome de l'URL. Mauvais exemple : <a href="https://www.mozilla.org/firefox/">Cliquer ici</a> pour télécharger.

On peut aussi faire un lien vers un mail : <a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>.

<q> et son attribut cite (n'est pas affiché).

<q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">blabla</q>

blabla

Il y a <blockquote> pour une citation de tout un paragraphe.

<abbr> et son attribut title (abréviation).

<abbr title="Reverend">Rev.</abbr>

Rev.

<sup> (exposant) et <sub> (indice).

C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>

C₈H₁₀N₄O₂

<time> : pour distinguer l'affichage visuel et l'affichage normalisé.

<time datetime="2016-01-20">20 January 2016</time>

20 January 2016

Multimédia

Images

<img> : affiche une image

<img src="mdn_logo.svg" alt="Mozilla logo" />

Attribut alt : pour un texte alternatif décrivant l'image.

Attribut width et height : dimension en pixel. La taille doit correspondre aux dimensions de l'image. Ce n'est pas fait pour redimensionner l'image (sauf taille dynamique dans la page). Si seulement un des deux attributs est indiqué, le ratio de la taille de l'image sera conservé.

<figure> et <figcaption> : ajoute un texte lié à l'image.

<figure>
  <img
    src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
    width="400"
    height="341" />

  <figcaption>
    A T-Rex on display in the Manchester University Museum.
  </figcaption>
</figure>

<canvas> et 2D

<canvas> et WebGL

<svg>

Exemples

Syntaxe Mozilla Marking up a letter

structure Mozilla Structuring a page of content

Cas particuliers

html invalide

Si l'arbre html est invalide, le navigateur va faire des modifications (pouvant varier en fonction des navigateurs) pour rendre le XML valide.

Il existe des validateurs HTML : The W3C Markup Validation Service.

Exemple :

<p>What causes errors in HTML?
<ul>...

va devenir

<p>What causes errors in HTML?</p>
<ul>