Usage minimal du HTML

(AJOUT : custom elements, dialog, playground https://developer.mozilla.org/en-US/play)

HTML est un format texte de description de pages utilisé par les navigateurs dans les pages statiques et dans les applications web de type single-page.

Il est également utilisé dans les applications mobiles non-natives, celles qu’on appelle aussi ‘hybrides’.

A la réception d’une page HTML, le navigateur la parse (= en extrait le contenu et la structure) pour obtenir une hiérarchie de noeuds qui s’appelle le DOM et qui calque la hiérarchie des éléments HTML. Ensuite, le navigateur travaille directement avec les objets du DOM.

Pour un contrôle fin de l’affichage (taille, couleurs, fontes, etc.), il faut ajoute au texte HTML des attributs spéciaux (‘style’, ‘class’) qu’on appelle attributs de style ou CCS. On se reportera à l’introduction au CSS.

Exemple de document HTML, sans attributs CSS :

  • L’intitulé <!DOCTYPE html> dénote une page HTML5
  • La partie <head>...</head> est optionnelle
  • La partie qui sera affichée est décrite dans le bloc <body>...</body>
  • Les espaces et les sauts de ligne (en dehors des chaînes litérales) sont des séparateurs qui peuvent être répétés, notamment pour formater de façon lisible et indentée. Ainsi, plusieurs espaces et/ou sauts de ligne entre deux mots d’un paragraphe ne comptent que pour un seul espace
  • Les commentaires sont situés dans des blocs <!-- ... --> ; ils ne peuvent pas être imbriqués
  • La conformité d’un document au standard HTML défini par le consortium W3C peut être établie avec ce vérificateur
  • Une checklist permettant de vérifier qu’une page respecte les bonnes pratiques est ici

DOM associé :

Attributs

  • Les attributs d’un élément HTML sont placés dans le tag ouvrant sous la forme attribut="valeur" ou simplement attribut pour les attributs booléens

  • Exemples : <p style="text-size: 2em;">, <meta charset="utf-8">, <textarea cols=15>, <p hidden>

  • les noms de tags et d’attributs sont case-insensitive. Il est conseillé de les écrire en minuscules. Ils doivent être composés uniquement des caractères [a-z], [A-Z], [0-9], sans tirets, même si la plupart des navigateurs acceptent les tirets haut et bas.

  • la valeur des attributs est toujours une chaine, elle peut être mise entre quotes ou entre guillemets, ou sans rien si ce n’est pas ambigu. Sont équivalents :

    • name="Abricot"
    • name='Abricot'
    • name=Abricot

  • un attribut sans valeur est considéré comme booléen : <p hidden>Caché</p>, <video src="myvideo.mp4" loop muted autoplay controls></video>

Attributs universels

Ils s’appliquent à tous les éléments html, y compris les custom-elements. Ils peuvent ne pas avoir d’effet sur certains éléments.

  • id: identifiant
  • class, style; gestion du style (CSS)
  • dir (“rtl”, “ltr”, “ltr” par défaut) : sens de l’écriture, de gauche à droite ou de droite à gauche
  • hidden (booléen) : cache l’élément affecté
  • inputmode (none, text, decimal, numeric, tel, search, email, url) : indispensable sur mobile
  • tabindex: gère l’ordre du focus par tabulation
  • title: bulle d’aide !

Éléments HTML

On appelle éléments HTML les blocs encadrés par des tags. Il est conseillé de fermer tous les tags, même si ce n’est pas toujours obligatoire en HTML.

Exemple :

Le contenu d’un élément HTML est la partie située entre le tag ouvrant et le tag fermant. Ce peut être un texte, ou d’autres éléments HTML.
Par exemple, le contenu de l’élément de tag label est le texte "Nom de famille" suivi de l’élément de tag input.

Certains éléments sont vides (sans contenu) : <input>, <br>, etc. HTML5 permet qu’ils ne soient pas fermés (ex : <input type="texte>, <br>) ou qu’ils utilisent la syntaxe d’auto-fermeture (ex: <br/>)

On distingue les éléments HTML de type block qui s’affichent verticalement par défaut (ex : <p>) et les éléments inline qui s’insèrent dans le flux horizontal de la ligne courante (ex: <a>)

Principaux éléments HTML de type “block”

Les éléments HTML de type ‘block’ s’affichent verticalement par défaut.

Titres de sections, paragraphes, citations

  • <p> indique un nouveau paragraphe de texte; il ne peut contenir que du texte ou des éléments inline
  • <h1>, <h2>, …, <h6> indiquent des titres de paragraphes, de tailles décroissantes. Ils ne peuvent contenir que du texte ou des éléments inline
  • <pre> est utilisé pour afficher du texte formaté (ex: du code); il préserve les espaces et sauts de ligne.

Séparations verticales

  • <div> indique un nouveau bloc, une rupture verticale sans type particulier
  • <br> indique une rupture verticale vide (line-break)
  • <hr> indique une rupture verticale avec une ligne de séparation horizontale sur toute la largeur du bloc

Listes

Tables

Exemple de table à 3 colonnes avec une ligne d’en-tête et 2 lignes de données :

Formulaires

Un clic sur le bouton ‘Valider’ provoquera une requête HTTP/POST à l’url /submit_identity avec les données contenues dans les champs saisis, en utilisant les valeurs de l’attribut name pour les clés.

Provoque un chargement de la page avec la valeur de la réponse : à ne pas utiliser dans les applications “single-page”

Éléments sémantiques HTML5

  • <article> : définit un article dans le document
  • <section> : définit une section dans le document ou dans un <article>
  • <footer> : pied d’une <section>
  • <header> : en-tête d’une <section>
  • <nav> : définit les liens de navigation
  • <figure> : illustration, photo, diagramme
  • <figcaption> : définit la légende pour une <figure>
  • <aside> : définit un contenu de côté dans le document

Principaux éléments HTML de type “inline”

On rappelle que les éléments HTML de type ‘inline’ s’insèrent dans le flux horizontalement sans commencer sur une nouvelle ligne.

Input

Textarea

Select

Liens hypertexte

Ancres (bookmarks)

  • une ancre peut être attachée à un élément avec l’attribut id, par exemple :
  • pour qu’un lien cible cette ancre, on utilise le caractère # dans l’url, par exemple :

span

<span> est utilisé avec des attributs CSS pour styler une partie d’un texte; par exemple :

Images

Caractères spéciaux

HTML Entities

  • espace insécable : &nbsp;
  • < : &lt;
  • > : &gt;
  • © : &copy;
  • ® : &reg;

Caractères Unicode par codepoint

Exemple de caractère chinois avec codepoint U+54F4 :

Autres caractères hors clavier

HTML et les éditeurs de texte gèrent maintenant tous les caractères unicode, avec des différences selon la fonte utilisée.
Ils peuvent être copiés/collés avec un éditeur de texte comme VSCode.

Par exemple : ❌, 🌐, ⇨, 🇱🇧, 😀

Vidéo

On peut mettre dans le corps de <video> :

  • des alternatives de sources vidéos, qui sont essayées dans l’ordre d’ajout
  • un élément de ‘fallback’ si la vidéo ne peut pas être jouée

Audio

Fonctionne essentiellement comme la vidéo :

Data urls

Les Data URLs permettent d’inclure des contenus binaires dans des documents sans faire référence à des fichiers.

Par exemple : data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==

La syntaxe générale est :

data:<mime-type>];<base64|utf8>,<data>