Table des matières

head
body
Multimédia
- Images
- Vidéos
- Audio
- Contenu externe
Données
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.

Attributs 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é.

Attributs srcset et sizes : afficher une image spécifique en fonction de la largeur de l'image affichée. Souvent la dimension de l'image dépend de la largeur d'affichage.

<img
  srcset="img-480w.jpg 480w, img-800w.jpg 800w"
  sizes="(max-width: 600px) 480px,
         800px"
  src="img-800w.jpg" />

Dans srcset, il faut mettre la liste des images avec leur dimension. On met w pour indiquer la largeur (width) en pixel.

Dans sizes, il y a la largeur (en px) en fonction d'une condition CSS. La première condition vraie est appliquée donc l'ordre est important.

<picture>

Il permet d'afficher des images de façon dynamique mais de façon plus fine, toujours sur la base de condition CSS.

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w.jpg" />
  <source media="(min-width: 800px)" srcset="elva-800w.jpg" />
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />
</picture>

ou encore :

<picture>
  <source media="(orientation: landscape)"
    srcset="land-small-car-image.jpg 200w,
            land-medium-car-image.jpg 600w,
            land-large-car-image.jpg 1000w"
    sizes="(min-width: 700px) 500px,
           (min-width: 600px) 400px,
           100vw">
  <source media="(orientation: portrait)"
    srcset="port-small-car-image.jpg 700w,
            port-medium-car-image.jpg 1200w,
            port-large-car-image.jpg 1600w"
    sizes="(min-width: 768px) 700px,
           (min-width: 1024px) 600px,
           500px">
  <img src="land-medium-car-image.jpg" alt="Car">
</picture>

Why You Should Use Picture Tag Instead of Img Tag Archive du 25/01/2021 le 14/03/2024

<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>

Il est possible d'inclure l'image via <img src="equilateral.svg" /> ou directement <svg>…</svg>.

Dans le premier cas, l'image peut être mise en cache. Mais les css de la page n'impacteront pas l'image svg.

Dans le cas où l'image est “inline”, c'est l'inverse.

Vidéos

<video>

<video src="rabbit320.webm" controls>
  <source src="rabbit320.webm" type="video/webm" />
    <p>
    Your browser doesn't support HTML video. Here is a
    <a href="rabbit320.webm">link to the video</a> instead.
  </p>
</video>

Il est aussi possible de mettre plusieurs formats de vidéo :

<video controls>
  <source src="rabbit320.mp4" type="video/mp4" />
  <source src="rabbit320.webm" type="video/webm" />
  <p>
    Your browser doesn't support this video. Here is a
    <a href="rabbit320.mp4">link to the video</a> instead.
  </p>
</video>

Liste des attributs :

<video
  controls
  width="400"
  height="400"
  autoplay
  loop
  muted
  preload="auto"
  poster="poster.png">
  <source src="/lib/exe/fetch.php?media=prog:html:rabbit320.webm" type="video/webm" />
  <p>
    Your browser doesn't support this video. Here is a
    <a href="rabbit320.mp4">link to the video</a> instead.
  </p>
</video>

<track> : ajout des sous-titres

On peut utiliser le format vtt.

WEBVTT

0
00:00:00.000 --> 00:00:12.000
<v Test>[Test]</v>

NOTE This is a comment and must be preceded by a blank line

1
00:00:18.700 --> 00:00:21.500
This blade has a dark past.

2
00:00:22.800 --> 00:00:26.800
It has shed much innocent blood.

Les numéros 0/1/2 s'incrémentent pour chaque texte.

Il est possible de mettre plusieurs track, une pour chaque sous-titre.

<video controls>
  <source src="example.webm" type="video/webm" />
  <track kind="subtitles" src="subtitles_es.vtt" srclang="es" label="Spanish" />
</video>

Audio

<audio>

La syntaxe est proche de <video>. Les attributs sont les mêmes sauf height, width et poster qui n'existent pas.

<audio controls>
  <source src="viper.mp3" type="audio/mp3" />
  <source src="viper.ogg" type="audio/ogg" />
  <p>
    Your browser doesn't support this audio file. Here is a
    <a href="viper.mp3">link to the audio</a> instead.
  </p>
</audio>

Contenu externe

<iframe> : affiche du contenu externe.

<iframe width="560" height="315"
src="https://www.youtube-nocookie.com/embed/T3twGCdofGA?si=50WCDE7BqTocjyY7"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;
picture-in-picture; web-share" allowfullscreen></iframe>

Attributs sans commentaire : width, height et allowfullscreen.

sandbox : toujours le mettre quand le widget est compatible (donc pas Google).

<object>

<object data="mypdf.pdf" type="application/pdf" width="800" height="1200">
  <p>
    You don't have a PDF plugin, but you can
    <a href="mypdf.pdf">download the PDF file. </a>
  </p>
</object>

Il existe aussi <embed> pour faire la même chose c'est l'ancienne syntaxe.

Données

<table> (tableau) avec <tr> (ligne / row) et <td> (cellule / data).

<table>
  <tr>
    <td>Hi, I'm your first cell.</td>
    <td>I'm your second cell.</td>
  </tr>
  <tr>
    <td>I'm your third cell.</td>
    <td>I'm your fourth cell.</td>
  </tr>
</table>

Hi, I'm your first cell.	I'm your second cell.
I'm your third cell.	I'm your fourth cell.

Les entêtes th sont des cellules, pas des lignes ou des colonnes.

Il est aussi possible de fusionner les cellules et colonnes avec rowspan et colspan.

<table>
  <tr>
    <th colspan="2">Animals</th>
  </tr>
  <tr>
    <th colspan="2">Hippopotamus</th>
  </tr>
  <tr>
    <th rowspan="2">Horse</th>
    <td>Mare</td>
  </tr>
  <tr>
    <td>Stallion</td>
  </tr>
  <tr>
    <th colspan="2">Crocodile</th>
  </tr>
  <tr>
    <th rowspan="2">Chicken</th>
    <td>Hen</td>
  </tr>
  <tr>
    <td>Rooster</td>
  </tr>
</table>

Animals
Hippopotamus
Horse	Mare
Horse	Stallion
Crocodile
Chicken	Hen
Chicken	Rooster

Enfin, il est possible de changer le style de chaque colonne avec colgroup et col.

<table>
  <colgroup>
    <col span="2">
    <col style="background-color:#97DB9A;">
    <col style="width:42px;">
    <col style="background-color:#97DB9A;">
    <col style="background-color:#DCC48E; border:4px solid #C1437A;">
    <col span="2" style="width:42px;">
  </colgroup>
  <tr>
    <td>&nbsp;</td>
    <th>Mon</th>
    <th>Tues</th>
    <th>Wed</th>
    <th>Thurs</th>
    <th>Fri</th>
    <th>Sat</th>
    <th>Sun</th>
  </tr>
</table>

	Mon	Tues	Wed	Thurs	Fri	Sat	Sun
1st period	English			German	Dutch

Utiliser <caption> pour ajouter un titre à la table.

Il est aussi possible de mettre les lignes d'entête dans un <thead>, les lignes de bas de tableau dans un <tfoot> et les lignes restants dans un <tbody>.

Enfin, il est possible d'expliciter les entêtes des lignes et colonnes avec l'attribut scope="col" ou scope="row". Si des cellules d'entête sont fusionnées avec colspan ou rowspan, il faut utiliser colgroup et rowgroup.

<table>
  <caption>Titre</caption>
  <thead>
    <tr>
      <td>&nbsp;</td>
      <th scope="col">Mon</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1st period</th>
      <td>English</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Dernier1</td>
      <th scope="col">Dernier2</th>
    </tr>
  </tfoot>
</table>

Titre
	Mon
1st period	English
Dernier1	Dernier2

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>