HTML Article Tag a été introduit dans HTML5 en tant que nouvelle édition. Plus précisément, ils représentent un article. Il s'agit de données indépendantes et probablement utilisées dans les messages de forum, les publications de magazines, les blogs et les commentaires activés par les utilisateurs. Il est représenté par

étiqueter. De plus, définir un élément élégant sur une page Web est similaire à la définition

élément. Cette balise d'article prend en charge tous les types de navigateurs : Google Chrome, Opera, Internet Explorer et Edge. Ils ne ressemblent pas à une balise de section de la section générale mais agissent comme une partie de contenu autonome.

Syntaxe :

Voyons ici la syntaxe immédiate de ces éléments de balise.

<article>
<h1>…</h1>
</article>

Copier après la connexion

La structure suit la balise de début. La section précédente suivante contient

balise ou

qui forme un sous-titre, donne des informations sémantiques exactes sur le contenu et fournit des informations significatives beaucoup plus riches et plus appropriées. Comme d'autres balises, cette balise d'article prend également en charge les attributs HTML tels que les attributs d'événement et les attributs globaux pour leur classe appropriée.

Exemple de

étiquette :

<article>
<h1>Introduction to  CSS demo</h1>
<p>CSS is a cascading Style Sheet helps to make a web page visually colored</p>
</article>

Copier après la connexion

Comment fonctionne la balise d'article en HTML ?

Cette section abordera une simple balise d'article (contenu autonome dans un document) et verra comment elle fonctionne sur une page Web. HTML 5 introduit un nouveau contenu sémantique pour enrichir le contenu des moteurs de recherche. Ils prennent en charge les attributs globaux et d'événement pour le contenu. Le contenu de la balise est considéré comme un document indépendant de l’autre partie du contenu de la page unique. Ils peuvent définir ou démontrer le nom d’un article sur la page, les informations sur l’auteur et la date de publication. Cet

La balise

peut être utilisée comme un élément unique et plusieurs balises

éléments.

Un document ayant un seul élément article explique le contenu principal du document. Il a un contenu individuel unique, alors que, dans le cas de plusieurs balises, une page a des contenus variés ; d'une autre manière, ils sont équivalents

éléments. L'objectif principal de l'

est d'aider le code HTML à nettoyer le contenu en réduisant le travail du

élément.

Exemples d'implémentation de balise HTML

Vous trouverez ci-dessous les exemples d'implémentation de la balise HTML :

Exemple n°1

Exemple utilisant un seul

étiquette.

Code :

<!DOCTYPE html>
<html>
<head>
<title>HTML Article Tag demo</title>  </head>
<body>
<article>
<h2>python</h2>
<p>Python is a new programming language</p>
</article>
</body>
</html>

Copier après la connexion

Sortie :

Balise d'article HTML

Exemple n°2

Un exemple illustre l'utilisation de l'attribut avec le style CSS. Il utilise CSS pour bien s'afficher dans le navigateur Web.

Code :

<!DOCTYPE html>
<head>
<title>Demo of article</title>
</head>
<body>
<article style="width: 200px; border: 1px solid black;
padding: 8px; border-radius: 8px;
margin:6px;">
<article>
<address>
Written by xxxxxx.<br>
refer me at: <br>
https://www.educba.com/ <br>
</address>
</article>

Copier après la connexion

Le résultat ci-dessous montre aux visiteurs la page Web avec l'adresse du lien.

Sortie :

Balise d'article HTML

Exemple #3

Un exemple démontrant comment afficher une date et une heure avec .

Code :

<!DOCTYPE html>
<head>
<title>Demo of article tag</title>
</head>
<body>
<article style="width: 200px; border: 1px solid black;
padding: 8px; border-radius: 8px; color :green;
margin:6px;">
<article class="blog_post">
<p>My first article post. Stay tuned</p>
<footer>
<p>
Displayed on <time datetime="2019-12-24 20:00"> Dec 23</time> by tutor
</p>
</footer>
</article>

Copier après la connexion

Sortie :

Balise d'article HTML

Exemple n°4

Exemple utilisant plusieurs articles. Le code ci-dessous utilise l'élément sémantique

pour spécifier l'en-tête le plus significatif dans le contenu HTML.

