Balises sémantiques
Définition
Une balise sémantique est une balise qui donne une indication sur le contenu qu'elle entoure.
Les balises <div> et <span> ne sont pas des balises sémantiques car
elles ne donnent aucune indication sur leurs contenus.
Il existe deux catégories de balises sémantiques :
- Les balises de structuration du contenu comme
<h1>,<p>,<strong>,<em>, etc. - Les balises de structuration de page, ajoutées en HTML 5
Balises de structuration de page
Le HTML 5 définit plusieurs balises pour structrer une page web. La figure suivante propose une structuration visuelle de la page en utilisant des balises sémantiques.
L'entête (<header>)
L'entête de la page (ou d'une section) est définie à l'aide de la balise <header>...</header>. Elle regroupe typiquement le logo, le titre du site ou de l'article, et forme le binôme structurel avec le pied de page (<footer>).
Le menu de navigation
Une page web présente souvent des liens vers les autres pages ou parties d'un site web. Ces liens sont
définis à l'intérieur de la balise <nav>...</nav>.
Le contenu principal
La balise <main>...</main> inclue le contenu principal d'une page web.
Cette balise peut contenir les balises <article>...</article> et
<section>...</section>. Ainsi, le contenu est découpé en articles
qui peuvent être découpés en sections.
Contenu annexe
Certaines pages proposent un encart de contenu non relié directement au contenu principal de la page à l'aide
de la balise <aside>...</aside>.
Pied de page
Le pied de page est définit à l'aide de la balise <footer>...</footer>.
Exemple
Résultat désiré
Code HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Balises sémantiques</title>
</head>
<body>
<header>Entête</header>
<nav>Barre de navigation</nav>
<main>
<h1>Contenu principal</h1>
<section>
<h2>Section</h2>
</section>
</main>
<aside>
<h3>En relation</h3>
</aside>
<footer>Pied de page</footer>
</body>
</html>Code CSS
body {
width: 800px;
margin: 20px auto;
background-color: #a9a9a9;
display: flex;
flex-wrap: wrap;
}
header {
width: 100%; height: 3em;
line-height: 3em;
color: #fff;
font-size: 2em;
font-family: cursive;
text-align: center;
border: #fff solid 1px;
margin: 0.15em 0;
position: relative;
}
nav {
background-color: #ff80ff;
text-align: center;
border: #fff solid 1px;
width: 100%; height: 3em;
margin: 0.15em 0;
line-height: 3em;
position: relative;
}
main {
background-color: #fff;
text-align: center;
border: #333 solid 1px;
width: 70%; height: 15em;
margin: 0.15em 0;
position: relative;
padding-top: 2em;
}
aside {
background-color: #ff80ff;
text-align: center;
border: #fff solid 1px;
width: calc(30% - 0.3em - 4px); height: 15em;
margin: 0.15em 0 0.15em 0.3em;
position: relative;
padding-top: 2em;
}
footer {
background-color: #fff;
text-align: center;
border: #333 solid 1px;
width: 100%; height: 3em;
line-height: 3em;
margin: 0.15em 0;
position: relative;
}Balises sémantiques de contenu et médias
En plus de la structure globale de la page, HTML5 propose des balises pour enrichir sémantiquement le contenu textuel et multimédia :
La balise <mark> (Surlignage)
Elle permet de mettre en valeur du texte particulièrement pertinent dans un contexte donné (surlignage jaune par défaut).
Exemple de rendu : N'oubliez pas d'enregistrer votre travail avant de quitter.
<p>N'oubliez pas d'<mark>enregistrer votre travail</mark> avant de quitter.</p>Les balises <details> et <summary> (Bloc dépliable)
La balise <details> crée un widget interactif que l'utilisateur peut ouvrir ou fermer. La balise <summary> définit son intitulé visible.
L'attribut booléen open permet d'afficher le bloc ouvert par défaut.
En savoir plus sur le HTML5 (cliquez pour replier)
HTML5 introduit de nouvelles balises sémantiques facilitant l'accessibilité et le référencement.
<details open>
<summary>En savoir plus sur le HTML5</summary>
<p>HTML5 introduit de nouvelles balises sémantiques facilitant l'accessibilité et le référencement.</p>
</details>La balise <audio> (Médias audio)
La balise <audio> permet d'intégrer un extrait sonore dans une page web. L'attribut controls ajoute la barre de lecture (lecture/pause, volume, durée). On utilise la balise <source> imbriquée pour spécifier les fichiers et formats (ex. MP3, OGG).
<audio controls src="sample.mp3">
<source src="sample.mp3" type="audio/mpeg">
Votre navigateur ne supporte pas la balise audio.
</audio>Application 1
Utiliser les balises sémantiques pour structurer le site web computers disponible en téléchargement à travers ce lien : Computers.
Les pages possèdent la structure suivante :
Utiliser une feuille de style liée. Les couleurs sont laissées au libre choix de l'élève.
Application 2
Télécharger le site Web Fruits universe à compléter à traver le lien : Fruits universe.
- Décompresser le fichier,
- Ouvrir le dossier à l'aide de Visual Studio Code,
- Ajouter le fichier style.css pour mettre en forme le site comme suit : cliquer sur l'image pour l'agrandir.
Le choix des couleurs et le style des polices sont laissés au libre choix de l'élève.