Comprendre HTML : structure et balises
Auteur : Rédaction Domeny.ForSale Publié le
En bref : HTML est un langage de balisage qui décrit la structure et le sens du contenu d’une page web. Il indique au navigateur quelles parties sont des titres, des paragraphes, des liens, des images ou des formulaires. Ce n’est pas un langage de programmation : CSS sert principalement à définir l’apparence de la page, tandis que JavaScript est souvent utilisé pour ajouter des comportements et des interactions.
À quoi sert HTML dans une page web ?
Le sigle HTML vient de l’anglais HyperText Markup Language, qui signifie « langage de balisage hypertexte ». L’« hypertexte » désigne un texte relié par des liens à d’autres documents ou portions de contenu. Les « balises » sont des indications inscrites dans le code qui attribuent un rôle précis aux différentes parties du document.
Lorsque vous ouvrez une page, le navigateur lit le code HTML et construit la structure du document à partir de celui-ci. Il affiche ensuite le contenu à l’écran, en tenant également compte des styles et du fonctionnement des scripts, s’ils sont présents. L’utilisateur voit généralement le résultat de ce processus, et non le code lui-même.
Par exemple, la page d’un café peut présenter le nom de l’établissement comme titre principal, une description sous forme de paragraphe, le menu sous forme de liste et un lien pour réserver. HTML définit la nature de ces éléments, sans nécessairement déterminer leur couleur ni la place qu’ils occupent à l’écran.
Balises, éléments et attributs : comment lire HTML ?
Une balise est une indication écrite entre chevrons, par exemple <p>. De nombreux éléments possèdent une balise ouvrante et une balise fermante : dans <p>Horaires d’ouverture</p>, les balises entourent le contenu du paragraphe. L’ensemble, c’est-à-dire les balises et leur contenu, forme un élément HTML.
Tous les éléments n’entourent pas du texte. L’élément img, qui sert à intégrer une image, ne possède pas de balise fermante. Les informations nécessaires, comme l’adresse du fichier, sont fournies par ses attributs.
Un attribut est une information supplémentaire placée dans la balise ouvrante. L’attribut href définit la destination d’un lien, src indique la source d’une image et lang permet de déclarer la langue du document ou d’une de ses parties. Pour une image, l’attribut alt fournit un texte alternatif ; son contenu dépend du rôle de l’image et reste généralement vide si celle-ci est purement décorative.
Pour commencer, il est utile de connaître quelques éléments :
h1–h6— titres de différents niveaux ;p— paragraphe de texte ;a— lien, lorsqu’il possède un attributhref;uletli— liste non ordonnée et ses éléments ;img— image ;button— bouton.
Il est possible d’imbriquer des éléments dans d’autres éléments, mais certaines règles doivent être respectées. Une liste contient des éléments de liste, et un lien peut faire partie d’un paragraphe. Les navigateurs tentent de corriger les erreurs de code : le simple fait qu’une page s’affiche correctement ne prouve donc pas que son code HTML est valide.
En quoi HTML diffère-t-il de CSS et de JavaScript ?
Ces trois technologies fonctionnent souvent ensemble, mais remplissent des rôles différents. CSS, ou feuilles de style en cascade, décrit la présentation du document. JavaScript est un langage de programmation qui permet notamment de réagir aux actions de l’utilisateur et de modifier le contenu de la page.
| Technologie | Rôle principal | Exemple dans un formulaire |
|---|---|---|
| HTML | Structure et sens | Champ d’adresse e-mail, libellé et bouton |
| CSS | Apparence et mise en page | Couleurs, espacements et largeur des champs |
| JavaScript | Logique et comportement | Mise à jour d’un message sans recharger la page |
HTML ne sert pas à écrire des algorithmes, des boucles ou des calculs personnalisés ; il n’est donc pas considéré comme un langage de programmation. Cela ne signifie pas pour autant qu’une page sans JavaScript soit nécessairement dépourvue d’interactivité. Les liens fonctionnent de manière autonome, et le navigateur peut gérer l’envoi d’un formulaire ou une vérification élémentaire d’un champ obligatoire grâce aux fonctionnalités de HTML.
Une simple page de présentation peut être créée uniquement en HTML. CSS permettra d’en soigner l’apparence, et JavaScript ne sera nécessaire que si le comportement souhaité dépasse les possibilités du document et du navigateur seuls.
Pourquoi le sens des éléments est-il plus important que leur apparence ?
Le HTML sémantique consiste à choisir les éléments selon leur sens. Un titre doit être un titre dans le code, et non simplement un texte agrandi à l’aide de styles. De même, un lien sert à accéder à une autre page, tandis qu’un bouton sert généralement à exécuter une action.
Cette distinction aide les technologies d’assistance, comme les lecteurs d’écran, à restituer correctement le contenu. Une personne qui utilise un tel outil peut, par exemple, naviguer de titre en titre. Si l’auteur se contente d’agrandir des paragraphes ordinaires, cette navigation ne reflétera pas l’organisation visible de la page.
Un bouton créé avec l’élément approprié bénéficie aussi d’une prise en charge native du clavier. Reproduire cette même fonction sur un simple fragment de texte demande un travail supplémentaire. Un code HTML correct constitue une base de l’accessibilité, sans toutefois garantir à lui seul l’accessibilité de tout le site.
Comment commencer à pratiquer HTML ?
Un éditeur de texte et un navigateur suffisent pour faire vos premiers essais. Un document HTML contient généralement une déclaration de type de document, l’élément principal html, une section head avec les métadonnées et une section body avec le contenu de la page. Les métadonnées décrivent le document : elles comprennent notamment l’encodage des caractères et le titre affiché dans l’onglet du navigateur.
L’exercice le plus simple consiste à créer une page locale avec une courte présentation :
- Créez un fichier texte dans l’éditeur et enregistrez-le sous le nom
index.html, en veillant à ce qu’il ne reçoive pas l’extension supplémentaire.txt. - Construisez la structure de base du document, puis ajoutez un titre, un paragraphe et une liste de services dans la section
body. - Ouvrez le fichier dans le navigateur. Après chaque modification, enregistrez-le et actualisez la page.
- Utilisez l’option « Inspecter » ou « Inspecter l’élément » pour voir comment le navigateur interprète la structure.
Il n’est pas nécessaire de publier ce fichier local ni d’acheter un nom de domaine pour l’utiliser. Commencez par organiser le contenu sans couleurs ni ornements : vous pourrez ainsi vérifier plus facilement que vous comprenez le rôle des éléments avant de passer à la mise en forme.
À lire aussi : Qu’est-ce que 2FA ?
À lire aussi
