J’adore les balises HTML, je ne me l’explique pas. Quand mes camarades de classe en cours de webdesign soufflaient du nez devant la diversité des balises, moi, j’avais l’impression de découvrir de nouveaux Pokémon. Apprenez-les tous !
Bon… en vrai, ce n’est pas nécessaire de toutes les apprendre. Mais savoir leurs rôles, leurs utilités, retrouver celles qui vous seront vraiment bénéfiques, ça, c’est pratique.
Vous retrouvez dans cette série d’articles « Balises HTML : le guide illustré », non pas à apprendre à utiliser concrètement les balises, d’autres le font déjà très bien (les MDN Web Docs qui sont très efficaces). Vous trouverez une lecture plus ludique et synthétisé.
Les balises seront présentées par catégorie, dans ce premier article, on commence avec les entêtes HTML !
La balise <title>
L’une des chouchoutes de google
considérez-la comme la carte de visite de votre site sur le web.
C’est le petit texte qui apparaît en haut de l’onglet du navigateur lorsque quelqu’un visite votre page.
C’est votre chance de captiver l’attention des internautes et de leur donner un avant-goût de ce que votre site propose, le tout en quelques mots percutants. Un peu comme une enseigne de boutique !
La balise html <style>
Ajoutez du style à votre page
Elle permet de définir les styles spécifiques à une page, tels que la couleur et la taille du texte.
La bonne pratique est de centraliser ces styles dans un fichier externe (.css) pour une gestion efficace et une uniformité sur tout le site.
On évite donc l’usage de la balise <style>
C’est un peu la styliste qui réajuste la tenue avant l’entrée sur le podium !
La balise <script>
Le temps et l’espace, c’est bien… mais un site interactif, c’est mieux !
À l’image du Docteur Who et de son fidèle K9, la balise <script> ajoute une dimension interactive à ton site. Tout est possible ! Faut il encore être aventureux, tout ne se passe pas toujours comme prévu…
Elle donne vie à votre HTML en lui permettant d’interagir avec les utilisateurs, de gérer des animations, et de transformer une simple page statique en une expérience immersive.
Bonne pratique : les scripts se mettent plutôt en bas de page, pour éviter de ralentir le chargement du site !
La balise <noscript>
« ?! Mais… il ne répond plus ! »
La balise <noscript>, c’est le plan B du Docteur quand son fidèle compagnon K9 tombe en panne.
Son contenu s’affiche uniquement si le JavaScript est désactivé sur le navigateur. C’est une solution de secours qui permet d’afficher un message ou un contenu alternatif aux utilisateurs qui ne peuvent pas exécuter de scripts.
La balise <link>
Toutes les ressources sont bien attachées
La balise <link> est un connecteur : elle permet de lier des fichiers externes à la page web, assurant ainsi un design propre (css), des webfonts, des scripts et un chargement optimisé.
La balise html <!-…-> (commentaire)
Elle est là mais on ne la voit pas
Invisible sur la page web, permet d’insérer des annotations directement dans le code HTML.
Comme un spectre discret, elle offre un moyen de communiquer vers cette autre monde qu’est celui des développeurs. Laissez des rappels pour vous-même, tout en maintenant la clarté de votre contenu.
La balise html <!DOCTYPE>
Elle annonce qui rentre dans
le ring navigateur
Elle indique au navigateur quel type de document HTML est à venir, lui permettant de se préparer à l’affichage correct de la page.
C’est la première étape cruciale pour assurer une compatibilité et une interprétation correcte du code HTML par le navigateur.
La balise <html>
HTML5, champion depuis 2014
Elle est le conteneur racine de toute structure de page HTML.
Elle enveloppe tout le contenu de la page, y compris les balises <head> et <body>.
Cette balise indique au navigateur que le document est écrit en langage HTML et spécifie également la langue utilisée dans le document.
La balise <body>
« Code me like your french balises »
Elle est l’un des éléments fondamentaux du langage HTML.
Elle est utilisée pour définir le contenu principal d’une page web.
Tous les éléments visibles sur la page, tels que le texte, les images, les vidéos, les liens, etc., sont inclus à l’intérieur.
La balise <head>
« Alors ? Mes métadonnées vont bien ?«
Elle contient toutes les informations importantes pour le fonctionnement.
Vous trouverez dedans des éléments essentiels tels que les métadonnées, les liens vers les feuilles de style CSS, les scripts JavaScript, et bien d’autres encore.
C’est la boîte à outils cachée qui permet de préparer votre site web avant son affichage aux visiteurs.
La balise <base>
« Suivez le guide ! »
Elle est utilisée pour spécifier l’URL de base à utiliser pour toutes les URL relatives contenues dans un document HTML.
Cela permet de définir une URL de base une seule fois dans le document, ce qui simplifie la gestion des liens et des ressources.
La balise <meta>
« Élémentaire, mon cher navigateur »
Elle transmet des informations essentielles comme l’encodage (UTF-8), la description de la page pour les moteurs de recherche, ou encore des règles pour les réseaux sociaux.
Si <title> est l’enseigne de ton magasin, <meta> est la fiche signalétique qui informe Google et les autres moteurs de recherche du contenu de ta page. Un vrai travail de détective !
Vous voulez utiliser ces illustrations de balises html ?
« Si vous souhaitez utiliser ces illustrations dans vos présentations (par exemple, si vous êtes professeur et enseignez le HTML à vos étudiants), n’hésitez pas à les réutiliser ! Je vous demande simplement de conserver les crédits ©GaaéDesign ainsi qu’un lien vers cette page. Merci !
Pour toute utilisation dans un cadre commercial, merci de me contacter.
D’autres illustrations arriveront bientôt !
Un parcours dédié à l’expérience utilisateur, pour vous
Hello, je suis Caroline,
Graphiste et conceptrice d’interfaces intuitives, j’accompagne entreprises et créateurs dans le design de projets visuels engageants. Avec plus de 10 ans d’expérience, j’ai fondé Gaaé Design pour vous offrir une expertise qui allie créativité, stratégie, et écoute. Mon objectif est de transformer chaque projet en une expérience fluide, esthétique et fidèle à votre identité de marque, pour que vos supports visuels deviennent de vrais atouts.
Mes sujets favoris autour de l’expertise VIZ
La symbologie / Sémiologie
Les études statistiques
