Formation HTML | Découverte du Langage

Rôle du HTML

Le rôle du langage HTML consiste à concevoir une page web en y définissant sa structure et son contenu.

Le HTML est un langage sémantique : son rôle est de donner du sens aux éléments qu’il contient afin qu’ils soient correctement compris et affichés des navigateurs et moteurs de recherche.

Cette sémantique est déterminée par des « balises » utilisées au sein du document HTML.

Créer une page web consiste à imbriquer ces balises HTML les unes à côté des autres et les unes dans les autres. Ces balises sont aussi appelées « tags ».

Balises HTML

Les balises HTML ont un rôle double puisqu’elles vont permettre pour une page de définir :

• Sa structure (en-tête, pied de page, menu, section…)
• Son contenu (texte, image, vidéo…)

Les balises HTML se distinguent en deux grandes familles : les balises paires et les balises orphelines.

Balises paires

Les balises paires s’apparentent à des « boîtes » dans lesquelles il est possible de ranger des informations. Elles délimitent la structure d’une page web. Les balises paires ont une action sur le contenu qu’elles encadrent.

Leur syntaxe est la suivante :

<balise>Démonstration</balise>

• <balise> est la balise ouvrante (c’est notre boîte).
• </balise> est la balise fermante (c’est le couvercle qui vient fermer la boîte). Cette balise possède un slash / avant son nom.
• Démonstration est le contenu de la balise. Il peut s’agir de texte mais aussi d’une autre balise (= imbrication de balises).

On emploie le terme d’« élément » pour définir l’ensemble formé par la balise ouvrante + le contenu + la balise fermante.

Bien entendu <balise> sera remplacé par un nom de balise valide. Il existe de nombreuses balises HTML paires pour structurer notre page web. En voici quelques-unes :

<header>
	<h2>Je suis un titre de niveau 2</h2>
	<p>Je suis le premier paragraphe.</p>
	<p>Je suis le second paragraphe.</p>
</header>

Une balise paire peut tout à fait contenir d’autres balises : on parle d’imbrication. C’est le cas de <header> : ici <h2> et les <p> appartiennent au <header>.

Balises orphelines

Les balises orphelines s’apparentent à des « objets » qu’il est possible de ranger dans nos boîtes. Les balises orphelines ont une action sur elles-mêmes, elles ne peuvent pas contenir d’autres éléments.

D’un point de vue syntaxique, une balise orpheline s’écrit de la même manière qu’une balise ouvrante isolée.

<balise>

Une image <img>, un saut de ligne <br>, un champ de formulaire <input> sont des exemples de balises orphelines puisqu’elles ne sont pas vouées à recevoir du contenu à l’intérieur.

<br>
<img>
<input>

La plupart des balises orphelines vont nécessiter l’usage d’attributs pour bien fonctionner.

Attributs

Des options pour nos balises

Un attribut se place dans une balise ouvrante, permettant d’y définir des propriétés / caractéristiques supplémentaires.

Les attributs constituent des sortes d’options pour configurer nos balises.

Les attributs se caractérisent par un mot-clé auquel on associera une valeur (écrite entre guillemets).

Ils peuvent venir enrichir une balise paire ou orpheline de la manière suivante :

<p nom-attribut="valeur attribut">Je suis un paragraphe</p>
<p nom-attribut1="valeur attribut" nom-attribut2="valeur attribut">Je suis un paragraphe</p>
<br nom-attribut="valeur attribut">

Attributs facultatifs ou obligatoires

Un attribut peut être facultatif ou obligatoire afin de garantir le bon fonctionnement d’une balise.

C’est d’ailleurs la plupart du temps sur les balises orphelines qu’ils sont obligatoires, car ces balises ne jouent pas le rôle de conteneur, et vont donc la plupart du temps avoir besoin de ces attributs pour leur spécifier des caractéristiques fonctionnelles.

Tout comme les balises, il existe de nombreux attributs HTML, et vous verrez que nous réutilisons souvent les mêmes.

<p id="welcome-text">Je suis un paragraphe</p>
<img src="https://mon-site.fr/image.png" alt="Texte alternatif décrivant l'image">

• id (facultatif) : définit un identifiant pour la balise.
• src (obligatoire) : définit la source d’une image.
• alt (obligatoire) : définit le texte alternatif décrivant une image. Il est important pour le SEO, l’accessibilité et l’expérience utilisateur en cas de non-affichage de l’image.

Attributs abrégés

Certains attributs ne possèdent pas de valeur. Ce raccourci d’écriture indique que la valeur de ces attributs est en fait identique au nom de l’attribut.

Ces syntaxes sont donc équivalentes :

<input type="email" required>
<input type="email" required="required"> 
 
<input type="checkbox" checked>
<input type="checkbox" checked="checked">

• required : spécifie qu’un champ de formulaire est obligatoire.
• checked : coche par défaut une case dans un questionnaire.

Environnement de développement

Le HTML est un langage de développement web côté client, son environnement de développement est donc minimaliste puisqu’il ne se résume qu’à :

• Un éditeur de code
• Un navigateur web (Chrome, Firefox, Safari…)

Où écrire son code HTML ?

Les fichiers destinés à recevoir du code HTML portent l’extension .html du même nom.

Commentaires

En HTML il est possible d’écrire des commentaires dans son code source.

Les commentaires sont des messages à destination des développeurs dans le but de documenter le code. Ils sont bien entendu invisibles pour les visiteurs qui navigueront sur votre site. On dit qu’ils ne sont pas interprétés.

Cela peut être utile lorsque :

• Vous retravaillez sur un ancien code
• Vous travaillez à plusieurs développeurs sur un même projet

Un commentaire est délimité par les caractères <!-- (ouverture) et --> (fermeture).

<!-- Je suis un commentaire en HTML -->

Comme vous avez pu le constater, la syntaxe du HTML est relativement simple tout comme sa finalité : structurer et définir son contenu. En conséquence l’utilisation des commentaires est assez limitée.

En revanche, ils s’avéreront très intéressants pour documenter des langages de programmation comme JavaScript ou encore PHP.