Sections et articles
Fait partie de la section Fundamentals du Journey HTML de Coddy. Leçon 28 sur 60.
En HTML, les balises <section> et <article> sont utilisées pour organiser le contenu en parties logiques.
La balise <section> définit une section dans un document, comme des chapitres, des en-têtes, des pieds de page ou toute autre section du document. C’est une manière de regrouper des contenus associés. Par exemple, vous pouvez utiliser <section> pour diviser une page en une introduction, du contenu et des coordonnées.
Voici comment utiliser la balise <section> :
<section>
<h2>Section Heading</h2>
<p>Section content goes here.</p>
</section>La balise <article> définit un contenu indépendant et autonome. Elle doit avoir un sens en elle-même, et il doit être possible de la lire indépendamment du reste du site web. Voici quelques exemples d’utilisation d’un élément <article> : une publication sur un forum, une entrée de blog, un article d’actualité ou un commentaire.
Voici comment utiliser la balise <article> :
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
Défi
FacileCréez un document HTML qui utilise les balises <section> et <article> pour structurer une page web. Incluez les sections suivantes :
- Une section
<main>pour contenir le contenu principal de la page. - À l’intérieur de
<main>, créez une<section>avec un titre (<h2>) qui affiche "Upcoming Events". - À l’intérieur de la
<section>, créez deux éléments<article>. - Chaque élément
<article>doit comporter un titre (<h3>) et un paragraphe (<p>) contenant du texte factice. Utilisez "Event 1" et "Event 2" pour les titres, et "Event 1 details..." et "Event 2 details..." pour les paragraphes.
Essayez vous-même
<!DOCTYPE html>
<html>
<body>
<!-- Écrivez le code ici -->
</body>
</html>
Testez-vousCette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.
Toutes les leçons de Fundamentals
1Les bases du HTML
Qu'est-ce que le HTML ?Structure de base du HTMLBalises et élémentsImbrication et fermeture des balisesCommentaires en HTML7Page de profil personnel
Présentation du projetSection d'en-tête
Photo de profilSection À propos de moiLiens sociaux2Texte et mise en forme
TitresParagraphesSauts de ligneTexte en gras et italiqueGras et italique (suite)Récapitulatif - Mise en forme8Formulaires et champs de saisie, partie 1
Bases des formulairesChamps de texteAttributs des champsChamp de mot de passeLibellés pour les champsRécapitulatif - Formulaire de base11Page d'inscription à un événement
Aperçu du projetSection d'en-têteSection des détails de l'événementFormulaire d'inscriptionSection de pied de page3Travailler avec les listes
Liste non ordonnéeListe ordonnéeListes imbriquéesRécapitulatif - Les listes6Mise en page
DivisionsSpans en ligneBalises sémantiquesSections et articlesRécapitulatif - Mise en pageEntraînez-vous par vous-même : Playground Web