Ceci est une ancienne révision du document !

Table des matières

head
body
- Balises

(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

Balises

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