LG

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
(Presque) toute la documentation provient de [[https://github.com/mdn/content|MDN Web Docs]]

=====head=====

<code html>
<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>
</code>

Pour ''%%<link rel="stylesheet">%%'', voir [[prog:css]].

Pour ''%%<script src="my-js-file.js" defer></script>%%'', voir [[prog: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>''. [[https://developer.mozilla.org/en-US/docs/Glossary/Void_element|Void element]]

  * Open Graph Protocol

[[https://ogp.me/|Open Graph protocol]]

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

<code html>
  <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" />
</code>

  * Miniature : spécifique Twitter

[[https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started|Getting started with Cards]]

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

=====body=====

====Structure de la page====

{{:prog:html:structure.png?900|}}

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, 

| <code html>
<h1>h1 header</h1>
<h2>h2 header</h2>
<h3>h3 header</h3>
<h4>h4 header</h4>
<h5>h5 header</h5>
<h6>h6 header</h6>
</code> | <HTML>
<h1>h1 header</h1>
<h2>h2 header</h2>
<h3>h3 header</h3>
<h4>h4 header</h4>
<h5>h5 header</h5>
<h6>h6 header</h6>
</HTML> |

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

| <code html>
Texte

non

multi-ligne.

<p>Texte</p>
<p>multi-ligne.</p>
</code> | <HTML>
Texte

non

multi-ligne.

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

  * ''<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.

| <code html>
Ligne 1<br />
Ligne 2
</code> | <HTML>
Ligne 1<br />
Ligne 2
</HTML> |

  * ''<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).

| <code html>
<ol>
  <li>liste ordonnée
    <ul>
      <li>liste non ordonnée imbriquée</li>
    </ul>
  </li>
</ol>
</code> | <HTML>
<ol>
  <li>liste ordonnée
    <ul>
      <li>liste non ordonnée imbriquée</li>
    </ul>
  </li>
</ol>
</HTML> |

  * ''<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).

| <code html>
<dl>
  <dt>Terme</dt>
  <dd>Description 1</dd>
  <dd>Description 2</dd>
</dl>
</code> | <HTML>
<dl>
  <dt>Terme</dt>
  <dd>Description 1</dd>
  <dd>Description 2</dd>
</dl>
</HTML> |

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

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

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

On peut aussi combiner ''%%<blockquote>%%'' et ''%%<cite>%%''

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

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

| <code html>
<address>
  <a href="mailto:jim@example.com">jim@example.com</a><br />
  <a href="tel:+14155550132">+1 (415) 555‑0132</a>
</address>
</code> | <HTML>
<address>
  Auteur: W3docs team<br />
  <a href="mailto:info@example.com">Contacter à l'auteur</a>
</address>
</HTML> |

  * ''<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.

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

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

| <code html>I am <em>glad</em> you weren't <em>late</em>.</code> | <HTML>I am <em>glad</em> you weren't <em>late</em>.</HTML> |

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

| <code html>This liquid is <strong>highly toxic</strong>.</code> | <HTML>This liquid is <strong>highly toxic</strong>.</HTML> |

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

| <code html>This liquid is <mark>highly toxic</mark>.</code> | <HTML>This liquid is <mark>highly toxic</mark>.</HTML> |

  * 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>''.

| <code html>
<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>
</code> | <HTML>
  <a href="https://developer.mozilla.org/en-US/"><h1>MDN Web Docs</h1></a>
  <a href="https://developer.mozilla.org/en-US/"><img src="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks/mdn_logo.svg" alt="MDN Web Docs" /></a>
</HTML> |

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

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

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

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

| <code html>
<abbr title="Reverend">Rev.</abbr>
</code> | <HTML>
<abbr title="Reverend">Rev.</abbr>
</HTML> |

  * ''<sup>'' (exposant) et ''%%<sub>%%'' (indice).

| <code html>
C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>
</code> | <HTML>
C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>
</HTML> |

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

| <code html>
<time datetime="2016-01-20">20 January 2016</time>
</code> | <HTML>
<time datetime="2016-01-20">20 January 2016</time>
</HTML> |

=====Multimédia=====

====Images====

  * ''<img>'' : affiche une image

| <code html>
<img src="mdn_logo.svg" alt="Mozilla logo" />
</code> | <HTML>
<img src="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks/mdn_logo.svg" alt="MDN Web Docs" height=120 />
</HTML> |

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.

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

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

<code html>
<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>
</code>

ou encore :

<code html>
<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>
</code>

[[https://blog.bitsrc.io/why-you-should-use-picture-tag-instead-of-img-tag-b9841e86bf8b|Why You Should Use Picture Tag Instead of Img Tag]] {{ :prog:html:why_you_should_use_picture_tag_instead_of_img_tag_by_chameera_dulanga_bits_and_pieces_14_03_2024_06_56_06_.html |Archive du 25/01/2021 le 14/03/2024}}

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

| <code html>
<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>
</code> | <HTML>
<figure>
  <img
    src="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks/mdn_logo.svg"
    alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
    width="400" />
  <figcaption>
    A T-Rex on display in the Manchester University Museum.
  </figcaption>
</figure>
</HTML> |

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

| <code html>
<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>
</code> | <HTML>
<video src="/lib/exe/fetch.php?media=prog:html:rabbit320.webm" controls>
  <p>
    Your browser doesn't support HTML video. Here is a
    <a href="/lib/exe/fetch.php?media=prog:html:rabbit320.webm">link to the video</a> instead.
  </p>
</video>
</HTML> |

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

<code html>
<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>
</code>

Liste des attributs :

<code html>
<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>
</code>

  * ''<track>'' : ajout des sous-titres

On peut utiliser le format ''vtt''.

<code>
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.
</code>

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

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

| <code html>
<video controls>
  <source src="example.webm" type="video/webm" />
  <track kind="subtitles" src="subtitles_es.vtt" srclang="es" label="Spanish" />
</video>
</code> | <HTML>
<video controls>
  <source src="/lib/exe/fetch.php?media=prog:html:rabbit320.webm" type="video/webm" />
  <track kind="subtitles" src="subtitles_es.vtt" srclang="es" label="Spanish" />
</video>
</HTML> |

====Audio====

  * ''%%<audio>%%''

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

| <code html>
<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>
</code> | <HTML>
<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>
</HTML> |

====Contenu externe====

  * ''<iframe>'' : affiche du contenu externe.

| <code html>
<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>
</code> | <HTML>
<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>
</HTML> |

Attributs sans commentaire : ''width'', ''height'' et ''allowfullscreen''.

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

  * ''<object>''

| <code html>
<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>
</code> | <HTML>
<object data="/lib/exe/fetch.php?media=doc:fs:fat_specs_1.03.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>
</HTML> |

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

| <code html>
<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>
</code> | <HTML>
<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>
</HTML> |

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

| <code html>
<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>
</code> | <HTML>
<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>
</HTML> |

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

| <code html>
<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>
</code> | <HTML>
<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>
  <tr>
    <th>1st period</th>
    <td>English</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>German</td>
    <td>Dutch</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</HTML> |

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

| <code html>
<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>
</code> | <HTML>
<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>
</HTML> |



=====Exemples=====

{{ prog:html:mozilla-syntaxe-exemple.html |Syntaxe Mozilla}} [[https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter|Marking up a letter]]

{{ :prog:html:mozilla-structure-exemple.html |structure Mozilla}} [[https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content|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 : [[https://validator.w3.org/|The W3C Markup Validation Service]].

Exemple :

<code html>
<p>What causes errors in HTML?
<ul>...
</code>

va devenir

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