Récapitulatif des Balises HTML

Balises de structure de base

Balise Définition et usage

<!DOCTYPE html> Définit le type de document. C'est la toute première déclaration dans votre fichier HTML5 pour que le navigateur interprète correctement la page.

<html>

Élément racine qui encapsule tout le contenu de la page.

Attribut lang="fr" Spécifie que la langue du contenu est le français. Crucial pour l'accessibilité et le SEO.

<head> Contient les métadonnées de la page (informations non visibles directement) : titre, styles, scripts, etc.

<title> Définit le titre affiché dans l'onglet du navigateur et utilisé par les moteurs de recherche.

<meta>

Fournit des métadonnées sur le document.

`charset="UTF-8"`	Déclare l'encodage des caractères, essentiel pour afficher correctement les accents.
`name="viewport"`	Définit la zone visible sur les appareils mobiles pour un design responsive.

<link>

Lie une ressource externe, le plus souvent une feuille de style CSS.

`rel="stylesheet"`	Indique la relation (feuille de style).
`href="style.css"`	Spécifie l'URL de la ressource.

<style> Permet d'écrire du code CSS directement dans le document HTML (dans le <head>).

<body> Contient tout le contenu visible de la page web.

Exemple de structure complète

<!DOCTYPE html>
	<html lang="fr">
		<head>
			<meta charset="UTF-8">
			<meta name="viewport" content="width=device-width, initial-scale=1.0">
			<title>Titre de la page</title>
			<link rel="stylesheet" href="style.css">
			<style>/* ici les propriétés CSS de style */</style>
		</head>
		<body>
			<!-- Ici un commentaire -->
			<h1>Mon titre principal</h1>
			<p>Mon premier paragraphe.</p>
		</body>
	</html>

Mise en forme du texte

Balise	Définition et usage	Exemple de code	Résultat
`<h1>...<h6>`	Titres de section. `<h1>` est le plus important.	`<h1>Titre 1</h1> <h2>Titre 2</h2>`	Titre 1 Titre 2
`<p>`	Définit un paragraphe de texte.	`<p>Ceci est un paragraphe.</p>`	Ceci est un paragraphe.
`<strong>`, `<b>`	Met le texte en gras. `<strong>` a une importance sémantique (texte important), tandis que `<b>` est purement visuel.	`Texte <strong>important</strong>. Texte en <b>gras</b>.`	Texte important. Texte en gras.
`<em>`, `<i>`	Met le texte en italique. `<em>` met l'emphase sur un mot, `<i>` est visuel (ex: un terme technique).	`C'est <em>vraiment</em> utile. Un terme en <i>italique</i>.`	C'est vraiment utile. Un terme en italique.
`<u>`	Souligne le texte. À utiliser avec précaution pour ne pas le confondre avec un lien.	`Texte <u>souligné</u>.`	Texte souligné.
`<!-- -->`	Insère un commentaire dans le code HTML. Il n'est pas affiché par le navigateur.	`<!-- Ceci est un commentaire -->`	(Non visible dans la page)

Listes

Balise	Définition et usage	Exemple de code	Résultat
`<ul>`, `<li>`	Liste non ordonnée (à puces).	`<ul> <li>Item 1</li> <li>Item 2</li> </ul>`	Item 1 Item 2
`<ol>`, `<li>`	Liste ordonnée (numérotée). L'attribut `type` permet de changer le style de numérotation.	`<ol type="A"> <li>Premier</li> <li>Second</li> </ol>`	Premier Second
`<dl>`, `<dt>`, `<dd>`	Liste de définition. `<dt>` est le terme à définir et `<dd>` sa définition.	`<dl> <dt>HTML</dt> <dd>Langage de balisage...</dd> </dl>`	HTML Langage de balisage...

Tableaux

Balise/Attribut Définition et usage Exemple de code Résultat

<table>

Crée un tableau. <tr> pour les lignes, <th> pour les en-têtes, <td> pour les cellules.

<table>
  <tr>
    <th>Cours</th>
    <th>Prof</th>
  </tr>
  <tr>
    <td>LPOW</td>
    <td>N. Pirmez</td>
  </tr>
</table>

Cours	Prof
LPOW	N. Pirmez

<caption>

Définit le titre ou la légende d'un tableau. Pour l'accessibilité, il doit être le premier élément enfant de <table>.

<table>
  <caption>Notes des étudiants</caption>
  ...
</table>

Notes des étudiants
Nom	Note
Alice	18

colspan

Attribut de <th> ou <td> pour fusionner une cellule sur plusieurs colonnes.

<table>
  <tr>
    <th colspan="2">Titre sur 2 colonnes</th>
  </tr>
  <tr>
    <td>Cellule 1</td>
    <td>Cellule 2</td>
  </tr>
</table>

Titre sur 2 colonnes
Cellule 1	Cellule 2

rowspan

Attribut de <th> ou <td> pour fusionner une cellule sur plusieurs lignes.

<table>
  <tr>
    <td rowspan="2">Fusion sur 2 lignes</td>
    <td>Ligne 1</td>
  </tr>
  <tr>
    <td>Ligne 2</td>
  </tr>
</table>

Fusion sur 2 lignes	Ligne 1
	Ligne 2

Liens & Images

Balise Définition et usage Exemple de code Résultat

<a>

Crée un lien hypertexte.

`href="..."`	Définit l'URL de destination.
`target="_blank"`	Ouvre le lien dans un nouvel onglet.
`target="_self"`	Ouvre le lien dans la même page.

<a href="https://www.ephec.be" target="_blank">
  Site de l'EPHEC
</a>

Site de l'EPHEC

<img>

Affiche une image. C'est une balise auto-fermante.

`src="..."`	Chemin vers le fichier image.
`alt="..."`	Texte alternatif descriptif pour SEO qui s'affiche également lorsque pour une raison quelconque l'image ne s'affiche pas.

<img 
  src="https://www.ephec.be/logo.jpg" 
  alt="Logo EPHEC">

URLs Relatives et Absolues

Une URL (Uniform Resource Locator) est l'adresse d'une ressource sur le web. Il est crucial de comprendre la différence entre les deux types pour créer des liens et charger des ressources correctement.

Type	Description et Usage	Exemple
`URL Absolue`	Une adresse web complète, incluant le protocole (`http://` ou `https://`), le nom de domaine, et le chemin. Usage : Pour pointer vers des ressources sur un autre site web.	`<a href="https://www.google.com">Lien externe</a> <img src="https://www.ephec.be/images/logo.png">`
`URL Relative`	Un chemin partiel qui pointe vers une ressource sur le même site web. Le chemin est résolu à partir du document actuel. Usage : Pour tous les liens internes et les ressources locales (images, CSS, etc.).	`<!-- Dans le même dossier --> <a href="page2.html">Page 2</a> <a href="./page2.html">Page 2</a> <!-- Dans le dossier parent --> <a href="../index.html">Accueil</a> <!-- Depuis la racine du site --> <img src="/images/logo.png">`

Multimédia

Balise	Définition et usage	Exemple de Code	Résultat
`<audio>`	Intègre un contenu audio. L'attribut `controls` affiche les contrôles de lecture.	`<audio controls src="audio.mp3"> Votre navigateur ne supporte pas l'audio. </audio>`
`<video>`	Intègre une vidéo. `width` et `controls` sont des attributs courants.	`<video controls width="250"> <source src="video.mp4" type="video/mp4"> </video>`

Formulaires

Balise Définition et usage

<form>

Conteneur pour les champs d'un formulaire.

`action="..."`	URL de la page qui traitera les données.
`method="..."`	Méthode HTTP (`GET` ou `POST`).

<label> Étiquette textuelle pour un champ de formulaire. L'attribut for doit correspondre à l'id du champ lié.

<input>

Balise la plus polyvalente pour créer des champs de formulaire (texte, mot de passe, cases à cocher, etc.).

`type="..."`	Définit le type de champ (voir ci-dessous).
`id="..."`	Identifiant unique, pour le `<label>`.
`name="..."`	Nom du champ/variable, envoyé au serveur.
`value="..."`	Contient la valeur initiale du champ.
`placeholder="..."`	Indique à l’utilisateur une information sur le type de données à renseigner lorsque le champ n’a pas encore de valeur.
Autres attributs optionnels	Voir ci-dessous.

<fieldset>, <legend> <fieldset> groupe des champs apparentés, et <legend> lui donne un titre.

Exemples de champs de formulaire

Exemple de code	Résultat	Type et usage
`<label for="id_nom">Nom:</label> <input type="text" id="id_nom" name="nom" size="10" maxlength="5">`	Nom:	text Champ de texte sur une ligne.
`<label for="id_pass">Mot de passe:</label> <input type="password" id="id_pass" name="pass">`	Mot de passe:	password Champ de mot de passe (caractères masqués).
`<label for="id_email">Email:</label> <input type="email" id="id_email" name="email">`	Email:	email Champ pour une adresse e-mail (validation intégrée).
`<label for="id_web">Site web:</label> <input type="url" id="id_web" name="site">`	Site web:	url Champ pour une URL (validation intégrée).
`<label for="id_tel">Téléphone:</label> <input type="tel" id="id_tel" name="tel">`	Téléphone:	tel Champ pour un numéro de téléphone (validation intégrée).
`<label for="id_age">Âge:</label> <input type="number" id="id_age" name="age" min="0" max="120" step="2">`	Âge:	number Champ numérique avec des contrôles.
`<label for="id_note">Note:</label> <input type="range" id="id_note" name="note" min="0" max="10" step="0.5">`	Note:	range Curseur de sélection (slider).
`<input type="radio" id="id_femme" name="sexe" value="f" checked> <label for="id_femme">Femme</label> <input type="radio" id="id_homme" name="sexe" value="h"> <label for="id_homme">Homme</label>`	Femme Homme	radio Bouton radio (un seul choix possible).
`<input type="checkbox" id="id_cgv" name="cgv"> <label for="id_cgv">Accepter les CGV</label> <input type="checkbox" id="id_cgu" name="cgu"> <label for="id_cgu">Accepter les CGU</label>`	Accepter les CGV Accepter les CGU	checkbox Case à cocher.
`<input type="hidden" name="user_id" value="123">`	(Champ non visible)	hidden Champ invisible pour envoyer des données techniques.
`<label for="id_msg">Message:</label> <textarea id="id_msg" name="msg" rows="3" cols="20"></textarea>`	Message:	textarea Zone de texte sur plusieurs lignes.
`<label for="id_cours">Cours:</label> <select name="cours" id="id_cours"> <optgroup label="Bac 1"> <option value="lp">LPOW</option> </optgroup> <optgroup label="Bac 2"> <option value="wa">Web avancé</option> </optgroup> </select>`	Cours:	select Liste déroulante de sélection.
`<input type="reset" value="Réinitialiser tout">`		reset Bouton qui efface les données du formulaire.
`<input type="submit" value="Envoyer le formulaire">`		submit Bouton qui soumet le formulaire.
`<fieldset> <legend>Votre choix :</legend> <input type="radio" id="o1" name="choix"> <label for="o1">Option 1</label> </fieldset>`	Votre choix :Option 1	fieldset Regroupe visuellement et sémantiquement des champs apparentés.

Attributs de formulaire courants

Attribut	Usage et Exemple
`placeholder`	Affiche un texte indicatif dans un champ, qui disparaît à la saisie. `<input type="email" placeholder="nom@example.com">`
`required`	Rend un champ obligatoire. Le formulaire ne peut être envoyé si le champ est vide. `<input type="text" required>`
`checked`	Pré-coche une case (`checkbox`) ou un bouton `radio`. `<input type="checkbox" checked>`
`selected`	Pré-sélectionne une `<option>` dans une liste déroulante `<select>`. `<option value="be" selected>Belgique</option>`
`disabled`	Désactive un champ. Il est visible mais non modifiable et sa valeur n'est pas envoyée. `<input type="text" disabled>`
`readonly`	Rend un champ non modifiable, mais sa valeur est envoyée avec le formulaire. `<input type="text" value="Non modifiable" readonly>`
`maxlength`	Définit le nombre maximum de caractères pour un champ de texte. `<input type="text" maxlength="10">`
`size`	Définit la largeur visible (en nombre de caractères) d'un champ de texte. `<input type="text" size="50">`

Éléments conteneurs génériques

Balise	Définition et usage
`<div>`	Élément de type bloc (« block-level element »). C'est un conteneur générique utilisé pour regrouper d'autres éléments afin de les styliser en CSS ou de les manipuler en JavaScript. Il occupe toute la largeur disponible et crée un retour à la ligne avant et après.
`<span>`	Élément de type en ligne (« inline element »). C'est un conteneur générique utilisé pour regrouper une partie de texte ou d'autres éléments en ligne. Il n'occupe que la largeur de son contenu et ne provoque pas de retour à la ligne.

Balises sémantiques

Balise	Définition et Usage
`<header>`	Représente l'en-tête d'une page ou d'une section (logo, titre, navigation).
`<nav>`	Définit un bloc de liens de navigation principaux.
`<main>`	Représente le contenu principal et unique de la page.
`<section>`	Regroupe un contenu par thème. Doit généralement contenir un titre (h1-h6).
`<article>`	Représente un contenu indépendant (ex: un article de blog).
`<aside>`	Contenu complémentaire au contenu principal (ex: une barre latérale).
`<footer>`	Représente le pied de page (auteur, copyright, liens).
`<thead>`	Regroupe le contenu de l'en-tête (`<tr>` avec des `<th>`) dans un tableau.
`<tbody>`	Regroupe le contenu principal (les lignes de données) du tableau. C'est le conteneur par défaut pour les lignes si `<thead>` n'est pas spécifié.
`<tfoot>`	Regroupe le contenu du pied de page du tableau (ex: lignes de totaux).