Code :

<style>
.JAN {
margin: 1;
padding: .2rem;
background-color: #D2691E;
font: 2rem 'Fira Sans', sans-serif;
}
.JAN > h1,
.day {
margin: .4rem;
padding: .2rem;
font-size: 1rem;
}
.day {
background: border-box no-repeat
gray;
}
.day > h2,
.day > p {
margin: .2rem;
font-size: 1rem;
}
</style>
<article class="JAN">
<h1>FEDERAL HOLIDAYS IN USA</h1>
<article class="day">
<h2>01 JAN 2020</h2>
<p>NEW YEAR DAY.</p>
<p> martin luther day </p>
</article>
<article class="day">
<h2>18 feb 2020</h2>
<p>Presidents day.</p>
</article>
<article class="day">
<h2>05 May 2020</h2>
<h2>27 May 2020</h2>
<p>mothers day.</p>
<p>memorial day.</p>
</article>
</article>

Copier après la connexion

Sortie :

Balise d'article HTML

Exemple #5

Nous verrons l'

la balise est réalisée avec plusieurs

balises. Vous trouverez ci-dessous quelques morceaux de code avec sortie.

Code :

<style>
.art {
margin: 5;
padding: .3rem;
background-color: #DC143C;
font: 1rem 'italic', sans-serif;
}
</style>
<article class="art">
<section id="aim">
<p>[Main Objective]</p>
</section>
<section id="main_concept">
<p>[Content text]</p>
</section>
<section id="link page">
<ul>
<li><a href="tt.html">first link page</a></li>
<li><a href="th.html">second link page</a></li>
</ul>
</section>
</article>

Copier après la connexion

Sortie :

Balise d'article HTML

Exemple #6

Code :

<article>
<header>
<h1>On this page</h1>
<p>Published on 15th DEC 2019</p>
</header>
<p>WELCOME</p>
<p> EXAMPLES TOPIC</p>
<p>ILLUSTRATION</p>
<section>
<h2>Related topics</h2>
<article>
<footer>
<p>published by Mark winston</p>
</footer>
<p>This was a great article</p>
</article>
<article>
<footer>
<p>Posted by: Casey Brock</p>
</footer>
<p>What do you think about the topics with the comments please</p>
</article>
</section>
</article>

Copier après la connexion

Voici un en-tête global qui contient les titres de pages Web de tout document ayant un contenu connexe. Vient ensuite le balise, qui renvoie au pied de page d'un site Web particulier et profite au référencement en fournissant les détails de l'entreprise dans la section du pied de page. Enfin, la véritable façon d'utiliser

la balise consiste à intégrer ou à regrouper le contenu associé d'une page ou, d'une autre manière ; Je peux dire qu'ils sont la structure de la section autonome.

Sortie :

Balise d'article HTML

Exemple #7

Balise d'article à l'aide de

étiquette.

Code :

<!DOCTYPE html>
<head>
<title>Demo of article tag</title>
</head>
<main>
<article>
<h1>Cloud computing Basics</h1>
<p>Used for data storage.</p>
<section>
<h2>Basic and syntax part</h2>
<p>With an example.</p>
</section>
<section>
<h2>Types of cloud computing services</h2>
<p>Private , public , hybrid</p>
</section>
</article>
</main>

Copier après la connexion

Sortie :

Balise d'article HTML

Fazit

Abschließend behandelt dieser Artikel mehrere Anleitungen zur Verwendung auf einer Webseite. Sie sind eine ausgezeichnete Wahl, um ein Dokument (das sie selbst wahrnehmen) oder einen Inhalt auf einer einzelnen Webseite unterzubringen, und sie sind bekanntermaßen ein perfektes semantisches Element unter HTML5. Da es sich um einen eigenständigen Kontext handelt, wurde es in HTML5 verwendet, da moderne Websites begonnen haben, dieses Tag voll auszunutzen, was vom Benutzer beim Posten von Inhalten wie Blogs und Zeitschriften gut belohnt wird.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：

html html5 HTML Tutorial HTML Properties HTML tags

source：php

Article précédent：Balise TextArea en HTML Article suivant：Balise de bouton HTML

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur