Balises de conteneur HTML

Découvrez comment utiliser les balises de conteneur en HTML et découvrez laquelle choisir

Balises de conteneur

HTML fournit un ensemble de balises de conteneur. Ces balises peuvent contenir un ensemble non spécifié d'autres balises.

Nous avons:

  • article
  • section
  • div

et il peut être déroutant de comprendre la différence entre eux.

Voyons quand utiliser chacun d'eux.

article

La balise article identifie unchosequi peut être indépendant des autresdes chosesdans une page.

Par exemple, une liste d'articles de blog sur la page d'accueil.

Ou une liste de liens.

<div>
	<article>
		<h2>A blog post</h2>
		<a ...>Read more</a>
	</article>
	<article>
		<h2>Another blog post</h2>
		<a ...>Read more</a>
	</article>
</div>

Nous ne sommes pas limités aux listes: un article peut être l'élément principal d'une page.

<article>
	<h2>A blog post</h2>
	<p>Here is the content...</p>
</article>

À l'intérieur d'unarticletag nous devrions avoir un titre (h1-h6) et

section

Représente une section d'un document. Chaque section a une balise d'en-tête (h1-h6), puis la sectioncorps.

Exemple:

<section>
	<h2>A section of the page</h2>
	<p>...</p>
	<img ... />
</section>

Il est utile de diviser un long article en différentssections.

Ne doit pas être utilisé comme élément de conteneur générique.divest fait pour cela.

div

divest l'élément conteneur générique:

<div>
	...
</div>

Vous ajoutez souvent unclassouidattribut à cet élément, pour lui permettre d'être stylisé à l'aide de CSS.

Nous utilisonsdivdans n'importe quel endroit où nous avons besoin d'un conteneur mais les balises existantes ne sont pas adaptées.

Cette balise est utilisée pour créer le balisage qui définit la navigation de page. À cela, nous ajoutons généralement unulouolliste:

<nav>
	<ol>
		<li><a href="/">Home</a></li>
		<li><a href="/blog">Blog</a></li>
	</ol>
</nav>

aside

LeasideLa balise est utilisée pour ajouter un élément de contenu lié au contenu principal.

Une boîte où ajouter un devis, par exemple. Ou une barre latérale.

Exemple:

<div>
  <p>some text..</p>
  <aside>
    <p>A quote..</p>
  </aside>
  <p>other text...</p>
</div>

Utilisantasideest un signal que les choses qu'il contient ne font pas partie du flux régulier de la section dans laquelle il vit.

LeheaderLa balise représente une partie de la page qui est l'introduction. Il peut par exemple contenir une ou plusieurs balises d'en-tête (h1-h6), le slogan de l'article, une image.

<article>
  <header>
	  <h1>Article title</h1>
  </header>
  ...
</article>

main

LemainLa balise représente la partie principale d'une page:

<body>
  ....
  <main>
    <p>....</p>
  </main>
</body>

LefooterLa balise permet de déterminer le pied de page d'un article, ou le pied de page de la page:

<article>
 ....
	<footer>
    <p>Footer notes..</p>
  </footer>
</article>

Téléchargez mon gratuitManuel HTML


Plus de tutoriels html: