Si vous aspirez à devenir développeur front-end, l’apprentissage du HTML est une étape incontournable. Ce langage de balisage hypertexte, plus communément désigné par son acronyme HTML, constitue la fondation de la quasi-totalité des pages web.
Le HTML est composé de divers éléments, tels que les balises, les attributs et les éléments. Nous allons ici nous concentrer sur les balises HTML. Ces dernières servent à indiquer aux navigateurs comment structurer le contenu en titres, sous-titres, paragraphes, images et bien plus encore. Les balises HTML agissent donc comme des instructions qui définissent la manière dont le navigateur doit afficher et formater le contenu.
Les serveurs interprètent les balises HTML de haut en bas. Il n’y a pas de limite au nombre de balises HTML qu’une page web peut contenir.
- Toutes les balises HTML sont encadrées par des chevrons <>
- Chaque balise HTML remplit une fonction distincte
- La plupart des balises HTML ont une balise d’ouverture <tag> et une balise de fermeture </tag>
Balises HTML vs éléments HTML vs attributs HTML
Il est courant d’utiliser les termes « balises HTML » et « éléments HTML » de manière interchangeable. Cependant, sont-ils réellement identiques ? D’un point de vue technique, les éléments HTML et les balises HTML sont différents.
Les balises HTML servent à définir les éléments HTML. Pour ce faire, le contenu est encadré par une balise d’ouverture et une balise de fermeture, qui correspondent au contenu sur lequel on travaille.
Voici un exemple d’élément HTML :
<p> Ceci est un paragraphe </p>
<p> est un exemple de balise HTML.
Les attributs HTML fournissent des informations supplémentaires sur les éléments HTML d’un document. Ces attributs sont intégrés aux éléments HTML.
Voici un exemple d’attribut HTML :
<button id="SubmitOrder" class="btn">Commander</button>
Balises HTML essentielles à connaître
Depuis son introduction par Tim Berners-Lee en 1993, le HTML a évolué au fil du temps. La première version du HTML comportait 18 balises. De nouvelles balises sont ajoutées avec chaque version ; la mise à jour la plus récente étant HTML5 en 2014.
Une comparaison entre HTML et HTML5 révèle que ce dernier intègre des balises sémantiques telles que <article>, <header> et <footer> qui décrivent clairement le contenu. Nous avons maintenant plus de 100 balises HTML. Voici quelques-unes des balises les plus couramment utilisées que vous devriez connaître :
<!DOCTYPE>
Techniquement, le DOCTYPE n’est pas une balise, mais une déclaration qui indique au navigateur le type de fichier à charger. Cette balise informe le navigateur du type de HTML utilisé.
En HTML5, vous pouvez déclarer votre fichier de la manière suivante :
<!DOCTYPE html>
Ou
<!doctype html>
Notez que cette déclaration n’a pas de balise de fermeture et n’est pas sensible à la casse.
<html> </html>
La balise <html> … </html> vient après la balise DOCTYPE. Cette balise définit le document comme une page web ; tous les autres éléments seront imbriqués à l’intérieur. La balise HTML spécifie le début et la fin d’un document HTML.
Une balise <html> est représentée comme suit :
<html>Contenu</html>
<head> </head>
La section d’en-tête d’un document HTML est représentée par une balise <head>. Cette balise est incluse dans la balise <html> et fournit des informations générales sur la page web.
La balise <head> contient d’autres balises qui donnent des détails sur la page web, telles que le titre et l’auteur de la page. Le contenu de cette balise n’est pas affiché sur la page web.
Voici la syntaxe d’une balise <head> :
<head> ... </head>
<title> </title>
La balise <title> définit le titre de la page web. Cette balise est incluse dans la balise <head>. La balise <title> apparaît dans la barre de titre ou dans l’onglet de la fenêtre du navigateur, mais pas sur la page web elle-même.
La syntaxe de la balise <title> est la suivante :
<title>Balises HTML pour débutants</title>
Lorsqu’elle est incluse dans une balise <head>, elle apparaît de cette manière :
<head>
<title>Balises HTML pour débutants</title>
</head>
<body> </body>
La balise <body> affiche tout le contenu visible sur une page web. Des images, des liens, du texte brut, des vidéos et bien d’autres éléments se trouvent entre les balises <body> et </body>.
Parmi les autres balises que vous trouverez dans le corps, citons la balise <p> pour les paragraphes, la balise <a> pour les liens, la balise <strong> pour le texte en gras et la balise <ol> pour les listes ordonnées, pour n’en citer que quelques-unes.
La syntaxe de la balise <body> est la suivante :
<body> Contenu </body>
<h1> à <h6>
Il peut y avoir jusqu’à 6 balises de titres dans un document HTML. Chaque balise est représentée par un nombre allant de 1 à 6, comme <h1>, <h2>, <h3>, <h4>, <h5> et <h6>.
<h1> est la balise de titre la plus grande, tandis que <h6> est la plus petite.
Dans un document HTML, les balises de titres peuvent être représentées comme suit :
<h1>Titre 1</h1> <h2>Titre 2</h2> <h3>Titre 3</h3> <h4>Titre 4</h4> <h5>Titre 5</h5> <h6>Titre 6</h6>
Les balises <h1> à <h6> sont incluses dans la balise <body>.
Par exemple, une balise <h1> sera encadrée comme suit :
<body> <h1> Ceci est le titre 1 </h1> </body>
<p> </p>
La balise <p>, ou balise de paragraphe, est utilisée pour structurer le contenu en paragraphes. Appuyer sur la touche « Entrée » dans un document HTML dans votre éditeur de code ne créera pas un nouveau paragraphe.
Si vous souhaitez plus d’un paragraphe, vous devez utiliser plusieurs balises <p> dans votre document. Les balises de paragraphe doivent être incluses dans la balise <body>.
La syntaxe d’une balise de paragraphe est la suivante :
<p> ... du contenu ici ... </p>
Si vous souhaitez avoir quatre paragraphes, votre code sera structuré comme suit :
<body> <p>Contenu du premier paragraphe.</p> <p>Contenu du deuxième paragraphe.</p> <p>Contenu du troisième paragraphe.</p> <p>Contenu du quatrième paragraphe.</p> </body>
<b> </b>
La balise <b> </b>, ou simplement balise de gras, mettra en forme tout le contenu entre la balise d’ouverture <b> et la balise de fermeture </b> en gras.
La balise de gras peut se trouver à l’intérieur d’un titre tel que <h1> ou même dans une balise de paragraphe.
Voici des exemples de balises de gras :
<b> Balise de gras </b>
La phrase « Balise de gras » apparaîtra en gras.
<h1> On se détend, <b> Cinquième édition </b>, l'édition des gagnants </h1>
La cinquième édition sera en caractères gras.
<i> </i>
La balise italique, notée <i>, met en italique le texte à l’intérieur des balises.
Par exemple, si nous avons :
<i> Ceci est en italique </i>
Les mots « Ceci est en italique » apparaîtront en italique.
<u> </u>
La balise de soulignement, ou <u>, est utilisée lorsque vous souhaitez souligner un certain passage de texte dans un document HTML.
Par exemple, si nous avons :
<u> souligner ces mots </u>
La phrase entre les balises sera soulignée.
<center> </center>
La balise Center, <center>, est utilisée pour centrer le contenu sur un document HTML.
Par exemple, si nous avons une balise <h2> écrite comme
Centrer le contenu en HTML
, nous pouvons la centrer comme suit :
<center> <h2> Centrer le contenu en HTML </h2> </center>
<span></span>
La balise Span, <span>, est un conteneur générique en ligne qui n’est pas fourni avec un style par défaut. Vous pouvez utiliser la balise span pour regrouper des textes que vous souhaitez styliser.
Vous pouvez étendre la balise à l’intérieur d’autres balises telles que les titres et les paragraphes :
<h2> Apprenez le HTML <span> avec des experts </span> et préparez-vous pour le marché </h2>
<p> Apprenez le HTML <span> avec des experts </span> et préparez-vous pour le marché </p>
<div></div>
Une balise de division, abrégée en div, est une balise qui vous permet de regrouper différentes balises dans un document HTML.
Une balise div peut recevoir une « classe » pour ajouter un style externe à l’aide de CSS.
Voici comment un div entourant une balise <h1>, <h2> et une balise de paragraphe sera représenté :
<div > <h1> Apprendre le HTML </h1> <h2> Balises HTML </h2> <p> HTML est un langage de balisage... </p> </div>
<em></em>
L’emphase, ou balise <em>, est utilisée pour souligner certains mots dans un document HTML.
Le contenu entre les balises <em> apparaîtra en italique ou incliné.
Le contenu mis en évidence dans un paragraphe peut apparaître dans un éditeur de code comme suit :
<p> La réunion commencera à <em> 08h00 </em>, veuillez être à l'heure </p>
<sup></sup>
La balise <sup>, ou exposant, permet au texte inclus d’être affiché au-dessus du reste. Un exemple parfait est lorsque vous voulez mettre au carré un nombre X et le représenter mathématiquement pour vous donner X2.
La syntaxe de <sup> dans une balise de paragraphe sera :
<H1> Harveys <sup>TM </sup> Company Limited </H1>
<sub></sub>
La balise indice ou <sub> est l’opposé de la balise exposant. Le contenu inclus dans la balise <sub> apparaîtra en dessous de la ligne de texte normale. Un exemple parfait est l’écriture de la formule chimique de l’eau en tant que H2O.
La syntaxe de la balise d’indice sera :
N'oubliez pas que H <sub> 2 </sub> 0 est la formule chimique de l'eau
<br>
<br> est une balise à fermeture automatique qui représente un saut de ligne. Tout le contenu après <br> commencera sur une nouvelle ligne.
La syntaxe de <br> dans un paragraphe sera :
<p> HTML est l'abréviation de Hypertext Markup Language <br> Il y a un débat en cours pour savoir s'il s'agit d'un langage de programmation ou non <br> Cependant, nous ne pouvons pas minimiser son importance <br> HTML a été utilisé dans plus de 95% des sites web aujourd'hui </p>
<ol></ol> et <li></li>
La balise de liste ordonnée ou <ol> doit être utilisée avec une autre balise telle que <li>.
Les deux peuvent apparaître dans un éditeur de code de la manière suivante :
<ol> <li> Asie </li> <li> Afrique </li> <li> Europe </li> </ol>
Une fois affiché dans le navigateur, le contenu apparaîtra numéroté.
<img src= » »>
Vous pouvez ajouter une image pour un attrait visuel ou même un logo. La balise d’image à fermeture automatique, <img src= » »>, est pratique dans un tel cas.
La syntaxe de la balise d’image sera :
<img src="https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png"/>
Le contenu entre guillemets représente l’URL source.
Conclusion
Il existe plus de 100 balises HTML, mais celles-ci sont celles que vous devez connaître en tant que débutant. Le HTML est pris en charge par la plupart des éditeurs de code, ce qui vous assure de ne jamais vous tromper lorsque vous commencerez à apprendre.