HTML, ou Hypertext Markup Language, est un langage de balisage pour le web qui définit la structure des pages web. C'est quoi le HTML ?
Il s'agit de l'une des composantes de base de tout site Web, qu'il est donc essentiel d'apprendre si vous souhaitez faire carrière dans le développement Web.
Dans cet article, je vais vous expliquer en détail ce qu'est le HTML, comment il fonctionne sur les pages Web, et nous allons également aborder une partie vraiment cool du HTML - le HTML sémantique.
Du coup qu'est-ce que vraiment le HTML ?
Pour comprendre "HTML" de A à Z, examinons chaque mot qui compose l'abréviation :
Hypertexte :
Texte (souvent accompagné d'éléments tels que des images) qui est organisé de manière à relier des éléments connexes.
Balisage :
Un guide de style pour la composition d'un document destiné à être imprimé sur papier ou sur support souple.
Langage :
Un langage qu'un système informatique comprend et utilise pour interpréter les commandes.
Le langage HTML détermine la structure des pages Web. Cette structure seule ne suffit pas pour qu'une page Web soit belle et interactive. Vous utiliserez donc des technologies assistées telles que CSS et JavaScript pour rendre votre HTML beau et ajouter de l'interactivité, respectivement.
Dans ce cas, j'aime décomposer les trois technologies - HTML, CSS et JavaScript - de la manière suivante : elles sont comme un corps humain.
- Le HTML est le squelette,
- CSS est la peau,
- et JavaScript est le système circulatoire, digestif et respiratoire qui donne vie à la structure et à la peau.
Les balises HTML
Étant donné que le langage HTML définit le balisage d'une page Web particulière, vous voudrez que le texte, les images ou d'autres éléments apparaissent de certaines manières.
Par exemple, vous pouvez vouloir que certains textes soient grands, d'autres petits, et d'autres encore en gras, en italique ou sous forme de puces.
Le langage HTML comporte des "balises" qui vous permettent de réaliser ces opérations. Ainsi, il existe des balises pour créer des titres, des paragraphes, des mots en gras, des mots en italique, etc.
L'image ci-dessous décrit l'anatomie d'une balise HTML :
Les éléments HTML
Un élément se compose de la balise d'ouverture, d'un caractère, du contenu et d'une balise de fermeture. Certaines éléments sont dites orphelins, c'est-à-dire qu'ils n'ont pas de balise de fermeture, mais plutôt une source ou un lien vers le contenu que vous souhaitez intégrer à la page Web.
Un exemple d'élément orphelin est l'élément <img/>, utilisé pour incorporer des images sur une page Web.
Les éléments HTML sont souvent utilisés de manière interchangeable avec les balises, mais il existe une petite différence entre les deux. Un élément est une combinaison de la balise ouvrante et fermante, puis du contenu entre elles.
J'ai fait une autre image pour vous aider à visualiser l'anatomie d'un élément HTML :
Les attributs HTML
Les balises HTML prennent également ce que l'on appelle des attributs. Ces attributs sont placés dans la balise d'ouverture et vont du style aux classes en passant par les ids. Ils prennent des valeurs, qui transmettent plus d'informations sur l'élément et vous aident à faire des choses comme le style et la manipulation avec JavaScript.
Dans l'infographie ci-dessous, la balise d'ouverture contient un attribut class dont la valeur est "text". Cet attribut peut être utilisé pour styliser l'élément ou le sélectionner avec JavaScript pour l'interactivité.
Voici l'anatomie d'une page HTML basique :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Definition of HTML</title>
</head>
<body>
<!--Page content such as text and images goes in here-->
</body>
</html>Examinons les parties importantes du code ici :
<!Doctype html> : spécifie que nous utilisons HTML5 dans ce code. Avant l'introduction de HTML5, vous deviez indiquer explicitement dans quelle version de HTML vous codiez avec la balise <!Doctype>. Par exemple, HTML4.0, 3.2, et ainsi de suite. Mais maintenant, nous n'en avons plus besoin. Lorsque "html" est écrit dans le code, le navigateur suppose automatiquement que vous codez en HTML5.
<html></html>: la racine, ou élément de premier niveau, de tout document HTML. Tous les autres éléments doivent être enveloppés dans cet élément.
<head></head>: l'une des parties les plus importantes du document HTML. Les robots d'exploration du Web regardent à l'intérieur des balises d'en-tête pour obtenir des informations importantes sur la page. Elles contiennent des informations telles que le titre de la page, les feuilles de style, les méta-informations pour le référencement, et bien plus encore.
<meta />: Il s'agit d'un élément vide qui transmet des méta-informations sur la page. Ces informations peuvent inclure l'auteur, le type d'encodage utilisé (presque toujours UTF-8), la réactivité, la compatibilité et bien d'autres choses encore. Les robots d'exploration du Web consultent toujours la balise meta pour obtenir des informations sur la page Web, qui joueront un rôle crucial dans le référencement.
<title></title> : définit le titre de la page Web. Il est toujours affiché dans l'onglet du navigateur.
<body></body> : tout le contenu du document HTML se trouve à l'intérieur de la balise body. Il ne peut y avoir qu'une seule <body> balise sur toute la page.
Qu'est-ce que le HTML sémantique ?
Le HTML sémantique signifie que vos balises HTML transmettent la signification réelle de ce pour quoi elles sont utilisées.
La sémantique fait partie intégrante du HTML depuis sa création au début des années 90. Mais elle n'a jamais pris une importance particulière avant la fin des années 90, lorsque les CSS ont commencé à fonctionner dans la plupart des navigateurs.
Avec le HTML sémantique, les balises sémantiquement neutres telles que<div> et <span> sont mal vues car des balises sémantiquement plus descriptives telles que <header>, <nav>, <main>, <section>, <footer> et <article> peuvent faire la même chose qu'elles.
L'un des avantages notables de l'utilisation de balises sémantiques est que les robots d'exploration du Web sont en mesure d'indexer facilement la page Web ou le site Web, ce qui améliore le référencement.
En outre, un site Web qui utilise la sémantique devient plus informatif, plus adaptable et plus accessible aux personnes qui utilisent des lecteurs d'écran pour accéder aux sites Web.
Les balises sémantiques importantes et leur rôle
Examinons quelques-unes des balises HTML sémantiques les plus couramment utilisées :
<header> : L'élément <header> définit la section d'introduction d'une page Web. Il contient des éléments tels que le logo, la navigation, le sélecteur de thème et la barre de recherche.
<nav> : L'élément <nav> spécifie les éléments de navigation de la page tels que accueil, contact, à propos, FAQ, etc.
<main>: L'élément <main> est conventionnellement traité comme le descendant immédiat de la balise. Il contient les sections principales du document HTML en dehors des éléments <header> et <footer> Idéalement, il ne devrait y en avoir qu'un seul dans tout le document HTML.
<section> : L'élément <section> définit une section particulière de la page Web. Il peut s'agir de la section vitrine, de la section à propos, de la section contact, ou autres. Vous pouvez utiliser de nombreuses sections dans un seul document HTML.
<article> : L'élément <article> représente une certaine partie d'une page Web qui transmet des informations particulières. Ces informations peuvent être une combinaison de texte, d'images, de vidéos et d'éléments intégrés. Considérez cet élément comme un article de blog autonome sur une page contenant des extraits d'autres articles de blog.
<aside>: Comme son nom l'indique (en anglais), cela représente une barre latérale sur une page web. Il s'agit généralement d'une partie de la page Web qui n'est pas directement liée au contenu principal.
<footer> : L'élément <footer> accueille des éléments tels que des liens rapides, des informations sur le droit d'auteur ou toute autre donnée relative à l'ensemble du site ou de la page web.
Notez que, puisque les éléments sémantiques véhiculent une signification réelle et indiquent ce que fait un contenu particulier (comme nav pour la navigation, aside pour une barre latérale, etc. Vous devez toujours le faire avec CSS.
Un document HTML sémantique très simple ressemble à ceci :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Definition of HTML</title>
</head>
<body>
<header>
<h1 class="logo">LOGO</h1>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>FAQs</li>
</ul>
</nav>
</header>
<main>
<section class="about-me">
<article>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio magni
est asperiores nemo, adipisci minus itaque quam, rem libero aliquam
nesciunt, nisi inventore assumenda earum repellat labore ratione
architecto eos quis. Soluta mollitia cupiditate dolorem. Consequatur a
soluta laudantium nihil. Molestias, officiis ut! Nobis adipisci
voluptatem quam at officia beatae!
</article>
</section>
<section class="contact-me">
You can find me on
<a href="https://twitter.com/koladechris">Twitter</a> You can find me on
<a href="https://Instagram.com/koladechris">Instagram</a>
</section>
<aside class="address">My Address</aside>
</main>
<footer>© 2023 All Rights Reserved</footer>
</body>
</html>Voici ce que ça devrait ressembler dans le navigateur :
Vous pouvez voir que le contenu à l'intérieur de la balise <aside>
n'est pas dans la barre latérale et que le contenu à l'intérieur de la balise <nav> n'est pas automatiquement disponible comme barre de navigation. C'est pourquoi vous devez encore leur donner l'apparence qu'ils sont censés avoir avec CSS.