Scribd
Importer
7 vues2 pages

Structuration Sémantique HTML5

Le document présente un exercice pratique sur la structuration sémantique d'une page HTML5 en utilisant des balises appropriées. Il inclut un code HTML complet avec des sections pour l'en-tête, le contenu principal, une barre latérale et un pied de page. L'objectif est d'améliorer la lisibilité et l'organisation du contenu web.

Transféré par

gomgnimbouwesse
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd
7 vues2 pages

Structuration Sémantique HTML5

Le document présente un exercice pratique sur la structuration sémantique d'une page HTML5 en utilisant des balises appropriées. Il inclut un code HTML complet avec des sections pour l'en-tête, le contenu principal, une barre latérale et un pied de page. L'objectif est d'améliorer la lisibilité et l'organisation du contenu web.

Transféré par

gomgnimbouwesse
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd

Exercice Pratique 1 – Structuration sémantique d’une page HTML5

Objectif : Apprendre à organiser une page web en utilisant les balises sémantiques HTML5
(au lieu d’utiliser uniquement des <div>).

Code HTML5 complet :


<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercice Structuration Sémantique</title>
</head>
<body>
<!-- En-tête -->
<header>
<h1>Mon Site Web</h1>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>

<!-- Contenu principal -->


<main>
<!-- Section des articles -->
<section>
<article data-article-id="1">
<h2>Article 1 : Introduction à HTML5</h2>
<p>HTML5 apporte de nouvelles balises sémantiques qui facilitent la structuration
du contenu.</p>
</article>

<article data-article-id="2">
<h2>Article 2 : Utilisation des balises</h2>
<p>Les balises comme <code>&lt;header&gt;</code>, <code>&lt;main&gt;</code>
et <code>&lt;footer&gt;</code>
rendent le code plus lisible.</p>
</article>
</section>
<!-- Barre latérale -->
<aside>
<h3>Articles Populaires</h3>
<ul>
<li><a href="#">Introduction à HTML5</a></li>
<li><a href="#">Les balises sémantiques</a></li>
<li><a href="#">Structurer une page web</a></li>
</ul>
</aside>
</main>

<!-- Pied de page -->


<footer>
<p>&copy; 2025 - Mon Site Web. Tous droits réservés.</p>
</footer>
</body>
</html>

Vous aimerez peut-être aussi