Éditeurs et outils HTML
Comparez les éditeurs HTML populaires (VS Code, Sublime Text, Notepad++, WebStorm), créez votre premier fichier HTML et utilisez DevTools et le validateur W3C.
Dans le chapitre précédent, nous avons appris que HTML est un langage de balisage utilisé pour créer des pages web. Pour créer des pages web, vous aurez besoin des outils et programmes suivants :
- un éditeur de texte ou HTML pour écrire et modifier le code source,
- un navigateur pour vérifier les résultats,
- un validateur — un programme spécial qui vérifie la validité ou la correction syntaxique du code source.
Parlons-en en détail.
Éditeurs HTML
Il existe plusieurs éditeurs professionnels que les développeurs web utilisent pour coder. Cependant, tous les éditeurs ne peuvent pas satisfaire tous vos besoins. Un bon éditeur HTML doit donc disposer des fonctionnalités suivantes :
- la coloration syntaxique — affichage du texte, notamment du code source, dans différentes couleurs et polices,
- la prise en charge des onglets — possibilité de garder plusieurs pages web ouvertes dans des onglets simultanément,
- la vérification d'un document HTML pour détecter les erreurs,
- le repliement de code — masquage de grands fragments de code pour n'afficher qu'un résumé ou la première ligne.
Les éditeurs HTML les plus populaires sont les suivants :
- Visual Studio Code — gratuit et open source, c'est la recommandation par défaut la plus répandue. Il fonctionne sous Windows, macOS et Linux. Sa force réside dans son écosystème d'extensions : ajoutez Prettier pour formater automatiquement votre code, Live Preview (ou Live Server) pour voir les modifications dans le navigateur instantanément, et IntelliSense intégré pour l'autocomplétion des balises et des attributs.
- Sublime Text — choisissez-le pour sa vitesse brute. Il s'ouvre instantanément et reste réactif même avec des fichiers très volumineux, ce qui le rend populaire pour les modifications rapides. C'est un logiciel payant mais évaluable gratuitement, et il fonctionne sur les trois principales plateformes.
- Notepad++ — un éditeur léger et gratuit, exclusivement pour Windows. Sur macOS ou Linux, une option légère comparable est l'éditeur intégré (TextEdit sur macOS, gedit/nano sur Linux), ou utilisez simplement VS Code, qui est multiplateforme.
- WebStorm — un IDE complet de JetBrains. C'est un logiciel payant (abonnement), plus lourd que les éditeurs ci-dessus, mais il intègre de la refactorisation avancée, du débogage et la prise en charge des frameworks, ce qui convient aux projets plus importants.
Si vous débutez et souhaitez une configuration zéro, vous pouvez utiliser le Bloc-notes (Windows) ou TextEdit (macOS) pour écrire votre premier fichier. Cependant, ces éditeurs basiques ne disposent pas de coloration syntaxique, nous recommandons donc de commencer avec un éditeur gratuit qui la prend en charge, comme Visual Studio Code (toutes plateformes) ou Notepad++ (Windows). Une fois que vous avez un éditeur, découvrez la structure de base d'un document HTML avant d'aller plus loin.
Votre premier fichier HTML
Les étapes ci-dessous utilisent le Bloc-notes Windows car il est installé sur chaque machine Windows et ne nécessite aucune configuration. La même idée s'applique à n'importe quel éditeur : écrivez le code, enregistrez-le avec l'extension .html, puis ouvrez-le dans un navigateur.
Étape 1. Ouvrir le Bloc-notes
Appuyez sur la touche Windows, tapez Notepad et appuyez sur Entrée. (Sur macOS, ouvrez TextEdit et passez en mode texte brut via Format → Convertir en texte brut.)
Étape 2. Écrire votre code
Écrivez ou copiez le HTML ci-dessous.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Simple example</h1>
<p>Some text you want to show here</p>
</body>
</html>Lorsqu'il est ouvert dans un navigateur, ce code affiche une page avec le titre « Simple example » en texte gras de grande taille, suivi du paragraphe « Some text you want to show here ».
Étape 3. Enregistrer le document HTML
Allez dans File dans le menu du Bloc-notes et choisissez Save As. Donnez un nom à votre document en utilisant l'extension de fichier .htm ou .html. (Nous recommandons d'utiliser l'extension .html.) Assurez-vous de définir l'encodage sur UTF-8 et définissez le menu déroulant Save as type sur All Files pour éviter que Windows n'ajoute une extension .txt. Enregistrez le fichier dans un dossier dédié que vous créez au préalable pour stocker tous vos documents HTML.
Étape 4. Vérifier le fichier HTML dans un navigateur
Ouvrez votre fichier HTML dans un navigateur (faites un clic droit sur le fichier et choisissez Open with). Vous devriez voir le titre et le paragraphe du code ci-dessus.
Navigateur
Vous aurez besoin d'un navigateur pour vérifier les fichiers HTML. Pour commencer, n'importe quel navigateur, Google Chrome, Opera ou Firefox suffira, mais vous aurez besoin de tous par la suite. En effet, chaque navigateur possède son propre moteur de rendu, et vous devrez vérifier votre code dans chacun d'eux. Les navigateurs modernes incluent également des outils de développement intégrés (appuyez sur F12, ou faites un clic droit sur un élément et choisissez Inspecter). Les DevTools vous permettent d'inspecter le HTML et le CSS en direct de n'importe quel élément, de modifier les styles et d'en voir le résultat instantanément, et de lire la Console, où le navigateur signale les erreurs et avertissements JavaScript. C'est le moyen le plus rapide de comprendre pourquoi une page ne s'affiche ou ne se comporte pas comme prévu. Pour les tests multi-navigateurs, vous pouvez utiliser des services en ligne ou des machines virtuelles lorsque votre projet grandit.
Validateur
Une partie essentielle du processus de développement de pages web est la vérification de la validité du code HTML. Des validateurs spéciaux, des programmes ou des services peuvent être utilisés pour vérifier la validité ou la correction syntaxique d'un fragment de code ou d'un document.
Le service en ligne le plus courant est validator.w3.org. Entrez l'URL d'une page web (ou collez votre code directement), et le service le vérifie selon la norme HTML. Le résultat est une liste de messages : les Erreurs (en rouge) signalent le code qui enfreint la norme, comme une balise non fermée ou un nom d'élément mal orthographié ; les Avertissements (en jaune) indiquent des éléments techniquement autorisés mais déconseillés. S'il n'y a aucun problème, vous obtenez un message vert confirmant que le document est valide. Corriger les erreurs du validateur est une bonne habitude, car un balisage invalide peut s'afficher de manière incohérente selon les navigateurs.
Pour vérifier la validité des fichiers locaux, vous pouvez utiliser des validateurs en ligne ou des linters intégrés dans les éditeurs modernes comme Visual Studio Code. Certains éditeurs proposent également une vérification syntaxique en temps réel pendant la saisie.