Temps de lecture approximative : 5 minutes

Chapitre 3 - Les balises et attributs

Dommage si vous pensiez qu'on créait un site web simplement en écrivant du texte, mais ça semblait léger n'est-ce pas ? Découvrons ensemble le fonctionnement et l'utilisation des balises HTML.

Comme nous l'avions découvert au début de ce cours, le HTML est un langage de balisage. Un fichier HTML est donc rempli de balises. Soyez sans craintes, ces dernières ne sont pas visibles par l'utilisateur. Cependant, elles sont essentielles car elles donnent des instructions au navigateur web.

Les balises

Les balises se repèrent très facilement. Elles sont entourées de chevrons : < et >. Vous n'aviez pas encore beaucoup utilisé ce symbole dans votre vie, mais c'est en passe de changer. Ci-après l'exemple d'une balise : <balise>. Les balises s'écrivent toujours en minuscule.

On distingue deux types de balises : les balises normales et les balises auto-fermantes.

Balises normales

Une balise normale s'ouvre et se ferme. On a donc une balise ouvrante et une balise fermante. Elle indique au navigateur web les délimitations de l'impact de la balise. Ci-dessous un exemple de balise normale.

<balise>Hello</balise>

Balises auto-fermantes ou orphelines

Ces balises n'ont pas de balise ouvrante ni fermante. Elle servent le plus souvent à insérer un élément autonome à un emplacement précis. C'est pourquoi il n'est pas nécessaire de délimiter le début et la fin de la balise. Ci-après l'exemple d'une balise auto-fermante.

<balise />

Il est important de préciser que le slash (/) et l'espace de fin ne sont pas obligatoires. En effet, on peut écrire une balise auto-fermante sans ces derniers, ça marche également. Cependant, la bonne pratique recommande d'ajouter un slash pour éviter de confondre avec une balise ouvrante. L'espace permet de mieux localiser ces balises dans les fichiers.

Les attributs

Les attributs sont en quelques sortes les options des balises. Ils apportent des informations supplémentaires sur les balises pour offrir davantage de possibilités. Les attributs se placent toujours de la même manière sur toutes les balises. Ils sont situés au niveau de la balise ouvrante. Une balise peut avoir une infinité d'attributs. Par contre, on ne retrouve qu'un attribut de même nom par balise. Une balise auto-fermante peut également avoir des attributs. Dans ce cas, ils sont contenus au niveau de la balise auto-fermante. Ci-dessous un exemple d'une balise et d'une balise auto-fermante avec un attribut. Les attributs s'écrivent également toujours en minuscule.

<balise attribut="1">Hello</balise>

<balise attribut="2" />

Toutes les balises et attributs que nous venons de voir sont purement fictifs. Ils servaient d'exemple. Les balises HTML sont en anglais, nous allons les découvrir au cours des prochains chapitres.

Dans le prochain chapitre, nous allons améliorer notre première page en HTML, celle où nous avons uniquement écrit du texte, pour enfin devenir le plus grand développeur de tous les temps.