Cet article sur le HTML explique comment utiliser la balise <article> en présentant sa syntaxe d'utilsation et des exemples.
Description
La balise HTML <article> est utilisée pour définir un contenu autonome et indépendant dans un document HTML, une page Web, une application Web ou un site Web.
Le contenu de la balise d'article prend tout son sens. Il est indépendant et complet des autres contenus affichés sur la page. Cette balise est généralement utilisée sur les articles de forum, les articles de blog, les articles de presse, les commentaires, etc.
Syntaxe
En HTML, la syntaxe de la balise <article> est la suivante :
<body>
<article>
<h1>Titre de l'article</h1>
<p>Texte contenu dans l'article</p>
</article>
</body>
Attributs
Seuls les attributs globaux s'appliquent à la balise <article>. Aucun attribut n'est spécifique à la balise <article>.
Remarques
- L'élément HTML <article> est un élément HTML5 qui se doit trouver dans la balise <body>.
- La balise <article> peut être utilisée dans l'un des contextes suivants : message de forum, article de blog, article de magazine, article de journal, commentaire d'utilisateur ou élément de contenu indépendant.
- Pour les navigateurs IE (Internet Explorer) plus anciens que IE 9, utilisez HTML5shiv qui est une solution de contournement javascript pour fournir un support pour les nouveaux éléments HTML5 tels que : <header>, <main>, <article>, <section>, <aside>, <nav>, <footer>.
Compatibilité avec les navigateurs
La balise <article> est compatible avec les navigateurs suivants :
- Chrome 5+
- Android 2.2+ (Gecko 2.0+)
- Firefox 4.0+ (Gecko 2.0+)
- Firefox Mobile 4.0+ (Gecko 2.0+)
- Internet Explorer 9.0+ (IE 9.0+)
- IE Phone 9.0+ (IE 9.0+)
- Opera 11.10+ (en anglais)
- Opera Mobile 11.0+ (Gecko 2.0+)
- Safari 4.1+ (WebKit)
- Safari Mobile 5.0+ (iOs 4.2+)
Exemples
Dans cette section, nous allons voir quelques exemples d'utilisation de la balise <article> en HTML5 et en HTML 4.01 Transitional.
Document HTML5
Si vous avez créé une nouvelle page Web en HTML5, votre balise <article> pourrait ressembler à ceci :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 - Balise <article></title>
</head>
<body>
<article>
<h1>Titre de l'article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</body>
</html>
Dans cet exemple de document HTML5, nous avons créé une balise <article> qui affiche 2 balises : la balise <h1> qui représente le titre de l'article et la balise <p> qui contient le contenu de l'article. Le résultat de ce bout de code se présente comme dans l'image ci-dessous :
Document HTML 4.01 Transitional
Vous ne pouvez pas utiliser la balise <article> en HTML 4.01 Transitional, car il s'agit d'un élément spécifique à HTML5.