Langage HTML
I. Introduction à HTML (HyperText Markup Language)
Objectif de compétence : Comprendre la structure de base d’un document HTML et savoir
utiliser les balises essentielles pour créer une page web simple.
1) Qu'est-ce que HTML ?
Objectif : Comprendre ce qu’est le HTML et son rôle dans la création de pages web.
Explication :
HTML (HyperText Markup Language) est un langage de balisage utilisé pour structurer
le contenu d’une page web.
Il est constitué de balises (tags) qui définissent les différents éléments de la page (titres,
paragraphes, images, liens, etc.).
HTML décrit la structure de la page, mais ne s’occupe pas de l’apparence. Pour cela, on
utilise CSS (Cascading Style Sheets).
Exemples de code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page HTML Simple</title>
</head>
<body>
<h1>Bienvenue sur ma page</h1>
<p>Ceci est un paragraphe de texte.</p>
</body>
</html>
2) Structure d’un document HTML
Objectif : Apprendre à organiser un document HTML de manière correcte.
Un document HTML est structuré en plusieurs parties :
1. Doctype : Déclare le type de document pour le navigateur.
2. <html> : Contient tout le contenu de la page HTML.
3. <head> : Contient des informations sur le document, comme le titre, les liens vers les
styles externes, etc.
1
4. <body> : Contient le contenu visible de la page.
Exemple de structure complète d’une page HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page HTML Simple</title>
</head>
<body>
<h1>Mon Titre Principal</h1>
<p>Bienvenue sur ma première page HTML !</p>
</body>
</html>
Points importants à vérifier :
La balise <html> doit toujours être présente pour encapsuler tout le document.
Le <head> inclut des métadonnées (comme le charset, le titre de la page, etc.) mais pas de
contenu visible.
Le contenu visible de la page est contenu dans le <body>.
3) Les balises HTML essentielles
Objectif : Apprendre à utiliser les balises HTML de base pour structurer du contenu.
Les titres HTML (<h1>, <h2>, <h3>, etc.)
Explication :
HTML propose six niveaux de titres allant de <h1> (le plus important) à <h6> (le moins
important).
Les balises de titres sont utilisées pour organiser et structurer le contenu en sections
hiérarchiques.
Exemple de code :
<h1>Titre Principal</h1>
<h2>Sous-titre</h2>
<h3>Un autre sous-titre</h3>
Points à vérifier :
Utiliser les balises de titre dans un ordre logique (<h1>, <h2>, etc.).
Ne jamais sauter de niveau, c’est-à-dire passer de <h1> directement à <h3> sans avoir un
<h2> entre les deux.
2
Paragraphe (<p>)
Explication :
La balise <p> est utilisée pour définir un paragraphe de texte.
Un paragraphe est automatiquement suivi et précédé d’un espace vertical (marge).
Exemple de code :
<p>Ceci est un paragraphe de texte. Il peut contenir plusieurs lignes.</p>
Liste non ordonnée (<ul>, <li>) et ordonnée (<ol>)
Explication :
La balise <ul> est utilisée pour créer une liste non ordonnée (à puces).
La balise <ol> est utilisée pour créer une liste ordonnée (numérotée).
Chaque élément de la liste est placé dans une balise <li> (list item).
Exemple de code :
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
<li>Élément 3</li>
</ul>
<ol>
<li>Premier élément</li>
<li>Deuxième élément</li>
<li>Troisième élément</li>
</ol>
Liens (<a>)
Explication :
La balise <a> est utilisée pour créer un lien hypertexte.
L'attribut href permet de spécifier l’URL de la page vers laquelle le lien pointe.
Exemple de code :
<a href="[Link] notre site !</a>
3
Points à vérifier :
Toujours inclure l’attribut href dans les liens.
Utiliser des liens relatifs pour les pages internes et des liens absolus pour les pages
externes.
Les balises de mise en forme du texte :
Ces balises sont utilisées pour modifier l'apparence du texte ou pour indiquer des intentions
sémantiques.
<b> : Met en gras le texte sans signification sémantique. À éviter pour les titres,
privilégier <strong>.
<strong> : Met en gras et indique une forte importance sémantique.
<i> : Met en italique sans signification sémantique. À éviter, privilégier <em>.
<em> : Met en italique et indique de l'emphase (importance sémantique).
<u> : Souligne le texte, utilisé rarement sauf pour des liens ou des termes spécifiques.
Exemple :
<p>Voici un texte <strong>important</strong> et un texte <em>mis en valeur</em>.</p>
<p>Ceci est un texte <b>en gras</b> et <i>en italique</i>.</p>
<p>Ce mot est <u>souligné</u>.</p>
Les balises de citation (<q>, <blockquote>)
Ces balises permettent d'encadrer des citations.
<q> : Utilisée pour les citations courtes en ligne, avec des guillemets automatiquement
ajoutés par le navigateur.
<blockquote> : Utilisée pour des citations longues, généralement avec un retrait ou
un formatage particulier.
Exemple :
Html
<p>Il a dit <q>HTML est essentiel pour le web moderne</q>.</p>
<blockquote cite="[Link]
HTML permet de structurer les pages web de manière efficace.
</blockquote>
4
4) Les balises multimédia
Les balises multimédia en HTML permettent d'ajouter des éléments interactifs et visuels à une
page web, tels que des images, des vidéos, du son, et d'autres types de contenu. Ces balises sont
essentielles pour enrichir l'expérience utilisateur et rendre le contenu plus engageant.
Voici une présentation détaillée des balises multimédia en HTML :
Les balises d'image :
Balise <img>
La balise <img> permet d'insérer une image dans une page web.
Attributs importants :
src : définit la source de l'image (URL ou chemin local).
alt : un texte alternatif qui décrit l'image, utile pour l'accessibilité (lecteurs
d'écran) et lorsque l'image ne se charge pas.
width et height : pour spécifier la taille de l'image.
Exemple de code :
<img src="images/[Link]" alt="Une belle image" width="300" height="200">
Format d’image (PNG, JPEG, GIF, SVG, etc.)
Les formats d’image les plus courants incluent :
JPEG et PNG pour des images avec ou sans transparence.
GIF pour des images animées.
SVG pour des graphiques vectoriels évolutifs.
Les balises audio :
Balise <audio>
La balise <audio> est utilisée pour intégrer des fichiers audio dans une page web. Elle offre des
fonctionnalités de lecture, pause et contrôle du volume.
Attributs importants :
src : définit la source du fichier audio (URL ou chemin local).
controls :
permet d'afficher les contrôles natifs du lecteur (play, pause, volume).
autoplay : commence la lecture automatiquement dès le chargement du fichier.
loop : répète la lecture du fichier audio.
5
Exemple de code :
<audio controls>
<source src="audio/maudio.mp3" type="audio/mp3">
Votre navigateur ne supporte pas la balise audio.
</audio>
Formats audio courants
Les formats les plus utilisés pour l'audio sont MP3, OGG, et WAV.
Les balises vidéo :
Balise <video>
La balise <video> permet d'intégrer des vidéos dans une page web. Comme pour <audio>, elle
offre des contrôles pour la lecture, le volume, et d'autres fonctionnalités.
Attributs importants :
src : définit la source du fichier vidéo.
controls : affiche les contrôles natifs du lecteur (lecture, pause, volume, etc.).
autoplay : commence la lecture automatiquement dès que la vidéo est prête.
muted : démarre la vidéo avec le son désactivé.
poster : affiche une image de prévisualisation avant que la vidéo ne soit lue.
Exemple de code :
<video width="320" height="240" controls>
<source src="video/ma_video.mp4" type="video/mp4">
Votre navigateur ne supporte pas la balise vidéo.
</video>
Formats vidéo courants
Les formats vidéo les plus courants sont MP4, WebM, et OGG.
Options de sous-titres (balise <track>)
La balise <track> permet d'ajouter des sous-titres à une vidéo pour différentes langues.
Exemple :
<video width="320" height="240" controls>
<source src="video/ma_video.mp4" type="video/mp4">
<track src="sous_titres_en.vtt" kind="subtitles" srclang="en" label="English">
6
<track src="sous_titres_fr.vtt" kind="subtitles" srclang="fr" label="Français">
Votre navigateur ne supporte pas la balise vidéo.
</video>
Les balises d’intégration de contenu externe :
Balise <iframe>
L'élément <iframe> permet d'intégrer une autre page web dans la page actuelle. Cela est utile
pour intégrer des vidéos de YouTube, des cartes Google, ou d'autres contenus externes.
Attributs importants :
src : définit l'URL de la page ou du contenu à afficher.
width et height : pour spécifier la taille de l'iframe.
frameborder : pour afficher ou non une bordure autour de l'iframe.
Exemple :
<iframe src="[Link] width="560" height="315" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
Les balises de flux multimédia :
Balise <object>
L'élément <object> permet d'intégrer des objets multimédia tels que des fichiers Flash, PDF, ou
autres applications.
Attributs importants :
data : définit le
fichier ou la ressource à charger.
type : spécifie le type MIME du fichier.
width et height : pour la taille de l'élément.
Exemple :
<object data="[Link]" type="application/x-shockwave-flash" width="500" height="300">
Votre navigateur ne supporte pas l'élément <object>.
</object>
5.2. Balise <embed>
L'élément <embed> est utilisé pour intégrer des objets multimédia ou des fichiers externes
directement dans la page, comme des vidéos ou des animations Flash.
7
Exemple :
<embed src="[Link]" width="500" height="300">
Les balises de contrôle de contenu :
Balise <progress>
La balise <progress> est utilisée pour afficher une barre de progression pour une tâche en cours,
comme le téléchargement d'un fichier ou un traitement en cours.
Exemple :
<progress value="70" max="100">70%</progress>
Balise <meter>
La balise <meter> est utilisée pour afficher un indicateur de mesure pour une valeur dans une
plage connue, comme un niveau de batterie ou une température.
Exemple :
<meter value="0.6" min="0" max="1">60%</meter>
Résumé des balises multimédia :
<img> : pour les images.
<audio> : pour l'audio.
<video> : pour la vidéo.
<iframe> : pour intégrer des contenus externes.
<object> et <embed> : pour des objets multimédia externes.
<track> : pour ajouter des sous-titres à une vidéo.
<progress> et <meter> : pour afficher des indicateurs de progression et de mesure.
5) Structurer une page simple avec HTML
Objectif : Apprendre à combiner différentes balises HTML pour créer une page structurée de
manière simple.
Exercice pratique : Demander aux apprenants de créer une page HTML qui contient :
1. Un titre principal <h1>.
2. Un paragraphe <p>.
3. Une liste à puces avec des éléments <ul> et <li>.
8
4. Un lien <a> pointant vers un site web externe.
5. Une image <img>.
Solution attendue :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ma Première Page</title>
</head>
<body>
<h1>Bienvenue sur mon site</h1>
<p>Voici une page simple créée en HTML.</p>
<ul>
<li>Apprendre HTML</li>
<li>Apprendre CSS</li>
<li>Apprendre JavaScript</li>
</ul>
<a href="[Link] mon site !</a>
<br>
<img src="[Link]" alt="Exemple d'image">
</body>
</html>
6) Problèmes courants et solutions
Balise mal fermée ou manquante : Cela peut entraîner des erreurs de rendu dans le
navigateur. Toujours vérifier que toutes les balises ouvertes sont correctement fermées.
Problème :
<p>Ceci est un texte sans fermeture de balise.
Solution :
<p>Ceci est un texte avec une balise fermée.</p>
Attribut href manquant dans un lien : Le lien ne fonctionnera pas sans un attribut href
valide.
Problème :
<a>Pas de lien</a>
Solution :
<a href="[Link] le site</a>
Oublier l’attribut alt pour les images : Pour l'accessibilité et le référencement, il est
important d'ajouter un texte alternatif pour les images.
Problème :
9
<img src="[Link]">
Solution :
<img src="[Link]" alt="Description de l'image">
II. Tableaux HTML
Objectif : Apprendre à structurer des données tabulaires avec des tableaux HTML.
1) Structure de base d'un tableau
Un tableau en HTML est utilisé pour organiser des données sous forme de lignes et de colonnes.
Les balises de tableau principales sont :
<table> : crée letableau.
<tr> : définit une ligne dans le tableau.
<th> : définit une cellule d'en-tête (en gras, centré par défaut).
<td> : définit une cellule de données.
<caption> (optionnel) : ajoute un titre au tableau.
Exemple de code :
<table>
<caption>Tableau des employés</caption>
<thead>
<tr>
<th>Nom</th>
<th>Poste</th>
<th>Âge</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jean Dupont</td>
<td>Développeur</td>
<td>30</td>
</tr>
<tr>
<td>Marie Martin</td>
<td>Designer</td>
<td>25</td>
</tr>
</tbody>
</table>
10
2) Ajouter des bordures et de l'espacement
Les tableaux sont souvent accompagnés de bordures pour améliorer la lisibilité. Bien que ce soit
généralement une tâche pour CSS, il est possible de définir les bordures directement en HTML
avec l'attribut border.
Exemple de code avec bordure :
<table border="1">
<caption>Tableau avec bordure</caption>
<thead>
<tr>
<th>Nom</th>
<th>Poste</th>
<th>Âge</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jean Dupont</td>
<td>Développeur</td>
<td>30</td>
</tr>
<tr>
<td>Marie Martin</td>
<td>Designer</td>
<td>25</td>
</tr>
</tbody>
</table>
3) Tableaux imbriqués
Il est possible d'insérer un tableau à l'intérieur d'une cellule d'un autre tableau, créant ainsi des
tableaux imbriqués.
Exemple de code :
<table border="1">
<caption>Tableau avec tableau imbriqué</caption>
<thead>
<tr>
<th>Nom</th>
<th>Détails</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jean Dupont</td>
11
<td>
<table border="1">
<tr>
<td>Poste</td>
<td>Développeur</td>
</tr>
<tr>
<td>Âge</td>
<td>30</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
Points à vérifier :
Utiliser des balises <thead>, <tbody> et <tfoot> pour structurer correctement un tableau.
Toujours fournir un titre via <caption> pour les tableaux complexes.
III. Formulaires HTML
Objectif : Apprendre à créer des formulaires HTML pour recueillir des informations des
utilisateurs.
1) Structure de base d'un formulaire
Un formulaire permet aux utilisateurs d'envoyer des données à un serveur via le HTML. La
balise principale pour un formulaire est <form>, et elle inclut des éléments comme des champs
de texte, des boutons, des cases à cocher, etc.
Les balises importantes dans un formulaire sont :
<form> : définit le formulaire.
<input> : permet de créer des champs de saisie (texte, mot de passe, bouton, etc.).
<label> : associe un label (texte) à un champ de formulaire.
<textarea> : pour créer des zones de texte multiligne.
<select> et <option> : pour créer des menus déroulants.
Exemple de code :
<form action="/soumettre_formulaire" method="post">
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom" required><br>
<label for="email">Email :</label>
12
<input type="email" id="email" name="email" required><br>
<label for="message">Message :</label><br>
<textarea id="message" name="message" rows="4" cols="50" required></textarea><br>
<input type="submit" value="Envoyer">
</form>
2) Types de champs de formulaire
Explication :
Champs texte (<input type="text">) : pour saisir des informations courtes.
Mot de passe (<input type="password">) : pour la saisie d'un mot de passe.
Email (<input type="email">) : pour saisir une adresse email, avec validation automatique du
format d'email.
Boutons (<input type="submit">) : pour soumettre le formulaire.
Cases à cocher (<input type="checkbox">) : pour les options sélectionnables.
Menus déroulants (<select> et <option>) : pour créer des menus déroulants.
Exemple de code avec différents types de champs :
<form action="/soumettre_formulaire" method="post">
<label for="age">Âge :</label>
<input type="number" id="age" name="age" min="18" max="100" required><br>
<label for="newsletter">S'abonner à la newsletter :</label>
<input type="checkbox" id="newsletter" name="newsletter"><br>
<label for="ville">Ville :</label>
<select id="ville" name="ville">
<option value="paris">Paris</option>
<option value="lyon">Lyon</option>
<option value="marseille">Marseille</option>
</select><br>
<input type="submit" value="Envoyer">
</form>
Points à vérifier :
Toujours utiliser l’attribut for dans la balise <label> pour associer un label à un champ de
formulaire.
Utiliser type="email" et type="password" pour les champs respectifs afin d’améliorer
l’expérience utilisateur.
Ne jamais oublier l’attribut action dans le formulaire, qui définit l'URL de traitement des
données.
13
3) Problèmes courants et solutions pour les tableaux et formulaires
1. Tableau sans bordures visibles : Si vous ne voyez pas les bordures du tableau, vérifiez que
vous avez bien utilisé l'attribut border="1" ou que vous appliquez un style CSS pour les
bordures.
2. Formulaire sans action définie : Si le formulaire ne fonctionne pas correctement,
assurez-vous que l'attribut action est bien défini et qu'il pointe vers une URL valide pour
le traitement.
Problème :
<form method="post">
Solution :
<form action="/soumettre_formulaire" method="post">
3. Absence de validation de champ : Si les champs de formulaire ne sont pas validés
correctement (par exemple, un champ email mal rempli), assurez-vous d’utiliser les
attributs de validation comme required, minlength, ou pattern.
IV. les balises sémantiques et non sémantiques
En HTML, les balises sémantiques et non sémantiques jouent un rôle crucial dans la
structuration du contenu de manière compréhensible pour les navigateurs, les moteurs de
recherche et les utilisateurs. Il est essentiel de comprendre ces deux types de balises pour créer
des pages web accessibles et bien structurées.
1) Balises Sémantiques :
Les balises sémantiques (ou balises structurées) apportent une signification explicite au contenu
qu'elles contiennent. Elles permettent de mieux décrire le rôle de l'élément dans la page, ce qui
améliore l'accessibilité, le référencement (SEO) et la lisibilité du code.
Avantages des balises sémantiques :
Amélioration du SEO : Les moteurs de recherche comme Google utilisent les balises
sémantiques pour mieux comprendre la structure de la page et son contenu.
Accessibilité : Les technologies d'assistance comme les lecteurs d'écran peuvent mieux
interpréter et annoncer le contenu sémantique.
Lisibilité du code : Le code est plus facile à comprendre et à maintenir pour d'autres
développeurs, car il décrit clairement la structure de la page.
Exemples de balises sémantiques :
<header> : Définie comme l'en-tête de la page ou d'une section. Contient généralement
un logo, des titres, des menus de navigation.
14
Exemple :
<header>
<h1>Bienvenue sur mon site web</h1>
<nav>
<ul>
<li><a href="#home">Accueil</a></li>
<li><a href="#about">À propos</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<nav> : Utilisée pour les liens de navigation. Elle regroupe généralement les liens vers les
pages principales du site.
Exemple :
<nav>
<ul>
<li><a href="#home">Accueil</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
</ul>
</nav>
<article>: Définie un contenu autonome pouvant être distribué et réutilisé (par exemple,
un article de blog, une nouvelle, etc.).
Exemple :
<article>
<h2>Mon article</h2>
<p>Ceci est le contenu de mon article...</p>
</article>
<section> : Utilisée pour décrire une section du document. Chaque section peut contenir
des titres, du contenu, et des sous-sections.
Exemple :
<section>
<h2>Nos Services</h2>
<p>Nous proposons une gamme de services...</p>
</section>
15
<footer> : Définie le pied de page d'une page ou d'une section. Il contient généralement
des informations comme les coordonnées, les liens vers la politique de confidentialité,
etc.
Exemple :
<footer>
<p>© 2024 Mon Site Web</p>
<ul>
<li><a href="#privacy">Politique de confidentialité</a></li>
<li><a href="#terms">Conditions d'utilisation</a></li>
</ul>
</footer>
<aside>: Utilisé pour un contenu accessoire, souvent placé sur le côté de la page. Cela
peut inclure des informations complémentaires, des annonces ou des liens liés au
contenu principal.
Exemple :
<aside>
<h3>Actualités</h3>
<p>Dernière mise à jour de notre site...</p>
</aside>
<main> : Définie le contenu principal du document. Il contient le contenu central, en
dehors des éléments de navigation, de l'en-tête et du pied de page.
Exemple :
<main>
<h2>Contenu principal de la page</h2>
<p>Voici le contenu principal de mon site...</p>
</main>
<mark> : Sert à marquer du texte important, souvent pour le surligner (utilisé dans les
moteurs de recherche).
Exemple :
<p>C'est un texte avec un mot <mark>important</mark> que vous devez lire.</p>
<time> : Utilisé pour représenter des dates et des heures.
Exemple :
<time datetime="2024-11-23">23 novembre 2024</time>
16
2) Balises Non-Sémantiques :
Les balises non-sémantiques (ou balises génériques) ne portent aucune signification explicite sur
le contenu qu'elles contiennent. Elles sont principalement utilisées pour des raisons de mise en
page ou de structure, mais elles ne donnent pas d'informations sur la nature du contenu.
Avantages des balises non-sémantiques :
Structure et mise en page : Elles permettent de créer la structure de la page sans avoir
besoin de donner une signification sémantique précise.
Flexibilité : Elles sont souvent utilisées pour appliquer des styles CSS sans modifier la
sémantique du contenu.
Exemples de balises non-sémantiques :
<div> : Une balise générique utilisée pour regrouper des éléments sans signification
sémantique. Elle est principalement utilisée pour la mise en page.
Exemple :
<div class="header-container">
<h1>Mon titre</h1>
<p>Une introduction à mon site...</p>
</div>
<span> : Une balise générique en ligne, utilisée pour appliquer des styles ou sélectionner
des parties de texte sans changer la structure du contenu.
Exemple :
<p>Le texte <span class="highlight">important</span> est ici.</p>
<b> : Utilisé pour rendre le texte en gras, mais sans signification sémantique.
Exemple :
<p>C'est un texte en <b>gras</b> mais sans signification importante.</p>
<i> : Utilisé pour rendre le texte en italique, sans signification sémantique.
Exemple :
<p>C'est un texte en <i>italique</i> sans signification particulière.</p>
<br> : Permet de forcer un saut de ligne. Elle est souvent utilisée dans les paragraphes ou
les formulaires.
17
Exemple :
<p>Bonjour<br>Comment ça va ?</p>
<hr> : Représente une ligne horizontale. Elle est généralement utilisée pour séparer des
sections de contenu visuellement, sans signification sémantique spécifique.
Exemple :
<p>Texte avant la séparation</p>
<hr>
<p>Texte après la séparation</p>
Comparaison entre balises sémantiques et non-sémantiques :
Type de balise Exemple Utilisation principale Avantages
<header>,
Décrire le contenu de manière Accessibilité améliorée,
Balises <article>,
explicite, améliorer l'accessibilité, SEO optimisé, meilleure
sémantiques <footer>,
le SEO, la lisibilité du code organisation du contenu
<main>
Structuration de la mise en page, Flexibilité pour les mises en
Balises non- <div>, <span>,
organisation du contenu sans page, mais manque de
sémantiques <br>, <hr>
apporter de signification signification
18
V. Conclusion
HTML (HyperText Markup Language) est le fondement de la structure d'une page web. Il offre
une variété de balises permettant de structurer, organiser et afficher du contenu de manière
logique et accessible. À travers les éléments explorés précédemment, voici un résumé des
concepts essentiels :
Les Balises de Structure :
Balises Sémantiques : Ces balises, comme <header>, <footer>, <article>, et
<section>, permettent de donner un sens clair au contenu de la page, facilitant
ainsi l'accessibilité, le référencement et la lisibilité du code. Elles apportent une
signification explicite aux différentes sections de la page, rendant celle-ci plus
compréhensible pour les moteurs de recherche et les utilisateurs.
Balises Non-Sémantiques : Les balises comme <div> et <span> sont utilisées pour
la mise en page et le style, mais elles n'ajoutent pas de signification sémantique.
Elles sont flexibles et permettent de structurer le contenu visuellement, mais elles
ne décrivent pas le rôle ou la nature du contenu.
Les Balises Multimédia :
Les balises comme <img>, <audio>, et <video> permettent d'incorporer des
éléments visuels et interactifs dans la page, enrichissant ainsi l'expérience
utilisateur. Ces balises rendent les pages web plus dynamiques, tout en offrant des
fonctionnalités de contrôle comme la lecture, la pause, et le volume.
Les Balises de Table et de Formulaire :
Les Tables : Les balises <table>, <tr>, <td>, et <th> sont utilisées pour afficher des
données tabulaires. Elles permettent d'organiser les informations sous forme de
lignes et de colonnes, offrant ainsi une présentation claire et structurée.
Les Formulaires : Les balises <form>, <input>, <textarea>, <select>, et <button>
permettent de recueillir des données auprès des utilisateurs. Elles sont essentielles
pour interagir avec les visiteurs et les clients sur un site web.
Les Balises de Contenu de Texte :
Les balises comme <h1>, <p>, <strong>, et <em> sont utilisées pour formater le
texte et organiser le contenu. Elles permettent de définir des titres, des
paragraphes, des mises en gras, et des mises en italique, assurant ainsi une
hiérarchie claire et un contenu bien structuré.
19
L'Importance de la Sémantique dans le Code HTML :
L'utilisation des balises sémantiques dans HTML est primordiale pour améliorer
l'accessibilité, optimiser le SEO, et rendre le contenu compréhensible pour les
lecteurs d'écran et autres technologies d'assistance.
les balises non-sémantiques comme <div> et <span> soient importantes pour la
mise en page, il est recommandé de privilégier l'utilisation de balises sémantiques
chaque fois que cela est possible.
En résumé, HTML permet de structurer une page de manière logique et hiérarchique, de
rendre le contenu interactif et multimédia, et d'assurer une bonne accessibilité et un bon
référencement. La combinaison de balises sémantiques et non-sémantiques dans une page web
crée un code propre, compréhensible et performant, ce qui est crucial pour offrir une
expérience utilisateur optimale.
20