Ce support de cours 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>

Si vous tenez à voir la liste de toutes les 120 balises, la voici.

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. Un logo officiel, conçu par l’agence hawaïenne Ocupop, est dévoilé en janvier 2011.

Le logo HTML5

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:

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:

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

Plus d’informations: