Les bases de HTML

HTML (HyperText Markup Langage) est le langage de balisage utilisé pour créer des pages web.

Cheatsheet HTML

Créer un document HTML

Pour créer une page statique HTML, il suffit de créer un fichier avec l’extension .html.
Il peut être édité avec n’importe quel éditeur de texte classique, un IDE (Integrated Development Editor) permettra d’ajouter des fonctionnalités supplémentaires comme la coloration syntaxique ou l’autocomplétion. Pour visualiser le résultat, il suffit d’ouvrir le fichier avec un navigateur — comme Firefox ou Chrome

Structure

Un document complet, bien formatté, contient

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Le titre de l'onglet</title>
  </head>
  <body>
     <!-- Contenu de la page -->
     <h1>Mon titre</h1>
     <p>Mon paragraphe</p>
  </body>
</html>

HTML est insensible à la casse, aux espaces et retours chariots (hormis la DTD).
Une bonne pratique est d’écrire en minuscule et d’indenter le code — pour améliorer la lisibilité du code.

Commentaires

Des commentaires peuvent être ajoutés en HTML, ils seront pas affichés par le navigateur :

<!-- Mon commentaire -->

Balises

Attributs

Chaque balise peut éventuellement avoir des attributs pour ajouter des propriétés à l’élément. Les balises ouvrantes peuvent contenir des attributs (et c’est parfois même obligatoire), tandis que les balises fermantes non.

Lorsqu’un élément a plusieurs attributs, l’ordre n’a pas d’importance.

Attributs sans valeur

Les attributs des éléments HTML peuvent ou non prendre des valeurs.
En XHTML, les attributs sans valeurs sont interdits.

<input type="text" required>              <!-- HTML -->
<input type="text" required="required" /> <!-- XHTML -->

Quotes

Les valeurs d’attributs peuvent être entourées de doubles ou simples quotes. Les doubles quotes sont les plus utilisées, les simples quotes ne sont généralement utilisées que lorsque la valeur contient des doubles quotes.

<p title='John "ShotGun" Nelson'></p>
<p title="John 'ShotGun' Nelson"></p>

Ou on peut utiliser une entité pour ajouter une quote à l’intérieur de quotes.

<p title="John &quot;ShotGun&quot; Nelson"></p> <!-- John "ShotGun" Nelson -->
<p title='John &apos;ShotGun&apos; Nelson'></p> <!-- John 'ShotGun' Nelson -->

Attributs globaux

Différents éléments acceptent différents attributs.
Mais certains attributs sont globaux, c’est à dire qu’ils peuvent être placés sur n’importe quel élément:

Attribut Description                   Exemple
id Définit l'identifiant de l'élément. Un identifiant est unique par page.
Il peut être utilisé en CSS ou JS (sélecteur #ID) ou comme cible pour un lien (<a href="#id">).		 
<div id="main">
class Définit la classe de l'élément.
Elle peut être utilisée en CSS ou JS (sélecteur .CLASS)		 
<button class="btn-primary">
title Ajoute un titre à l'élément.
Il est affiché en tooltip au passage de la souris sur l'élément		 
<span title="Fermer">&times;</span>
style Permet d'ajouter du style CSS en ligne 
<table style="table-layout: fixed; width: 100%">
tabindex Définit l’ordre de tabulation de l’élément.
Cf accessibilite		 
<input type="text" tabindex="1">
lang Définit la langue dans laquelle le contenu de l’élément est écrit (`en`), ou éventuellement le dialecte (`en-US`).
Cf accessibilite		 
<html lang="en">
dir Définit la direction du texte: de gauche à droite (ltr) ou de droite à gauche (rtl) 
<p dir="ltr"><bdi>Student</bdi>: How do you write "What's your name?" in Arabic?</p>
<p dir="rtl"><bdi>Teacher</bdi>: ما اسمك؟</p>

Nouveaux attributs globaux depuis HTML5:

Attribut Description                   Exemple
contenteditable Définit si le contenu de l’élément peut être édité 
<div contenteditable>
draggable Définit si l’élément peut être glissé (drag & drop) 
<div draggable>
hidden Permet de cacher un élément (même principe que display: none) 
<main hidden>
spellcheck Définit si le correcteur orthographique doit être affiché ou non 
<textarea spellcheck>
inputmode Définit le type de clavier à afficher sur smartphone 
<input type="text" inputmode="numeric">
data-* Permet de définir des attributs personnalisés 
<div data-tooltip="Une tooltip JS">

Documentation: Global attributes

Event handlers

Un event handler est un attribut qui permet d’associer du code JavaScript à un événement se produisant sur l’élément. Le JavaScript est le language qui permet de gérer les interractions avec la page (comme ouvrir une popup). Tous les events handlers commençent par “on”.

Par exemple, pour empêcher la soumission d’un formulaire:

<form onsubmit="console.log(this); return false">

On peut obtenir le même résultat que précédemment avec du code JavaScript:

function handleSubmit(e) {
    console.log(this);
}
document.getElementById("form").addEventListener("submit", handleSubmit);

Documentation: List of event handlers

Caractères spéciaux

Le HTML possède des caractères réservés. Les signes < et > par exemple servent à créer des balises.
Pour ajouter des caractères spéciaux à l’intérieur du texte, il faut utiliser des entités HTML.
Une entité HTML est une suite de caractères qui commence par & et finit ; — à l’écran, le navigateur remplacera cette entité par le caractère auquel elle correspond. Les entités les couramment utilisées sont:

Entité Caractère
&lt; <
&gt; >
&amp; &
&quot; "
&apos; '
&nbsp; ` `

Outre les entités HTML définies, on peut afficher n’importe quel caractère Unicode, dès lord qu’on connaît son code décimal ou hexadécimal: le caractère • par exemple peut être affiché avec

Pour trouver le code Unicode d’un caractère: amp-what.com ou fileformat.info

Espaces et retours chariots

HTML est insensible aux espaces et retours chariots.

HTML 
<p>Mon        paragraphe
est écrit
sur plusieurs lignes         avec des espaces
multiples</p>
Rendu 
Mon paragraphe est écrit sur plusieurs lignes avec des espaces multiples

Pour afficher plusieurs espaces à la suite en HTML, il faut utiliser une entité: l’espace insécable &nbsp; (il existe d’autres espaces insécables, plus larges, comme &emsp;).
Pour ajouter un retour à la ligne, il faut utiliser une balise: <br>.

HTML 
<p>Mon&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;paragraphe<br />
est écrit<br />
sur plusieurs lignes &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;avec des espaces<br />
multiples</p>
Rendu 
Mon        paragraphe
est écrit
sur plusieurs lignes         avec des espaces
multiples

Quand on a un bloc de texte qui des espaces et des retours chariots qui tous doivent être préservés, on peut utiliser l’élément <pre> (pour preformatted text) ou alors la propriété CSS white-space: pre; (sur n’importe quel élément).

HTML 
<pre>Mon        paragraphe
est écrit
sur plusieurs lignes         avec des espaces
multiples</pre>
Rendu 
Mon        paragraphe
est écrit
sur plusieurs lignes         avec des espaces
multiples

Versions HTML

HTML est une des trois inventions à la base du World Wide Web, avec le HTTP (Hypertext Transfer Protocol) et les URLs (Uniform Resource Locator, autrement dit des adresses web). C’est un langage qui a fortemment évolué depuis son invention. Chaque nouvelle version du langage introduit de nouvelles fonctionnalités et change parfois totalement la syntaxe ou les enjeux du langage.

HTML4.01, XHTML1.0 et HTML5 : quel doctype choisir

XHTML vs HTML

Conçu initialement comme un langage simplifié par rapport au SGML, le HTML doit en partie son succès à sa tolérance syntaxique, qui en facilite l’usage pour un débutant — par exemple, ce n’est pas grave si les balises ne sont pas toutes fermées, l’écriture du code est indifférente à la casse, les valeurs d’attributs peuvent dans certains cas ne pas être entourées de guillemets, etc. Cette facilité apparente a par contre son revers: le code HTML ne se prête pas très bien aux traitements automatisés, qui sont un des atouts des formats XML.

HTML ne peut être étendu et de nouvelles fonctionnalités ne peuvent être ajoutées qu’au prix du développement et de l’intégration de nouvelles spécifications W3C. À l’inverse, le XML est par nature un méta-format qui permet de créer à volonté de nouveaux éléments.

Compatibilité navigateur

Il est important de comprendre que le langage HTML est un standard, donc des recommandations publiées par un consortium international: le W3C (World Wide Web Consortium).

  1. Aussi étoffées les spécifications soient-elles, il existe toujours une marge d’interprétation de la part des navigateurs, ce qui explique qu’une même page web puisse s’afficher différemment d’un navigateur Internet à l’autre.

  2. Il arrive parfois que certains éditeurs de logiciels ajoutent des instructions HTML propriétaires, qui ne font pas partie des spécifications du W3C.

  3. Toutes les recommendations W3C ne sont pas toujours implémentées par les navigateurs, soit parce qu’elles viennent de sortir et qu’elles n’ont pas encore été développées par les éditeurs de logiciel (pour l’instant), soit parce qu’elles ne le seront jamais.

  4. Une recommendation peut très bien être dépréciée par une nouvelle recommendation, il faut donc se tenir au courant des nouveautés et des changements apportés.

  5. Les anciens navigateurs qui n’ont pas été mis à jour ne supportent pas les nouveautés HTML. C’est particulièrement problématique pour les logiciels qui ne se mettent pas automatiquement à jour, comme Internet Explorer < 10, pour lesquels il faudra apporter des alternatives HTML4 (si on veut une compatibilité avec ces navigateurs).

HTML5 & Cie

“HTML5” peut désigner le language HTML version 5 mais, en général, il désigne un ensemble plus large de technologies — et notamment les API JavaScript.

HTML5 & Cie

This site is open source. Improve this page.