Sections et articles
Fait partie de la section Fondamentaux du Journey HTML de Coddy. Leçon 28 sur 60.
En HTML, les balises <section> et <article> servent à organiser le contenu en parties logiques.
La balise <section> définit une section dans un document, comme un chapitre ou une autre partie du document consacrée à un sujet, généralement avec son propre titre. Elle permet de regrouper des contenus associés. Par exemple, tu peux 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> spécifie un contenu indépendant et autonome. Il doit avoir du sens à lui seul et pouvoir être lu indépendamment du reste du site Web. Voici des exemples d’utilisation d’un élément <article> : une publication sur un forum, un billet 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ée un document HTML qui utilise les balises <section> et <article> pour structurer une page Web. Inclue les sections suivantes :
- Une section
<main>pour contenir le contenu principal de la page. - Dans
<main>, crée une<section>avec un titre (<h2>) qui indique "Upcoming Events". - Dans la
<section>, crée deux éléments<article>. - Chaque élément
<article>doit avoir un titre (<h3>) et un paragraphe (<p>) contenant du texte fictif. Utilise "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>Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.
Toutes les leçons de Fondamentaux
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ête2Texte 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ête3Travailler 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