Le langage HTML (HyperText Markup Language) est le fondement de la création de sites web. Comprendre le HTML est essentiel pour tout développeur web ou toute personne souhaitant créer du contenu en ligne. Pour moi qui crée, gère et alimente plusieurs sites web, connaître les bases du langage HTML est essentiel. J’ai appris petit à petit, grâce à des tutoriels, des articles et des cours en ligne de type MOOC, notamment sur OpenClassRooms. D’ailleurs, pour vous former dans de nombreux domaines du web, je vous conseille vivement cette plateforme. Mais revenons au langage HTML, à quoi il sert et comment on l’utilise. On ne va pas faire ici un cours complet, ce serait trop long. L’idée est déjà de vous offrir un aperçu de ce langage et de son utilisation.
Le langage HTML : définition
Le langage HTML est un langage de balisage utilisé pour créer et structurer le contenu des pages web. Il s’agit d’un langage de base pour le développement web et il est interprété par les navigateurs web pour afficher le contenu d’une page de manière structurée et visuellement agréable. Le HTML utilise des balises pour définir différents éléments de contenu, tels que les titres, les paragraphes, les listes, les liens, les images, etc.
Comprendre les balises HTML et leurs attributs
Le langage HTML n’est pas très complexe à comprendre. Il repose sur deux éléments : les balises, encadrées de chevrons, et les attributs qui permettent de compléter les balises.
Qu’est-ce qu’une balise HTML ?
Une balise HTML est un élément de code utilisé pour marquer le début et la fin d’un élément de contenu sur une page web. Les balises sont entourées de chevrons (“<” et “>”). Il existe deux types de balise : les balises en paire et les balises orphelines. Les balises en paire sont soit des balises ouvrantes (<balise>), soit des balises fermantes (</balise>). Par exemple, la balise <p> est utilisée pour marquer le début d’un paragraphe, tandis que la balise “</p>” marque la fin du paragraphe. Les balises orphelines est auto-fermante, c’est-à-dire qu’elle n’a pas besoin d’encadrer un élément.
Qu’est-ce qu’un attribut ?
Les attributs complètent les balises pour donner des informations supplémentaires. Un attribut est situé dans la balise ouvrante d’une balise en paire, ou directement dans une balise orpheline, comme <img>. Le rôle des attributs est important, et même essentiel, comme on va le voir plus loin.
La structure de base d’un fichier HTML
Un fichier HTML est organisé en plusieurs sections, chacune ayant un rôle spécifique dans la création de la page web. Voici la structure de départ d’un fichier HTML :
- <!DOCTYPE html> : Cette déclaration spécifie la version de HTML utilisée dans le document, ici en HTML5.
- <html> : La balise <html> enveloppe tout le contenu de la page web.
- <head> : La balise <head> contient les métadonnées de la page, telles que le titre, les liens vers les feuilles de style CSS, les scripts JavaScript, etc.
- <title> : La balise <title> définit le titre de la page web, qui s’affiche dans la barre de titre du navigateur.
- <body> : La balise <body> contient tout le contenu visible de la page web, y compris les paragraphes, les titres, les images, les liens, etc.
D’autres éléments présents au début d’un fichier HTML
Dans cette structure de base, on va souvent donner d’autres informations au navigateur. Elles jouent un rôle essentiel pour que le fichier s’affiche lisiblement. Par exemple, on va donner une indication sur la langue utilisée dans la page web, à l’aide de l’attribut lang. Une précision toute bête, qui évite des soucis d’affichage. C’est dans la balise <html> qu’on va apporter cette information de la façon suivante. Bien sûr, il existe des codes pour toutes les langues, même si je n’en indique ici que trois :
- <html lang=”fr”> pour le français
- <html lang=”en”> pour l’anglais
- <html lang=”es”> pour l’espagnol
A cette information on ajoute souvent la balise orpheline <meta charset=”utf-8″>, qui indique l’encodage utilisé dans le fichier HTML, c’est-à-dire la manière dont les caractères spéciaux, comme les accents, doivent d’afficher.
Commencer une page en langage HTML : la base
Maintenant que nous avons vu les balises et les attributs utilisés pour commencer une page HTML, voici comment on les organise. Ceci est une page type en HTML.
<!DOCTYPE html>
<html lang=‟fr”>
<head>
<meta charset=‟utf-8”
<title>Le titre de la page</title>
</head>
<body>
</body>
</html>Organiser sa page avec le langage HTML
Dans une page web, il y a bien sûr du texte, celui que l’internaute voit quand il se rend sur la page. Le HTML permet d’organiser le contenu d’une page web de manière structurée et logique.
Les balises HTML pour organiser le contenu
Voici quelques éléments HTML couramment utilisés pour organiser le contenu d’une page :
- Les paragraphes sont définis avec la balise en paire <p>.
- Pour les sauts de ligne, vous utiliserez la balise orpheline <br>.
- Les balises de titre sont utilisées pour définir les niveaux de titre sur une page web, du titre principal (<h1>) aux sous-titres (<h2>, <h3>, jusqu’à <h6>).
- Les balises de liste non ordonnée (<ul>) et ordonnée (<ol>) sont utilisées pour créer des listes à puces et des listes numérotées, respectivement. Pour chaque item de la liste, on utilise ensuite la balise <li>.
Les balises HTML pour mettre en valeur des éléments
Dans le texte qui s’affiche sur une page web, on peut faire ressortir certains mots en particulier. Pour cela, on va utiliser principalement trois balises en paire.
- La balise <strong>, pour mettre du texte en gras ;
- La balise <em> pour mettre en italique ;
- La balise <mark> pour surligner le texte.
Jusque-là, vous suivez ? Allez, on complique les choses avec l’insertion des liens hypertextes et des images.
Insérer un lien hypertexte en HTML
Un lien hypertexte permet de renvoyer l’internaute vers une autre page web lorsqu’il clique sur un élément (une image, un mot). Il existe deux types de liens : les liens relatifs, qu’on utilise pour renvoyer vers une autre page de notre site (liens internes), et les liens absolus, contenant une adresse complète pour diriger vers un autre site web (liens externes).
Pour faire un lien hypertexte :
- on utilise la balise <a>(pour “anchor”) pour indiquer qu’on va la redirection,
- on ajoute l’attribut href suivi de = pour annoncer l’endroit vers lequel on redirige,
- on indique entre guillemets l’adresse du lien,
- enfin, on écrit le texte qui s’affiche sur l’hyperlien.
Vous voyez l’idée ? Il y a bien sûr quelques subtilités, selon qu’on crée un lien interne ou externe. Mais gardez déjà cette base en tête. Voici un exemple qui vous parlera davantage :
<a href="https://www.example.com">Cliquez ici pour visiter notre site web</a>Insérer une image avec le langage HTML
Plus casse-pieds encore à mes yeux, voici l’insertion des images en langage HTML. Même si le HTML n’est pas un langage complexe, cette partie-là m’a fait piquer quelques crises de nerfs au début, principalement parce que les fichiers de mes images étaient mal organisés. Bref, faisons simple. Pour insérer une image dans une page HTML, utilisez la balise <img>. La balise <img> s’accompagne des attributs src (pour indiquer la source de l’image) et alt (qui donne une description alternative). Par exemple :
<img src="image.jpg" alt="Description de l'image">Je vous passe les soucis que vous pourrez rencontrer à ce niveau-là, du type « Mais pourquoi ça ne marche pas alors que j’ai bien fait mon code ?! » Retenez trois choses. D’abord, rangez bien vos fichiers et, s’il y a un problème d’affichage, vérifiez le chemin de destination. Ensuite, évitez les accents, majuscules et espaces dans vos noms de fichiers et de dossiers. C’est bête, mais ça bloque tout. C’est comme cela que je me suis retrouvée à renommer des centaines de fichiers ! Enfin, choisissez le bon format d’image. Le JPEG est le plus utilisé.
Pour aller plus loin dans le langage HTML
Voilà quelques bases du langage HTML. En comprenant la structure du HTML, vous serez en mesure de créer des pages web attrayantes et fonctionnelles qui répondent aux besoins de vos utilisateurs. Si vous souhaitez vous former plus sérieusement, je vous conseille la formation gratuite en ligne « Créez votre site web avec HTML5 et CSS3 », qui est top et abordable quel que soit votre niveau. Téléchargez aussi le logiciel gratuit Visual Studio Code pour vous entraîner.
Et bien sûr, avant toute chose, épinglez l’article sur Pinterest !
