Ads by ProfitSence
Close

HTML <article> Tag

Last Updated on dimanche 9 oct. 2022

article html

L’élément d’article est l’occasion idéale pour le développeur d’inclure un élément de contenu qui sera séparé du reste du contenu.

Définition et utilisation

La <article> balise spécifie un contenu indépendant et autonome. Il peut s’agir d’un message sur les réseaux sociaux, d’un commentaire d’utilisateur, d’un article de presse ou même d’un article de blog.

Trois articles avec un contenu indépendant et autonome.

			
					<article>
  <a href="/html-section-tag">
    <h2>HTML <section> Tag</h2>
    <div>
      <time> 13 mai 2022</time>
      <div>HTML</div>
    </div>
  </a>
</article>

<article>
  <a href="/html-lang">
    <h2>HTML lang Attribute</h2>
    <div>
      <time> 12 mai 2022</time>
      <div>HTML</div>
    </div>
  </a>
</article>

<article>
  <a href="/html-audio-tag">
    <h2>HTML Audio Tag</h2>
    <div>
      <time> 11 mai 2022</time>
      <div>HTML</div>
    </div>
  </a>
</article>

			
	

html article

Remarque : <article> l’élément ne s’affiche pas comme quelque chose de spécial dans un navigateur.

Il est important de savoir que si nous avons un article avec un contenu long, nous pouvons utiliser des sections à l’intérieur de l’élément d’article pour casser logiquement le contenu.

			
					<!--article démarrer-->

<article>
  <h1>Salut tout le monde</h1>
  <section>
    <h2>Bonjour de California</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste?
    </p>
  </section>
  <section>
    <h2>Bonjour de London</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste?
    </p>
  </section>
  <section>
    <h2>Bonjour de Austria</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste?
    </p>
  </section>
</article>

<!--article fin-->

			
	

balise article

Comme vous pouvez le voir dans l’exemple ci-dessus, l’élément article peut avoir de nombreux éléments de section.

Prise en charge du navigateur

Les chiffres du tableau spécifient la première version du navigateur qui prend entièrement en charge l’élément.

Élément Chrome Edge Mozilla Safari Opera
<article> 6.0 9.0 4.0 5.0 11.1

Notez à l’esprit que si le contenu est autonome, préférez utiliser la <article> balise ''. Vous pouvez utiliser CSS pour styliser <article> l’élément.

Paramètres CSS par défaut

La plupart des navigateurs affichent <article> l’élément '' avec les valeurs par défaut suivantes.

			
					article {
  display: block;
}

			
	
article
article css
balise article html
html article section
html section article