Nous nous retrouvons aujourd’hui pour rentrer dans le vif du sujet et en apprendre davantage sur le fonctionnement de HTML. Si vous ne l’avez pas déjà fait, je vous incite à lire l’article introductif sur HTML à travers l’histoire. Comme nous l’avons dit, HTML n’est pas un langage de programmation, mais de balisage. Il est chargé de structurer la page au moyen de balises pour contextualiser le rôle de chaque partie.

Rappels sur les balises HTML

Commençons doucement. Considérons par exemple le texte suivant :

Bonjour, je m'appelle Kévin et je suis développeur web !

Afin d’exprimer le fait que ce texte représente un paragraphe, il faut l’encadrer par la paire de balises <p></p>

<p>Bonjour, je m'appelle Kévin et je suis développeur web !</p>

À gauche, avant le texte on retrouve la balise ouvrante et à droite, sa soeur jumelle : la balise fermante. Tout se qui se trouve compris entre cette paire de balise, le contenu, sera interprété par le navigateur web comme étant un paragraphe à part entière. Bien sûr, les balises ne sont jamais affichées par le navigateur. Ce triptyque – balise ouvrante – contenu – balise fermante – définit ce qu’on appelle un élément HTML.

Sur l’exemple ci-dessus, vous pouvez voir HTML en action. Sur l’onglet de gauche vous pouvez retrouver le code HTML brut et sur celui de droite tel qu’il est interprété dans un navigateur. Pour le moment notre résultat est bien modeste, mais nous allons découvrir d’autres balises intéressantes.

Encore des balises HTML…

Vous vous en doutez, il existe un grand nombre de balises HTML. Découvrons quelques unes d’entres elles qui fonctionnent sur le même principe que la balise <p>

Tip : sur grand écran vous pouvez élargir les fenêtres de code ou de résultat en naviguant entre les boutons « HTML » et « Result » pour plus de confort de lecture.

• Les balises de <h1> à <h6> permettent d’exprimer le niveau de titre. Le niveau 1 étant le plus important, le niveau 6 est le moins important que l’on peut retrouver sur un document HTML.
• La balise <strong> et la balise <em> sont chargées d’encadrer du contenu à mettre en exergue.
• Revenons sur la balise <br /> en détail : il s’agit d’une balise orpheline (elle est à la fois ouvrante et fermante, car elle n’encadre pas de contenu). Elle indique un retour à la ligne.
• Enfin, la balise <a> permet d’indiquer la présence d’un lien hypertexte. Tout le contenu encadré par cette balise contient un lien vers l’URL passée en valeur d’attribut HTML, dans le cas présent href. Enfin, notons que l’élément HTML constitué par la balise <a> est lui-même contenu dans un élément <p>, c’est la notion d’imbrication des éléments HTML.

Il n’est pas possible de connaître toutes les balises HTML et généralement, personne ne vous demandera cela. Nous reviendrons sur l’usage des plus courantes, mais sachez d’ores et déjà que vous pouvez retrouver une liste exhaustive sur le MDN, une des références des développeurs.

Attention ! Quel est le vrai sens des balises HTML ?

On ne le répétera jamais assez, les balises HTML ont uniquement un sens sémantique. Même si au cours des exemples précédents vous avez pu voir des différences dans la mise en forme, il est important de faire une mise en garde. On choisit les balises HTML pour le sens qu’elles apportent à un document, non pour ce à quoi elles ressemblent.

L’exemple de <strong> est particulièrement évocateur. Si vous avez déjà quelques notions de HTML, il est possible que vous ayez déjà entendu parler de la « balise pour mettre en gras ». Car dans les faits, c’est bien ce à quoi semble servir cette balise. C’est faux ! La balise <strong> sert à exprimer un contenu de plus grande importance que le texte qui l’environne. Si visuellement ce texte semble être mis en gras par le navigateur, c’est uniquement parce que le navigateur définit un style par défaut pour les balises HTML. Par ailleurs, un autre langage que nous découvrions bientôt gère le style visuel : CSS.

