Qu’est-ce que le HTML ? Définition, histoire, les bases et exemples

Ah, le HTML ! Si vous êtes tombé sur cet article, c’est que vous êtes curieux d’en savoir plus sur ce langage informatique qui a révolutionné notre façon de naviguer sur la toile. Alors, qu’est-ce que le HTML ? Définition, histoire, évolution, les bases et exemples sont au programme de cette escapade numérique. En route pour le voyage, chers internautes fans du Général Ouille !

Qu’est-ce que le HTML ? Définition et histoire

Le HTML, ou HyperText Markup Language, est un langage de balisage essentiel à la création et à l’organisation des pages web qui peut être parfois considéré comme un langage de programmation. Il joue un rôle primordial dans la description de la structure et de la présentation d’un document en englobant une myriade d’éléments tels que les textes, les images, les liens hypertexte et bien plus encore. Autrement dit, le HTML est véritablement la pierre angulaire et l’épine dorsale du web. L’histoire fascinante du HTML débute en 1989 avec Tim Berners-Lee, un physicien britannique œuvrant au sein du CERN, l’Organisation européenne pour la recherche nucléaire et inventeur du Web. Il avait pour ambition de simplifier et d’optimiser l’échange d’informations entre les chercheurs du monde entier.

Au fil des années, le HTML a subi de nombreuses améliorations, passant de simples balises de texte à un ensemble beaucoup plus riche et diversifié d’éléments de mise en page et de fonctionnalités interactives. Depuis lors, le HTML a connu une ascension fulgurante et une évolution constante, s’imposant comme le langage incontournable et omniprésent qu’il est aujourd’hui dans le monde du web. Grâce à des avancées majeures comme l’introduction du CSS et du JavaScript, le HTML est désormais un outil puissant permettant de créer des sites web esthétiquement attrayants et dynamiques, aptes à répondre aux exigences modernes du web design et de l’expérience utilisateur.

L’évolution du HTML au fil des années

Les différentes versions du HTML Depuis sa création, le HTML a connu plusieurs versions majeures, qui ont chacune apporté leur lot de nouveautés. Voici un aperçu de l’évolution du HTML :

HTML 2.0 (1995) : première version standardisée du langage

Avant cette version, le HTML était principalement utilisé pour structurer des documents textuels simples et afficher des images. HTML 2.0 a permis d’établir des bases solides pour le développement futur du langage en instaurant des normes communes pour tous les navigateurs.

Parmi les fonctionnalités clés d’HTML 2.0, on peut citer :

• Les balises de base : HTML 2.0 a introduit plusieurs balises fondamentales, telles que les balises de titre (<h1> à <h6>), les balises de paragraphe (<p>), les balises de liste (<ul>, <ol> et <li>) et les balises de tableaux (<table>, <tr>, <td> et <th>) ;
• Les liens hypertexte : Grâce à la balise <a>, HTML 2.0 a permis de créer des liens hypertexte entre différentes pages web, permettant ainsi aux utilisateurs de naviguer facilement d’une page à l’autre ;
• Les images : La balise <img> a été ajoutée pour faciliter l’intégration d’images dans les pages web. Cela a permis aux développeurs de créer des pages web plus attrayantes visuellement ;
• Les formulaires : HTML 2.0 a également introduit les balises de formulaire, telles que <form>, <input> et <select>. Ces balises ont permis de créer des formulaires interactifs sur les pages web, offrant ainsi aux utilisateurs la possibilité de soumettre des informations aux serveurs ;
• La compatibilité entre les navigateurs : L’un des principaux objectifs d’HTML 2.0 était de garantir une meilleure compatibilité entre les différents navigateurs web. Ainsi, les normes établies par cette version ont permis de s’assurer que les pages web s’affichent de manière cohérente sur les navigateurs de l’époque, tels que Netscape Navigator et Internet Explorer.

HTML 3.2 (1997) : ajout de nouvelles balises et attributs

HTML 3.2 a également apporté un certain nombre de nouvelles balises et attributs, permettant aux développeurs de créer des pages web plus complexes et plus interactives. Voici quelques-unes des principales améliorations et nouveautés introduites par HTML 3.2 :

1. Balises d’apparence : HTML 3.2 a introduit des balises permettant de modifier l’apparence des textes, telles que <font>, <strike> et <u>. Ces balises permettaient aux développeurs de personnaliser la taille, la couleur et le style des polices, ainsi que d’ajouter des effets de soulignement ou de barré aux textes ;
2. Attributs supplémentaires pour les images : De nouveaux attributs, tels que « width » et « height », ont été ajoutés à la balise <img>, permettant aux développeurs de spécifier les dimensions des images et d’améliorer la mise en page des pages web ;
3. Tableaux avancés : HTML 3.2 a apporté des améliorations significatives aux tableaux, notamment l’ajout d’attributs tels que « colspan » et « rowspan », permettant de fusionner des cellules horizontalement et verticalement. De plus, les balises <caption> et <thead> ont été introduites pour ajouter des titres et des en-têtes aux tableaux ;
4. Balises de script : La balise <script> a été ajoutée pour faciliter l’intégration de scripts, tels que JavaScript, aux pages web. Cela a permis aux développeurs d’ajouter des fonctionnalités interactives et dynamiques à leurs sites web ;
5. Frames : HTML 3.2 a également introduit les balises <frameset>, <frame> et <noframes> pour créer des cadres (ou frames) permettant d’afficher plusieurs documents HTML dans une seule fenêtre de navigateur. Bien que cette fonctionnalité ait été largement utilisée à l’époque, elle est aujourd’hui considérée comme obsolète et n’est plus recommandée ;
6. Autres balises et attributs : HTML 3.2 a également introduit d’autres balises et attributs pour améliorer la mise en forme et la présentation des pages web, tels que <div>, <span>, « bgcolor » pour les arrière-plans et « align » pour l’alignement du texte et des éléments.

HTML 4.0 (1997) : introduction du CSS pour séparer la mise en forme du contenu

Cette version du HTML a été une révolution majeure dans le développement du langage HTML en raison du fait qu’elle a introduit le CSS (Cascading Style Sheets) pour séparer la mise en forme des pages web de leur contenu, permettant ainsi aux développeurs de créer des sites web plus flexibles, plus cohérents et plus faciles à maintenir. Voici quelques-unes des avancées clés apportées par HTML 4.0 :

• Intégration du CSS : Avec l’introduction des CSS, HTML 4.0 a permis aux développeurs de définir le style et la mise en forme des éléments HTML dans des feuilles de style séparées, plutôt que d’inclure ces informations directement dans le code HTML. Cela a facilité la réutilisation des styles, la cohérence visuelle et la maintenance des sites web ;
• Accessibilité : HTML 4.0 a mis l’accent sur l’amélioration de l’accessibilité des pages web pour les personnes handicapées. Plusieurs attributs et balises ont été ajoutés pour faciliter la navigation et la compréhension des pages web, tels que « tabindex » pour la navigation au clavier, « alt » pour les descriptions textuelles des images (et particulièrement utile pour le référencement naturel), et les balises <abbr> et <acronym> pour les abréviations et les acronymes ;
• Internationalisation : HTML 4.0 a également pris en compte la diversité linguistique du web en ajoutant des attributs tels que « lang » et « dir », permettant de spécifier la langue et la direction d’écriture du texte (de gauche à droite ou de droite à gauche) dans les pages web ;
• Balises sémantiques : HTML 4.0 a introduit des balises sémantiques pour structurer le contenu de manière plus significative, telles que <blockquote> pour les citations, <q> pour les citations courtes et <cite> pour les références ;
• Support du JavaScript : HTML 4.0 a amélioré le support du JavaScript en ajoutant des attributs tels que « onload », « onunload » et « onclick » pour permettre l’exécution de scripts lors d’événements spécifiques ;
• Obsolescence des balises de présentation : La version 4.0 a marqué le début du déclin des balises de présentation, telles que <font>, au profit des CSS. Cette évolution a encouragé les développeurs à adopter des pratiques de conception web plus modernes et plus efficaces.

HTML 4.01 (1999) : amélioration de la prise en charge des normes internationales

HTML 4.01, publié en 1999, est une mise à jour mineure de HTML 4.0, visant principalement à améliorer la prise en charge des normes internationales et à corriger certaines erreurs. Voici quelques-unes des avancées clés apportées par HTML 4.01 :

• Unicode : HTML 4.01 a renforcé le support d’Unicode, permettant ainsi une meilleure prise en charge des caractères spéciaux et des alphabets non latins. Grâce à cette évolution, les développeurs ont pu créer des pages web dans de nombreuses langues différentes, favorisant ainsi la diversité linguistique et culturelle sur le web ;
• Corrections et clarifications : Cette mise à jour a apporté des corrections et des clarifications à certaines spécifications du langage, améliorant ainsi la cohérence et la compréhension des normes pour les développeurs ;
• Amélioration de l’accessibilité : HTML 4.01 a également introduit quelques améliorations en matière d’accessibilité, notamment l’ajout de l’attribut « summary » pour les tableaux, permettant de fournir un résumé textuel de leur contenu pour les lecteurs d’écran ;
• Prise en charge des entités de caractères : HTML 4.01 a amélioré la prise en charge des entités de caractères, permettant aux développeurs d’utiliser des caractères spéciaux et des symboles, tels que les guillemets ou les signes de monnaie, de manière plus précise et cohérente ;
• Validation des documents : La mise à jour a également encouragé l’utilisation de la validation des documents HTML pour vérifier leur conformité aux normes. Cela a permis de s’assurer que les pages web étaient correctement structurées et accessibles, quel que soit le navigateur utilisé.

HTML5 (2014) : ajout de nouvelles fonctionnalités pour les applications web et les médias

HTML5, publié en 2014, représente la dernière révolution majeure dans l’évolution du langage HTML (et actuelle), avec l’ajout de nombreuses nouvelles fonctionnalités pour les applications web et les médias. Cette version avait été développée en parallèle du projet XHTML 2.0, qui avait finalement été abandonné en sa faveur. Voici quelques-unes des avancées clés apportées par ce langage :

• Abandon de XHTML 2.0 : Le projet XHTML 2.0 visait à créer un langage basé sur XML, plus strict et cohérent que HTML. Toutefois, il s’est avéré trop complexe et moins flexible que HTML, conduisant finalement à l’abandon du projet en faveur du développement de HTML5, plus pratique et fonctionnel ;
• Balises pour les médias : HTML5 a introduit les balises <video> et <audio>, permettant aux développeurs d’intégrer facilement des contenus multimédias, tels que des vidéos et des fichiers audio, dans leurs pages web sans avoir recours à des plugins externes tels que Flash ;
• API et fonctionnalités pour les applications web : HTML5 a ajouté un grand nombre d’API (interfaces de programmation d’applications) et de fonctionnalités pour faciliter le développement d’applications web complexes et interactives. Parmi ces nouveautés figurent le support de la géolocalisation, le stockage local, le glisser-déposer, le dessin en 2D avec la balise <canvas>, et la communication en temps réel avec WebSockets ;
• Sémantique améliorée : HTML5 a enrichi le langage avec de nouvelles balises sémantiques pour structurer le contenu de manière plus claire et cohérente, telles que <header>, <footer>, <nav>, <section>, <article> et <aside>. Ces balises permettent aux développeurs de créer des pages web mieux organisées et plus accessibles ;
• Support mobile : HTML5 a été conçu avec une attention particulière pour les appareils mobiles, offrant une meilleure prise en charge des écrans tactiles, des performances optimisées et une consommation réduite de la bande passante ;
• Accessibilité et internationalisation : HTML5 a poursuivi les efforts d’amélioration de l’accessibilité et de l’internationalisation initiés par les versions précédentes, en ajoutant de nouveaux attributs et balises pour faciliter la navigation et la compréhension des pages web pour tous les utilisateurs, quelle que soit leur langue ou leurs capacités.

Clairement, HTML5 a marqué un tournant majeur dans l’histoire du langage HTML, en offrant de nouvelles fonctionnalités et possibilités pour les applications web et les médias, et en laissant derrière lui le projet XHTML 2.0 que travaillait en parallèle le W3C. Grâce à ces évolutions, les développeurs Web ont pu créer des sites web plus riches, plus interactifs et plus adaptés aux besoins du web moderne.

Les déclarations de documents en HTML

Les déclarations de document, également appelées DOCTYPE, sont une partie importante de tout document HTML car elles aident les navigateurs à comprendre comment interpréter le code HTML. Voici le code des déclarations de document pour quelques versions HTML importantes (mis à part le HTML 5, les autres sont de nos jours de plus en plus rares) :

• HTML 4.01 Strict : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
• HTML 4.01 Transitional : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
• XHTML 1.0 Strict : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
• XHTML 1.0 Transitional : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
• HTML5 : <!DOCTYPE html>

Il est important de noter que la déclaration de document doit être placée au début du document HTML, avant toute autre balise ou contenu. L’utilisation de la déclaration de document appropriée pour la version HTML que vous utilisez peut aider à assurer la compatibilité et la cohérence de votre code HTML sur différents navigateurs et plateformes.

Le rôle joué par le W3C dans les versions du HTML

Le W3C (World Wide Web Consortium), fondé lui aussi en 1994 par Tim Berners-Lee, joue un rôle essentiel dans l’évolution et la standardisation des versions HTML. En tant que consortium international, il établit des normes pour garantir la compatibilité et la pérennité des technologies web. Le W3C est chargé de définir les normes et les spécifications des différentes versions HTML, assurant ainsi la compatibilité et l’interopérabilité des sites web sur divers navigateurs et plateformes.

En collaborant étroitement avec les acteurs du web, tels que les développeurs, les fabricants de navigateurs et les experts en accessibilité, le W3C élabore des recommandations basées sur les besoins et les tendances du marché pour améliorer l’expérience utilisateur, l’accessibilité et la performance des sites web. De plus, le W3C fournit des outils et des ressources pour valider la conformité du code HTML aux normes établies, assurant ainsi une structure correcte et une accessibilité des pages web sur divers navigateurs et dispositifs.

Le consortium encourage également l’adoption de bonnes pratiques de développement web, telles que l’utilisation de balises sémantiques, l’accessibilité et l’internationalisation, contribuant à un web plus inclusif et accessible à tous. Enfin, le W3C coopère avec d’autres organisations et groupes de travail, tels que l’Internet Engineering Task Force (IETF) et l’Internationalization Working Group, pour coordonner le développement des normes et des technologies web et assurer une évolution harmonieuse et cohérente.

Les bases du HTML : syntaxe et balises courantes

La syntaxe du HTML Le HTML est composé d’éléments appelés balises, qui permettent de structurer le contenu d’une page. Chaque balise est entourée de chevrons (< et >), et la plupart d’entre elles nécessitent une balise d’ouverture et une balise de fermeture, comme suit :

<b>Texte en gras</b>

Des exemples de balises courantes

Voici quelques exemples de balises fréquemment utilisées en HTML :

<h1> à <h6> : balises de titres de différents niveaux

Les balises HTML <h1> à <h6> sont des éléments utilisés pour définir les titres et les sous-titres dans un document web, notamment sur les blogs WordPress. Ces balises permettent d’organiser le contenu de manière hiérarchique, facilitant ainsi la compréhension et la navigation pour les utilisateurs. Voici un exemple d’utilisation de ces balises pour structurer un article en ligne en ce limitant à trois niveaux (on peut aller jusqu’à <h6> :

<h1>Les meilleures destinations de voyage en Europe</h1>
<p>Paragraphe introductif de l’article appelé également « Chapeau » ou « Chapô » (terme journalistique)</p>
<h2>France</h2>
<p>présentation des points abordés</p>
<h3>Paris</h3>
<p>Explications sur Paris</p>
<h3>Provence</h3>
<p>Explications sur la Provence</p>
<h3>Côte d’Azur</h3>
<p>Explications sur la Côte d’Azur</p>
<h2>Italie</h2>
<p>présentation des points abordés</p>
<h3>Rome</h3>
<p>Explications sur Rome</p>
<h3>Venise sur Venise</h3>
<p>Explications</p>
<h3>Toscane</h3>
<p>Explications sur la Toscane</p>
<h2>Espagne</h2>
<p>présentation des points abordés</p>
<h3>Barcelone</h3>
<p>Explications sur Barcelone</p>
<h3>Madrid</h3>
<p>Explications sur Madrid</p>
<h3>Andalousie</h3>
<p>Explications sur l’Andalousie</p>

<a> : balise de lien hypertexte

La balise HTML <a> est un élément essentiel pour créer des liens hypertextes sur les pages web. Elle permet de connecter différentes pages entre elles, d’accéder à des ressources externes ou de créer des liens vers des adresses e-mail. Voici un exemple d’utilisation de la balise <a> pour insérer différents types de liens dans un document web :

<p>Pour en savoir plus sur le HTML, consultez le site du <a href= »https://www.w3.org/ »>W3C</a>.</p>

<p>Visitez notre page de <a href= »contact.html »>contact</a> pour nous envoyer un message.</p>

<p>Si vous souhaitez nous envoyer un e-mail directement, cliquez <a href= »mailto:info@example.com »>ici</a>.</p>

Dans cet exemple, la première balise <a> crée un lien vers le site externe du W3C ; Etant donné que nous sommes sur Ouille.info, un tel lien serait nommé « backlink ». La deuxième balise <a> crée un lien vers une page interne de contact, et la troisième balise <a> crée un lien pour envoyer un e-mail directement à une adresse spécifique. L’attribut « href » est utilisé pour indiquer l’URL ou l’adresse e-mail cible du lien.

Les liens hypertextes jouent un rôle fondamental dans la navigation et la structure du web (c’est ce que l’on appelle « l’âme du Web »), permettant aux utilisateurs de passer facilement d’une page ou d’une ressource à une autre, et facilitant ainsi l’accès à l’information et la découverte de nouveaux contenus.

<img> : balise d’image

La balise HTML <img> est utilisée pour insérer des images dans les pages web. Elle permet d’ajouter des éléments visuels tels que des photos, des graphiques ou des illustrations, qui peuvent contribuer à la qualité esthétique et informative d’un document. Voici un exemple d’utilisation de la balise <img> pour insérer une image dans un document HTML :

<img src= »image.jpg » alt= »Une image de montagne »>

Dans l’exemple ci-dessus, l’attribut « src » est utilisé pour indiquer l’emplacement de l’image, tandis que l’attribut « alt » fournit une description alternative de l’image pour les utilisateurs qui ne peuvent pas la voir (par exemple, les utilisateurs de lecteurs d’écran). Les balises <img> peuvent également être utilisées avec des attributs supplémentaires pour spécifier la taille, le style et le format de l’image, offrant ainsi un meilleur contrôle sur l’apparence de l’image dans le document HTML.

Les images sont souvent utilisées pour ajouter des éléments visuels et contextuels aux pages web, contribuant à la compréhension et à l’engagement des utilisateurs. Les balises <img> permettent aux développeurs de créer des pages web plus dynamiques et visuellement attrayantes, en offrant la possibilité d’intégrer des images dans les documents HTML.

<ul> et <ol> : balises de listes non ordonnées et ordonnées, respectivement

Les balises HTML <ul> et <ol> sont utilisées pour créer des listes dans les pages web. La balise <ul> est utilisée pour créer des listes non ordonnées, tandis que la balise <ol> est utilisée pour créer des listes ordonnées. Voici un exemple d’utilisation de ces balises pour créer des listes dans un document HTML :

<h2>Liste des ingrédients :</h2>
<ul>
<li>Farine</li>
<li>Sucre</li>
<li>Oeufs</li>
<li>Lait</li>
</ul>

<h2>Liste des tâches à effectuer :</h2>
<ol>
<li>Faire les courses</li>
<li>Préparer le repas</li>
<li>Mettre la table</li>
<li>Nettoyer la cuisine</li>
</ol>

La balise <ul> est utilisée pour créer une liste non ordonnée des ingrédients, avec chaque élément de liste étant créé avec la balise <li>. La balise <ol> est utilisée pour créer une liste ordonnée des tâches à effectuer, également avec chaque élément de liste étant créé avec la balise <li>. Les balises <ul> et <ol> sont souvent utilisées en combinaison avec des feuilles de style CSS pour personnaliser l’apparence des listes, offrant ainsi un meilleur contrôle sur la présentation visuelle des éléments de la liste.

Pour aller plus loin et progresser en HTML

Si vous êtes intéressé par l’apprentissage du HTML, il existe plusieurs ressources en ligne pour vous aider à approfondir vos connaissances. Le site du W3C propose des tutoriels et des guides pour apprendre le HTML, ainsi que des outils de validation et des recommandations pour les développeurs.

Codecademy, W3Schools ou encore un site comme OpenClassrooms sont également d’excellentes plateformes en ligne pour apprendre le HTML et d’autres langages de programmation, avec des cours interactifs et des projets pratiques. Enfin, il existe de nombreux livres et ressources imprimées pour apprendre le HTML, disponibles dans les librairies en ligne et les magasins spécialisés en informatique.

R.C.