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, telle que des chapitres, des en-têtes, des pieds de page ou toute autre partie du document. C'est un moyen de regrouper du contenu connexe. Par exemple, vous pourriez utiliser <section> pour diviser une page en une introduction, du contenu et des informations de contact.
Voici comment vous pouvez utiliser la balise <section> :
<section>
<h2>Section Heading</h2>
<p>Section content goes here.</p>
</section>La balise <article> spécifie un contenu indépendant et autonome. Il doit avoir un sens en soi et il doit être possible de le lire indépendamment du reste du site web. Exemples d'endroits où un élément <article> peut être utilisé : un message de forum, un article de blog, une actualité ou un commentaire.
Voici comment vous pouvez 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 indique "Upcoming Events". - À l'intérieur de la
<section>, créez deux éléments<article>. - Chaque
<article>doit avoir un titre (<h3>) et un paragraphe (<p>) avec du texte fictif. Utilisez "Event 1" et "Event 2" pour les titres et "Event 1 details..." et "Event 2 details..." pour les paragraphes.
Aide-mémoire
La balise <section> définit une section dans un document pour regrouper du contenu connexe :
<section>
<h2>Section Heading</h2>
<p>Section content goes here.</p>
</section>La balise <article> spécifie un contenu indépendant et autonome qui doit avoir du sens par lui-même :
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>Essayez vous-même
<!DOCTYPE html>
<html>
<body>
<!-- Écrivez votre 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 page