Dans cet article, sont présentés :
- Les bases du langage HTML.
- Trois exemples de composition d'une page HTML.
- Le doctype comme structure du document HTML.
- Un exercice d'application.
Pour étendre votre culture sur les technologies web, y compris CSS, HTML et JavaScript, consultez le support en ligne Ressources pour les développeurs, par les développeurs édité par MDN Web Docs (projet collaboratif open source).
Vous pouvez compléter votre veille technologique en consultant le site StatCounter qui fait un état des parts de marché pour les navigateurs Web, les systèmes d'exploitation, les moteurs de recherche et les réseaux sociaux. Certaines parts de marché sont disponibles pour les ordinateurs et les appareils mobiles.
Les bases
HTML signifie « HyperText Markup Language » qu'on peut traduire par « langage de balises pour l'hypertexte ». Il est utilisé afin de créer et de représenter le contenu d'une page web et sa structure. Actuellement, la version du HTML dernièrement référencée, est la version 5.
L'« hypertexte » désigne les liens qui relient les pages web entre elles, que ce soit au sein d'un même site web ou entre différents sites web. Les liens sont un aspect fondamental du Web. Ce sont eux qui forment cette « toile » (ce mot est traduit par web en anglais). En téléchargeant du contenu sur l'Internet et en le reliant à des pages créées par d'autres personnes, vous devenez un participant actif du World Wide Web.
Le langage HTML utilise des « balises » pour annoter du texte, des images et d'autres contenus afin de les afficher dans un navigateur web. Le balisage HTML comprend des « éléments » spéciaux tels que <head>, <title>, <body>, <header>, <nav>, <aside>, <section>, <div>, <article>, <p>, <span>, <picture>, <img>, <ul>, <ol>, <li>, <video>, <footer> et bien d'autres.
Trois exemples de composition d'une page HTML
Ci-dessous, trois exemples de mise en forme traditionnelle d'un site convoquant les éléments les plus courants : <header>, <nav>, <article>, <aside> et <footer>. La composition des pages de votre site doit découlée d'un travail de stratégie éditoriale à partir de vos contenus textuels et iconographiques tout en considérant les besoins de votre cible. Est-ce que mon site sera un support e-commerce, événementiel, culturel… ?
En HTML, le doctype est le préambule <!DOCTYPE html> requis en haut de tous les documents. Son seul but est de garantir que le navigateur fait de son mieux pour suivre les spécifications pertinentes (définies par Le World Wide Web Consortium ou W3C), plutôt que d'utiliser un mode de rendu différent incompatible avec certaines spécifications. Vous pouvez d'ailleurs, vérifier la conformité du code de vos pages HTML en les passant dans la moulinette Internationalization Checker de la plateforme W3C.
Le doctype (contraction de l'anglais document type, littéralement « type de document ») est une instruction au début d'un document HTML spécifiant les règles de sa syntaxe. À chaque version de HTML, les règles d'écriture des pages ont évolué. La version 5, qui est la dernière version, est de plus en plus répandue et elle apporte de nombreuses améliorations. Avec elle, sont apparus ces éléments les plus courants : <header>, <nav>, <section>, <article> et <footer>.
La structure de base d'une page HTML avec un doctype de version 5 s'écrit comme ceci :
Décryptons ce qui est écrit ci-dessus
- <!DOCTYPE html> est la syntaxe utilisée pour décrire le type d'une page HTML de version 5. Elle est plus condensée que les versions précédentes.
- <html> et </html> sont les balises qui contiennent l'ensemble des éléments qui structureront votre page. La balise ouvrante se situe juste après le doctype alors que la balise fermante vient clore l'ensemble de votre page de code.
- <head> et </head> sont les éléments qui regroupent les informations générales sur le document (les métadonnées), incluant son titre, des liens ou des définitions vers des scripts et feuilles de style. Vous remarquerez dans le head de ce doctype, la présence de l'élément de métadonnées <meta charset="utf-8"/>. Cette spécification HTML5 encourage les développeurs Web à utiliser le jeu de caractères UTF-8, qui couvre presque tous les caractères et symboles du monde voir un exemple de page HTML sans cet élément. Veillez à toujours placer cette déclaration d'encodage avant toutes les autres balises contenues dans la section <head>. En effet, celles-ci sont immédiatement concernées, par exemple <title> qui peut déjà faire appel à des caractères en UTF-8.
- <body> et </body> sont les éléments qui enserrent le contenu principal du document HTML. C'est le corps de la page. Retenez qu'il ne peut y avoir qu'un élément body par document.
Une version du doctype plus élaborée
Dans la version affichée ci-dessous, quelques éléments ont été ajoutés pour caractériser davantage notre page HTML : - <lang>, cet attribut précise la langue utilisée pour le contenu de la page, lorsqu'il est placé sur la racine <html>. Une langue bien indiquée sera utile ainsi aux synthèses vocales. Ici nous choisirons lang="fr" pour la spécification de notre langue française.
- <link> placée dans l'en-tête, cette balise permet de mettre en relation la page avec d'autres documents externes. La plupart du temps cela concerne les feuilles de style CSS externes avec une relation du type stylesheet. En HTML5, il n'est plus strictement obligatoire de spécifier l'attribut type.
- <script>, cet élément permet d'ajouter des scripts (JavaScript) qui vont s'éxécuter côté client dans le navigateur dès leur chargement. En HTML5, il n'est plus obligatoire de spécifier l'attribut type. Celui-ci est de toute manière interprété par défaut en text/javascript par tous les navigateurs.
Court exercice pratique : débuter avec le HTML
Nous allons réaliser une première page HTML simple. Pour éditer vos pages HTML, un éditeur de texte basique installé dans le système d'exploitation de votre ordinateur (Bloc-Notes ou TextEdit) peut suffire. Néanmoins, choisir un éditeur spécifique à l'écriture du code est mieux. Je vous conseille, parmi un bon nombre de logiciels, Visual Studio Code. Son interface est très sobre et une aide contextuelle apparaît dès que vous écrivez. Néanmoins il est nécéssaire de disposer de quelques éléments de syntaxe pour démarrer. Après l'avoir téléchargé, vous l'installerez sur votre ordinateur puis le démarrerez.
Après avoir créé un nouveau document (avec Visual Studio Code), vous l'enregistrerez à la racine d'un dossier intitulé projet et il portera le nom d'index.html (expliquer les notions d'arborescence d'un site et de nommage des fichiers). Ensuite, vous rédigerez ce qui suit : (expliquer l'alternative du !)
Après l'enregistrement de votre document, démarrez un navigateur (Google Chrome ou Firefox sont les plus utilisés dans le monde de la programmation) et ouvrez votre page nommée index.html. Et tadam ! RIEN ne s'affiche dans la fenêtre du navigateur, NADA, LE NÉANT ABSOLU 😠🤬 MAIS POURQUOI ?
Eh bien… aucune information textuelle ou iconographique n'a été invitée dans les balises <body></body>. Voilà pourquoi ! Reprenons nos lignes de codes précédentes et ajoutons deux informations : le titre de la page entre les balises <title></title> et une phrase dans le corps de la page entre les balises <body></body> :
