Ce tutoriel a pour objectif de vous introduire au langage HTML.
Il vous aidera à:
- Connaître les balises les plus utiles.
- Structurer vos documents HTML de manière sémantique.
Les balises
Le HTML n’est pas un langage de programmation, mais un langage de “marquage” (markup en anglais). Il permet de “baliser” un document afin de décrire sa structure.
Le vocabulaire du langage HTML se compose de quelques 120 balises. Il n’est pas nécessaire de les connaître intégralement, certaines étant très spécifiques (p.ex. les balises des tableaux, ou des formulaires).
Voici, pour commencer, les balises obligatoires pour un document HTML valide:
<html>: C’est la racine du document, se trouvant au début et à la fin du code.<head>: L’en-tête, qui ne sera pas affiché, et contient diverses méta-informations (titre, auteur, mots-clés, liens vers des ressources à charger).<title>: C’est le titre document. Il ne sera pas affiché dans le contenu de la page, mais dans la barre du navigateur (et dans les résultats de recherche Google).<body>: Le corps du document. Tout le contenu visible se trouve dans cette balise.- L’hyperlien –
<a>– qui permet de pointer vers une autre ressource en ligne. - Les titres –
<h1>à<h6>– permettant d’instaurer une structure interne à un document. Le H signifie heading. - Le paragraphe –
<p>– qui identifie un paragraphe de texte.
Un exemple de balise hyperlien:
<a href="http://example.com">Un Lien</a>
Liste des balises HTML disponibles
Eléments de structure d’un document
<body> | Définit le corps du document. |
<h1> - <h6> | Définit un titre, sous-titre ou inter-titre (headings). |
<hr> | Une ligne de séparation horizontale. Définit un changement thématique dans le contenu. |
<div> | Définit une section dans un document. |
<span> | Définit une section dans un document. |
Nouveaux éléments de structure introduits avec HTML5:
<article> | Définit un article (un contenu indépendant) |
<aside> | Définit un contenu annexe |
<header> | Définit l’en-tête d’un document ou d’une section |
<footer> | Définit le pied d’un document ou d’une section |
<main> | Désigne le contenu principal d’un document |
<nav> | Définit un menu de navigation |
<section> | Définit une section dans un document |
Balises de texte
<a> | Un hyperlien, avec l’attribut href indiquant la cible. |
<abbr> | Une abréviation ou un acronmye. |
<address> | Defines contact information for the author/owner of a document |
<b> | Du texte en gras (bold). |
<blockquote> | Defines a section that is quoted from another source HTML5doc |
<br> | Un retour de ligne simple (line break). |
<cite> | Defines the title of a work. HTML5doc |
<code> | Defines a piece of computer code |
<del> | Defines text that has been deleted from a document |
<em> | Defines emphasized text |
<i> | Defines a part of text in an alternate voice or mood |
<ins> | Defines a text that has been inserted into a document |
<mark> | Définit du texte mis en évidence, p.ex. un terme surligné dans les résultats d’une recherche. Balise introduite en HTML5. |
<p> | Defines a paragraph |
<pre> | Defines preformatted text |
<q> | Defines a short quotation HTML5doc |
<s> | Defines text that is no longer correct |
<samp> | Defines sample output from a computer program |
<small> | Defines smaller text |
<sub> | Defines subscripted text |
<sup> | Defines superscripted text |
<strong> | Defines important text |
<time> | Définit un élément de date ou d’heure. Peut contenir un attribut datetime avec la date en encodage ISO. Balise introduite avec HTML5. |
<u> | Defines text that should be stylistically different from normal text |
<wbr> | Defines a possible line-break |
Listes, Définitions, etc
Balises pour les listes:
<ol> | Defines an ordered list |
<ul> | Defines an unordered list |
<li> | Defines a list item |
<details> | Defines additional details that the user can view or hide |
<summary> | Defines a visible heading for a <details> element |
Balises pour les définitions:
<dd> | Defines a description/value of a term in a description list |
<dl> | Defines a description list |
<dt> | Defines a term/name in a description list |
<dfn> | Represents the defining instance of a term |
Balises de médias
<audio> | Déinfit un contenu sonore |
<canvas> | Used to draw graphics, on the fly, via scripting (usually JavaScript) |
<figure> | Permet de grouper une image avec la légende qui l’accompagne |
<figcaption> | Permet de définir une légende, à l’intérieur d’un élément <figure> |
<img> | Définit une image |
<map> | Defines a client-side image-map |
<picture> | Un contenur d’image pouvant inclure différentes variantes – W3C / caniuse / MDN |
<source> | Defines multiple media resources for media elements (<video> and <audio>) |
<svg> | Définit une image dans le format vectoriel SVG |
<track> | Définit une piste de texte (sous-titre) pour un élément média (<video> ou <audio>) |
<video> | Définit un contenu vidéo |
Formulaires, interactivité
<button> | Defines a clickable button |
<fieldset> | Groups related elements in a form |
<form> | Defines an HTML form for user input |
<input> | Defines an input control |
<kbd> | Defines keyboard input |
<keygen> | Defines a key-pair generator field (for forms) |
<label> | Defines a label for an <input> element |
<legend> | Defines a caption for a <fieldset> element |
<meter> | Defines a scalar measurement within a known range (a gauge) |
<optgroup> | Defines a group of related options in a drop-down list |
<option> | Defines an option in a drop-down list |
<output> | Defines the result of a calculation |
<param> | Defines a parameter for an object |
<progress> | Indique l’état d’avancement d’un travail (barre de progression). support dès IE10, Safari 6. |
<select> | Defines a drop-down list |
<textarea> | Defines a multiline input control (text area) |
<var> | Defines a variable |
Tableaux
<table> | Définit un tableau. W3C, |
<tr> | Définit un rang horizontal |
<td> | Définit une cellule |
<th> | Defines a header cell in a table |
<caption> | Représente le titre d’un tableau. MDN |
<colgroup> | Specifies a group of one or more columns in a table for formatting |
<col> | Specifies column properties for each column within a <colgroup> element |
<thead> | Regroupe l’en-tête d’un tableau |
<tbody> | Regroupe le corps d’un tableau |
<tfoot> | Regroupe le pied d’un tableau. W3C. |
Balises récentes et expérimentales
<datalist> | Specifies a list of pre-defined options for input controls |
<dialog> | Defines a dialog box or window. Pas supporté par IE, Firefox, Safari. |
<menu> | Defines a list/menu of commands |
<menuitem> | Defines a command/menu item that the user can invoke from a popup menu |
<picture> | Permet de définir des images responsives. |
Balises générales
<!--...--> | Définit un commentaire (code qui ne sera pas affiché) |
<!DOCTYPE> | Définit le type de document |
<meta> | Définit des métadonnes au sujet d’un document HTML |
<title> | Définit le titre du document |
<base> | Définit une base pour toutes les URL relatives du document |
<head> | Une section contenant des informations au sujet du document |
<html> | Définit la racine d’un document HTML |
<iframe> | Définit une inline frame : une fenêtre pouvant charger des contenus depuis une autre URL |
<link> | Définit une relation entre un document et une ressource externe (le plus souvent, des feuilles de styles) |
<noscript> | Définit un contenu alternatif pour les usagers ne pouvant pas exécuter des scripts |
<script> | Définit un script qui sera exéctué par le navigateur |
<style> | Définit des styles pour le document |
Autres balises
<area> | Defines an area inside an image-map |
<embed> | Defines a container for an external (non-HTML) application |
<bdi> | Isolates a part of text that might be formatted in a different direction from other text outside it |
<bdo> | Overrides the current text direction |
<object> | Defines an embedded object |
<ruby> | Defines a ruby annotation (for East Asian typography) |
<rp> | Defines what to show in browsers that do not support ruby annotations |
<rt> | Defines an explanation/pronunciation of characters (for East Asian typography) |
Balises obsolètes
Balises qui ne sont plus supportées en HTML5:
<acronym> | Use <abbr> instead. Defines an acronym. |
<applet> | Use <embed> or <object> instead. Defines an embedded applet (application Java). |
<basefont> | Use CSS instead. Specifies a default color, size, and font for all text in a document. |
<big> | Use CSS instead. Defines big text. |
<center> | Use CSS instead. Defines centered text. |
<dir> | Use <ul> instead. Defines a directory list. |
<font> | Use CSS instead. Defines font, color, and size for text. |
<frame> | Defines a window (a frame) in a frameset. |
<frameset> | Defines a set of frames. |
<noframes> | Defines an alternate content for users that do not support frames. |
<strike> | Use <del> or <s> instead. Defines strikethrough text. |
<tt> | Use CSS instead. Defines teletype text. |
Les versions du langage HTML.
Durant ses 25 années d’existance, le standard HTML a connu diverses évolutions. La première version proposée en 1991 comportait 18 éléments. Différentes versions du standard HTML sont publiées, jusqu’à la version HTML 4.01 en 1999.
S’ensuit une période de stagnation, durant laquelle le groupe de travail HTML du World Wide Web Consortium (W3C) focalise ses efforts sur un nouveau langage, le XHTML, qui s’avère une impasse.
En 2004, un groupe de travail concurrent se forme, nommé WHATWG (Web Hypertext Application Technology Working Group), rassemblant des représentants de Apple, Mozilla et Opera. Ce groupe élabore le standard HTML5 entre 2004-2007. En janvier 2008, la première spécification est publiée, qui est adoptée comme référence par le groupe de travail HTML du W3C.
HTML5
Dès 2010, les premiers éléments du HTML5 ont commencé à être supportés par les navigateurs, et des livres sur le HTML commencent à être publiés.
Ce n’est qu’en 2014 que le HTML5 devient une recommandation stable du W3C, alors que ses fonctionnalités sont implémentées depuis longtemps dans les navigateurs.
En fin 2016, le W3C rend officielle la version HTML 5.1. En décembre 2017, c’est la version 5.2 qui est officialisée. La version actuellement en travail est la 5.3.
La spécification HTML est maintenue de manière parallèle par les deux groupes de travail:
- La spécification HTML du W3C: https://w3c.github.io/html/
- La spécification HTML du WHATWG: https://html.spec.whatwg.org/multipage/
J’ai toujours dit que la standardisation au W3C, c’est de l’hémoglobine sur les murs dans une ambiance feutrée. – Daniel Glazman
Tout comme les pages HTML ou XHTML, les documents HTML5 nécessitent une déclaration Doctype indiquant la méthode standard de rendu par le navigateur. La décaration s’écrit “<!DOCTYPE html>”
Références:
- HTML5 et l’avenir du web, par Tim Wright, 2009
- The design of HTML5, présentation de Jeremy Keith, donnée à la conférence Fronteers 2010, Amsterdam.
- Un outil pour vérifer le support de votre navigateur: http://html5test.com/
Balises structurantes
Les nouvelles balises structurantes du HTML5:
- header
- section
- article
- nav
- aside
- footer
Définitions:
- header = Section d’introduction d’un article, d’une autre section ou du document entier (en-tête de page).
- section = Section générique regroupant un même sujet, une même fonctionnalité, de préférence avec un en-tête, ou bien section d’application web.
- article = Section de contenu indépendante, pouvant être extraite individuellement du document ou syndiquée (flux RSS ou équivalent), sans pénaliser sa compréhension.
- nav = Section possédant des liens de navigation principaux (au sein du document ou vers d’autres pages).
- aside = Section dont le contenu est un complément par rapport à ce qui l’entoure, qui n’est pas forcément en lien direct avec le contenu, mais qui peut apporter des informations supplémentaires.
- footer = Section de conclusion d’une section ou d’un article, voire du document entier (pied de page).
Pourquoi on ne peut pas mettre de DIV dans un P
Historiquement, les éléments HTML peuvent se présenter de deux manières: sous forme de bloc (“block-level” elements) ou sous forme de ligne (“inline” elements).
Un élément “bloc” va toujours occuper toute la largeur à disposition, contrairement à l’élément “ligne”, qui se limite à la place nécessaire, et tolère des éléments voisins.
Chaque élément possède un aspect par défaut, mais il est possible d’agir dessus avec la propriété CSS “display”. On peut ainsi modifier simplement l’aspect d’un menu: en mode “display-bloc”, ce sera un menu vertical. En mode “inline”, cela devient un menu horizontal.
Avec HTML5, ce mode binaire se complexifie, on se retrouve avec toute une liste de catégories de contenu:
- Contenu de flux (Flow content) – correspond de près au mode “block-level”, et s’applique à la majorité des éléments. Notamment:
<div>,<article>,<blockquote>,<img>,<p>… - Contenu sectionnant (Sectioning content) – les éléments qui définissent des sections:
<article>,<aside>,<nav>,<section> - Contenu de titre (Heading content) – du contenu agissant comme en-tête:
<h1>,<h2>,<h3>etc. - Contenu phrasé (Phrasing content) – le texte du document, tout ce qui peut être contenu dans un paragraphe, notamment:
<a>,<span>. Correspond à peu près au mode “inline”. Attention,<a>appartient à cette catégorie s’il contient seulement du contenu phrasé – sinon il devient Contenu de flux. - Contenu intégré –
<audio>,<canvas>,<embed>,<iframe>,<img>,<math>,<object>,<svg>,<video>… - Contenu interactif –
<button>,<details>,<embed>,<iframe>,<keygen>,<label>,<select>, et<textarea>.
Là où cela devient important: certains éléments ne peuvent contenir que du “phrasing content”. C’est le cas pour les balises <p> ou <h1>.
Visits: 10