De la même manière, vous devez rester cohérent dans votre utilisation des balises par rapport à leur sens sémantique. Ainsi, vous ne passerez pas d’un titre <h1> à un titre <h3> sans titre <h2>, cela n’aurait pas de sens. Si vous vouliez tout de même que votre deuxième titre soit moins gros que celui de niveau 2, alors nous changerons le style par défaut. Retenez bien cela : n’utilisez pas une balise HTML pour ce à quoi elle ressemble, mais pour ce qu’elle veut dire.

Comment écrire du code HTML ?

Écrire du code dans un bloc-note

Il existe plusieurs solutions pour écrire ses premiers morceaux de code HTML. Avant de vous jeter à la recherche d’un éditeur de code, sachez tout de même que vous pouvez le faire avec un simple bloc-notes. Je ne parle pas de logiciel traitement de texte, mais bien d’un bloc-notes. En effet, le formatage et le style ne concernent pas ces derniers, ce qui nous importe ici.

Sous Mac, vous pourrez réaliser cette opération avec TextEdit. Sous Windows, vous aurez Bloc-notes (ou notepad) à votre disposition. Ce qui est important c’est d’indiquer la bonne extension à votre fichier. En effet, par défaut, votre contenu risque de s’enregistrer sous un format textuel. Ici nous voulons préciser l’extension .html à la fin de notre fichier. Une fois enregistré de cette manière celui-ci s’ouvrira par défaut sur votre navigateur favori.

Les éditeurs de code

La technique précédente est tout à fait valide, mais présente de nombreux inconvénients. D’abord, il est relativement fastidieux d’ouvrir en permanence son fichier sur navigateur. Ensuite, à l’inverse des morceaux de code que je vous ai montré dans cette article, les bloc-notes ne possèdent pas de coloration syntaxique. Cette fonctionnalité très pratique vous permet de discerner les parties de code des parties de contenu de votre fichier. De la même manière, les éditeurs de code vous permettent de gérer l’indentation et l’organisation de votre code HTML. Ces deux aspects sont très importants et vous garantissent de prendre directement une bonne habitude de propreté de votre code.

On écrit du code une fois pour qu’il soit lu cent fois…

Un développeur zen

Visual Studio Code, l’IDE open source de Microsoft

Il existe pléthores d’éditeurs de code visuels sur le marché, aussi, je vous laisse découvrir cela à travers votre moteur de recherche favori. Certains sont payants, d’autres gratuits, certains sont légers, d’autres sont de véritables usines à gaz. Pour débuter, vous pouvez vous intéresser à Visual Studio Code ou encore à WebStorm. Le premier est gratuit et le second vous permet de le tester pendant 30 jours avant de devoir payer. Dans l’univers magique des éditeurs de code il n’y a pas de bons ou de mauvais, il y a celui que l’on préfère. Il faut tester pour trouver son chouchou. Enfin, je ne serais pas complet sur ce sujet si je n’évoquais pas Vim : l’éditeur de code des fans de la console. L’une des particularités de cet éditeur expert, est de proposer une utilisation 100% clavier avec différents modes de travail.

Quelle est la différence entre un éditeur de code et un IDE ?

En cherchant un éditeur de code, vous entendrez peut-être parler d’IDE. Un IDE est un environnement de développement intégré (integrated development environment). Cela signifie qu’en plus des fonctions dévolues au code, vous bénéficiez d’outils de gestion du code comme un débuggueur, un serveur de développement, des terminaux… La majorité des éditeurs de code sont des IDE. Cependant, quelques uns comme Atom et Sublime Text sont toutefois dépourvus de ces fonctionnalités avancées dans leurs versions de base.

Écrire du code HTML en ligne

La dernière solution qui s’offre à vous est de vous rendre sur des playground. Comprenez des sites web qui vous permettent d’écrire du code sans rien installer, directement dans votre navigateur. Les deux plus connus sont CodePen (que vous avez déjà vu en action dans cet article) et JSFiddle. Ils ont l’énorme avantage d’être légers et de pouvoir expérimenter rapidement de petits bouts de code. À l’inverse, ils ne sont pas toujours très pratiques pour les gros projets, avec différents fichiers notamment.

Je vous donne rendez-vous dans un prochain article pour découvrir davantage d’informations sur les bases de HTML. La prochaine fois, nous nous intéresserons à la structure type d’une page HTML !