Formation HTML | Balises Elémentaires

Paragraphes <p>

La balise <p> (« Paragraph ») permet de créer un paragraphe.

<p>Je suis un paragraphe.</p>

Titres <h*>

Les balises <h1>, <h2>, <h3>, <h4>, <h5> et <h6> (« Headline ») permettent de définir un titre de niveau variable.

<h1>Je suis un titre de niveau 1</h1>
<h2>Je suis un titre de niveau 2</h2>
<h3>Je suis un titre de niveau 3</h3>
<h4>Je suis un titre de niveau 4</h4>
<h5>Je suis un titre de niveau 5</h5>
<h6>Je suis un titre de niveau 6</h6>

Plus le chiffre est proche de 1, plus le titre est important et inversement.

• Le titre de niveau 1 est le titre principal d’une page web. Il doit être unique.
• Les titres de niveau 2 à 6 sont des sous-titres. Ils peuvent être multiples.

Liens <a>

La balise <a> (« Anchor ») permet de créer un lien hypertexte vers une autre page web. Cette balise est dédiée à la navigation au sein d’un site web.

Elle possède un attribut href, spécifiant la ressource ciblée par le lien (généralement une page web). Cette ressource peut être spécifiée via une URL complète dite absolue (https://...) ou relative (/...).

<a href="...">Démo</a>

Un lien hypertexte peut être interne ou externe.

Lien interne

Un lien interne pointe sur le même serveur que la page HTML contenant le lien hypertexte. Il peut s’agir d’une ressource (page HTML, image, document PDF…) ou d’un élément de la page (via une ancre nommée).

Ressource interne

<a href="demo/mapage.html">Démo</a>

Au clic sur le lien, nous serons dirigés vers la ressource mapage.html, située dans le dossier 📂 demo (admettant que ce dossier se trouve au même niveau d’arborescence - dans le même dossier - que le fichier contenant le lien).

Ancre nommée

Les ancres nommées sont des liens que l’on fera non pas vers une nouvelle page mais vers une zone de la page actuelle.

<a href="#demo">Voir la démo</a>

<p id="demo">Je suis la démo</p>

Au clic sur le lien, le navigateur scrollera au sein de la page jusqu’à l’élément HTML possédant l’attribut id « demo ». La valeur de l’attribut href doit être précédée d’un #, suivi de la valeur de l’attribut id de la zone ciblée.

Lien externe

Un lien externe pointe vers une ressource située sur un serveur différent de celui sur lequel est située notre page HTML.

<a href="https://google.fr" target="_blank">Aller sur Google</a>

Au clic sur le lien, nous serons dirigés vers le site https://google.fr. Vous constaterez la présence d’un attribut facultatif target="_blank" dont le rôle est de faire en sorte que la page cible s’ouvre dans un nouvel onglet. Son usage est recommandé lors de la création de liens externes car il permet de garder ouvert notre site web afin que l’utilisateur puisse y revenir facilement.

Images <img>

La balise <img> (« IMaGe ») permet de créer une image. Cette balise est orpheline et possède deux attributs obligatoires :

• src : spécifie le chemin vers l’image à afficher.
• alt: il s’agit d’un texte dit « alternatif » dont le rôle est de décrire l’image. Cet attribut est fortement recommandé pour des raisons :
  1. De référencement (SEO) : il permettra aux moteurs de recherche de comprendre ce que représente votre image car leurs robots ne savent pas encore les interpréter. Notez par ailleurs que cela est de moins en moins vrai avec l’exploitation de l’intelligence artificielle pour la reconnaissance d’images.
  2. D’accessibilité : il sera lu par des synthétiseurs vocaux pour décrire votre image à un malvoyant. - D’expérience utilisateur (UX) : il sera affiché si l’image ne peut pas être chargée.

<img src="images/pic-du-midi-ossau.png" alt="Photo du Pic du Midi d'Ossau">

L’attribut src est assez similaire à l’attribut href dans la mesure où il spécifie le chemin vers une ressource. Cette ressource peut aussi bien être interne ou externe.

Listes

Les listes vont nous permettre de lister et regrouper plusieurs éléments rattachés à une thématique commune. En HTML, on distingue 3 familles de listes : les listes non-ordonnées, ordonnées et de définition.

Liste non-ordonnée <ul>

Les listes non-ordonnées sont les plus courantes, chaque puce est représentée par un cercle noir plein.

• On déclare une liste non numérotée avec la balise <ul> (« Unordered List »).
• On déclare chaque élément contenu dans la liste avec la balise <li> (« List Item »).

<p>J'adore :</p>
<ul>
	<li>La programmation</li>
	<li>La montagne</li>
	<li>La musique</li>
</ul>

Liste ordonnée <ol>

Les listes ordonnées sont utiles pour afficher des informations visuellement ordonnées. Chaque puce est représentée par un nombre entier croissant.

• On déclare une liste non numérotée avec la balise <ol> (« Ordered List »).
• On déclare chaque élément contenu dans la liste avec la balise <li> (« List Item »).

<p>Recette du gâteau au chocolat :</p>
<ol>
	<li>Préchauffez votre four à 180°C (thermostat 6). Dans une casserole, faites fondre le chocolat et le beurre coupé en morceaux à feu très doux.</li>
	<li>Dans un saladier, ajoutez le sucre, les œufs, la farine. Mélangez.</li>
	<li>Ajoutez le mélange chocolat/beurre. Mélangez bien.</li>
	<li>...</li>
</ol>

Liste de définition <dl>

Les listes de définition sont utilisées pour définir des termes, à la manière d’un lexique. Visuellement, les navigateurs vont mettre en forme ces listes en décalant le terme à définir par rapport à sa description.

• On déclare une liste de définition avec la balise <dl> (« Definition List »).
• On déclare chaque terme à définir avec la balise <dt> (« Definition Term »).
• On déclare chaque description du terme avec la balise <dd> (« Definition Description »).

<dl>
	<dt>API</dt>
	<dd>Une API (Application Programming Interface) est une interface logicielle qui permet de « connecter » à une application ou un service de s'y connecter afin d'échanger des données et des fonctionnalités.</dt>
	<dt>HTTP</dt>
	<dd>Le protocole HTTP (HyperText Transfer Protocol) assure la transmission permettant un utilisateur d'accéder à des pages web par l'intermédiaire d'un navigateur.</dt>
</dl>

<p>J'adore :</p>
<ol>
	<li>L'informatique</li>
	<ul>
		<li>Le langages web</li>
		<li>L'application « Notion »</li>
	</ul>
	<li>La montagne</li>
	<ul>
		<li>Le ski</li>
		<li>Le snowboard</li>
		<li>L'escalade</li>
	</ul>
	<li>La musique</li>
	<ul>
		<li>La MAO (musique assistée par ordinateur)</li>
		<li>Le rap</li>
		<li>La batterie</li>
	</ul>
</ol>

Tableaux <table>

Les tableaux sont utiles pour présenter des données organisées. Leur structure peut être simple (peu de balises) mais aussi complexe (beaucoup de balises).

Tableau simple

Lors de la création d’un tableau, seules 3 balises sont essentielles :

• Un tableau est déclaré avec la balise <table> qui agit comme un conteneur.
• Chaque ligne du tableau est déclarée avec la balise <tr> (« Table Row »)
• Chaque cellule de données du tableau est déclarée avec la balise <td> (« Table Data »)

<table>
	<tr>
		<td>Violet</td>
		<td>#645ff2</td>
		<td>rgb(100, 95, 242)</td>
	</tr>
	<tr>
		<td>Rose</td>
		<td>#e12d79</td>
		<td>rgb(225, 45, 121)</td>
	</tr>
</table>

Ce tableau liste des couleurs, associées à leur code hexadécimal et RGB.

Tableau structuré

Il est possible de structurer davantage un tableau en faisant usage de 5 balises supplémentaires.

En-tête, corps et pied

On peut distinguer trois parties dans un tableau :

1. (en haut) L’en-tête du tableau contenant généralement les intitulés des colonnes. On la déclare avec <thead>.
2. (au milieu) Le corps du tableau contenant les informations de notre tableau. On le déclare avec <tbody>.
3. (en bas) Le pied du tableau servant à calculer des valeurs (totaux, moyennes…) ou à rappeler les intitulés des colonnes si le tableau est long. On le déclare avec <tfoot>.

<table>
	<thead>
		<!-- ... -->
	<thead>
	<tbody>
		<!-- ... -->
	</tbody>
	<tfoot>
		<!-- ... -->
	</tfoot>
</table>

Cellules d’en-tête

Aussi, chaque cellule d’en-tête sera déclarée avec la balise <th> (« Table Header ») et non avec la balise <td>.

<table>
	<thead>
		<tr>
			<th>Nom</th>
			<th>Code hexadécimal</th>
			<th>Code RGB</th>
		</tr>
	<thead>
	<tbody>
		<!-- ... -->
	</tbody>
	<tfoot>
		<tr>
			<th>Nom</th>
			<th>Code hexadécimal</th>
			<th>Code RGB</th>
		</tr>
	</tfoot>
</table>

Légende

Une légende peut être ajoutée avec la balise <caption> afin de décrire le tableau.

<table>
	<caption>Les couleurs de laConsole</caption>
	<thead>
		<!-- ... -->
	<thead>
	<tbody>
		<!-- ... -->
	</tbody>
	<tfoot>
		<!-- ... -->
	</tfoot>
</table>

Contenus embarqués <iframe>

La balise <iframe> « Inline FRAME » permet d’intégrer une page HTML au sein d’une autre.

Un iframe représente un véritable contexte de navigation avec lequel il est possible d’interagir, comme si nous étions sur la vraie page web.

On l’utilise la plupart du temps afin d’intégrer des services interactifs externes à notre site web comme une carte Google Maps, un widget météo, un lecteur YouTube, un lecteur Spotify…

• On spécifie le chemin vers la page à intégrer via l’attribut src.
• Pour une meilleure accessibilité, on prendra également l’habitude d’ajouter un attribut title afin de décrire de façon claire et concise, le contenu embarqué.

<iframe src="https://meteofrance.com/widget/prevision/330630" title="Prévisions météo à Bordeaux (33)"></iframe>

Médias riches <video> et <audio>

S’il est très fréquent d’ajouter des images sur un site web, il peut également être intéressant d’y insérer un lecteur vidéo ou audio.

Les balises <video> et <audio> permettent respectivement d’insérer un lecteur vidéo et audio au sein d’une page.

La source vers le média est renseignée via un attribut src au sein d’une balise <source>.

Les navigateurs ne prennent pas en charge l’ensemble des formats vidéo (mp4, webm…). Il sera alors possible de fournir plusieurs sources en spécifiant plusieurs balises <source> ; le navigateur utilisera alors la première ressource dont il connaît le format.

<video controls>
	<source src="movies/movie1.mp4" type="video/mp4">
	<source src="movies/movie1.webm" type="video/webm">
	Votre navigateur ne prend pas en charge l'élément vidéo.
</video>

<audio controls>
	<source src="sounds/birds.mp3" type="audio/mp3">
	Votre navigateur ne prend pas en charge l'élément audio.
</audio>

D’autres attributs facultatifs vont permettre de customiser davantage le lecteur, comme :

• controls : affichage des options de contrôle sur le lecteur (volume, bouton et barre de lecture…).
• muted : coupe le son.
• loop : lecture en boucle.
• autoplay : lecture automatique. Pour des raisons d’expérience utilisateur (éviter les sursauts en arrivant sur un site…), nombreux sont les navigateurs qui bloquent la fonction de lecture automatique si le son du lecteur n’est pas coupé. Si vous définissez l’attribut autoplay, assurez-vous alors d’avoir également défini l’attribut muted.
• …

Si le navigateur ne prend pas en charge les lecteurs vidéos ou audio HTML5, alors un message pourra être noté dans un paragraphe, au sein de la balise <video>.

Mise en valeur <em> et <strong>

Sur un site web, en termes de SEO, tous les mots ne sont pas égaux.

Par exemple, sur la page d’accueil d’une plateforme d’elearning dédiée au développement web, il est évident que les mots :

• “formations”, “développement web”, “gratuite”, “développeur”, “étudiant”…

Auront plus d’importance que :

• “bonjour”, “koala”, “le”, “rouge”…

Si nous avons vu que les balises <h*> jouent un rôle important dans la pondération des mots pour le référencement, elles ne sont pas seules.

Les balises <em> (« EMphasis ») et <strong> vont respectivement permettre de définir une mise en valeur plus élevée pour un mot ou un ensemble de mots. <strong> confère une mise en valeur supérieure à <em>.

Cette mise en valeur se caractérise par :

• Une intonation plus forte de la part des synthétiseurs vocaux.
• Une pondération accrue pour le SEO.

<p>Venez là, <em>tout de suite</em> !</p>

<p>
	Vous êtes étudiant ? Développeur ?
	Retrouvez sur la console des dizaines de <strong>formations gratuites en développement web</strong>
</p>

Dessins <canvas>

La balise <canvas> permet de définir un conteneur dans lequel il sera possible de réaliser des graphiques à l’aide du langage JavaScript.

<canvas id="zone-de-dessin">
	Votre navigateur ne prend pas en charge l'élément canvas.
</canvas>

Son exploitation nécessitant des compétences en JS, nous ne détaillerons pas comment dessiner à l’intérieur. Vous en apprendrez plus sur le site w3school.