1. MDN Web Docs
  2. Règles d'écriture
  3. Structures des documents
  4. Types de pages
  5. Modèle de page d'élément HTML

Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

Modèle de page d'élément HTML

Note : Supprimez cette note explicative avant de publier.

Page de garde :

Les métadonnées en haut de la page sont utilisées pour définir les « métadonnées de la page ». Les valeurs doivent être mises à jour de manière appropriée pour l'attribut particulier.

md
---
title: "<NameOfTheElement> : élément NomDeLélément"
slug: Web/HTML/Reference/Elements/NameOfTheElement
page-type: html-element
status:
  - deprecated
  - experimental
  - non-standard
browser-compat: html.elements.NameOfTheElement
sidebar: htmlsidebar
---
title

Titre affiché en haut de la page. Format : '<NameOfTheElement>: Description de l'objectif de l'élément'. Par exemple, l'élément <video> a un titre de : « <video>: L'élément d'intégration vidéo ».

slug

La fin du chemin de l'URL après https://developer.mozilla.org/fr/docs/. C'est formaté comme Web/HTML/Reference/Elements/NameOfTheElement, où le nom de l'élément est en minuscules. Par exemple, l'élément <video> a un slug de Web/HTML/Reference/Elements/video.

page-type (pages anglaises uniquement)

Toujours html-element.

status (pages anglaises uniquement)

Indique l'état de cette fonctionnalité. Un tableau qui peut contenir une ou plusieurs des valeurs suivantes : experimental, deprecated, non-standard. Cette clé ne doit pas être définie manuellement : elle est définie automatiquement en fonction des valeurs dans les données de compatibilité des navigateurs pour la fonctionnalité. Voir « Comment les statuts des fonctionnalités sont ajoutés ou mis à jour ».

browser-compat (pages anglaises uniquement)

Remplacez la valeur de l'espace réservé html.elements.NameOfTheElement par la chaîne de requête pour l'élément dans le dépôt de données de compatibilité des navigateurs (angl.). La chaîne d'outils utilise automatiquement la clé pour remplir les sections de compatibilité et de spécifications (en remplaçant les macros {{Compat}} et {{Specifications}}). Notez que vous devez d'abord créer ou mettre à jour une entrée pour l'élément dans notre dépôt de données de compatibilité des navigateurs (angl.), et l'entrée doit inclure des informations sur la spécification. Consultez notre guide sur la façon de procéder.

Conservez htmlsidebar (toutes les pages sous /web/html/ utilisent cette barre latérale). Voir Structures de page : Barres latérales pour plus de détails.

Macros en haut de page

Un certain nombre de macros apparaissent en haut de la section de contenu (immédiatement sous les métadonnées de la page). Ces macros sont ajoutées automatiquement par la chaîne d'outils (il n'est pas nécessaire de les ajouter/supprimer) :

  • {{SeeCompatTable}} — cela génère une bannière Ceci est une technologie expérimentale qui indique que la technologie est expérimentale. Si elle est expérimentale et que la technologie est cachée derrière une préférence dans Firefox, vous devez également remplir une entrée pour elle dans la page Fonctionnalités expérimentales dans Firefox.
  • {{Deprecated_Header}} — cela génère une bannière Obsolète qui indique que l'utilisation de la technologie est découragée.
  • {{Non-standard_Header}} — cela génère une bannière Non standard qui indique que la fonctionnalité ne fait partie d'aucune spécification.

Voir « Comment les statuts des fonctionnalités sont ajoutés ou mis à jour » pour plus d'information.

Des exemples des bannières Expérimentale, Obsolète et Non standard sont présentés après ce bloc de notes.

N'oubliez pas de supprimer cette note explicative avant de publier.

Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.

Obsolète: Cette fonctionnalité n'est plus recommandée. Même si certains navigateurs la prennent encore en charge, elle a peut-être déjà été supprimée des standards du web, est en passe d'être supprimée ou n'est conservée qu'à des fins de compatibilité. Évitez de l'utiliser et mettez à jour le code existant si possible ; consultez le tableau de compatibilité au bas de cette page pour vous aider à prendre votre décision. Sachez que cette fonctionnalité peut cesser de fonctionner à tout moment.

Non standard: Cette fonctionnalité n'est pas standardisée. Nous déconseillons d'utiliser des fonctionnalités non standard en production, car leur prise en charge par les navigateurs est limitée, et elles peuvent être modifiées ou supprimées. Toutefois, elles peuvent constituer une alternative appropriée dans certains cas où aucune option standard n'existe.

L'élément HTML <insert_the_element_name> fait (insérer un paragraphe résumant le nom de l'élément et ce qu'il fait, idéalement une ou deux phrases courtes).

Exemple interactif

Cette section est générée par la macro InteractiveExample. Cela inclut le titre de la section « Exemple interactif » et l'éditeur de code. Voir la section Exemples interactifs de nos Règles d'écritures pour plus d'informations.

Informations supplémentaires — à ce stade, incluez quelques paragraphes supplémentaires expliquant les points les plus importants à connaître sur l'utilisation de l'élément et ses principales fonctionnalités. Il est utile d'expliquer brièvement ce qui se passe dans l'exemple interactif si ce n'est pas immédiatement évident. Vous pouvez également expliquer les points clés sur la façon dont cet élément interagit avec les fonctionnalités JavaScript ou CSS importantes. Pas trop de détails — vous ne voulez pas répéter la documentation sur plusieurs pages — mais un point clé avec un lien vers la page de cette fonctionnalité est utile. Encore une fois, voir la page <video> pour un exemple.

Attributs

Cet élément inclut les attributs universels.

attribute1

Inclure ici la description de ce que fait l'attribut. Inclure un terme et une définition pour chaque attribut. Si l'attribut n'est pas expérimental/obsolète, supprimez les appels de macro pertinents.

attribute2

etc.

Évènements

Incluez un tableau des évènements déclenchés par ce type d'élément, le cas échéant.

Nom de l'évènement Déclenché lorsque
évènement 1 Expliquez brièvement quand il est déclenché
évènement 2 Expliquez brièvement quand il est déclenché
etc.

Accessibilité

Signalez tout problème potentiel d'accessibilité lié à l'utilisation de cet élément et comment y remédier. Supprimez cette section s'il n'y a aucun problème à signaler.

Exemples

Notez que nous utilisons le pluriel « Exemples » même si la page ne contient qu'un seul exemple.

Un titre descriptif

Chaque exemple doit avoir un titre H3 nommant l'exemple. Le titre doit être descriptif de ce que fait l'exemple. Par exemple, « Un exemple simple » ne dit rien sur l'exemple et n'est donc pas un bon titre. Le titre doit être concis. Pour une description plus longue, utilisez le paragraphe après le titre.

Consultez notre guide sur la façon d'ajouter des exemples de code pour plus d'informations.

Note : Parfois, vous pouvez vouloir créer un lien vers des exemples donnés sur une autre page.

Scénario 1 : Si vous avez des exemples sur cette page et d'autres exemples sur une autre page :

Incluez un titre H3 (###) pour chaque exemple sur cette page, puis un dernier titre H3 (###) avec le texte « Plus d'exemples », sous lequel vous pouvez créer des liens vers les exemples sur d'autres pages. Par exemple :

md
## Exemples

### Utiliser l'API fetch

Exemple de Fetch

### Plus d'exemples

Liens vers plus d'exemples sur d'autres pages

Scénario 2 : Si vous n'avez des exemples que sur une autre page et aucun sur cette page :

N'ajoutez pas de titres H3 ; ajoutez simplement les liens directement sous le titre H2 « Exemples ». Par exemple :

md
## Exemples

Pour des exemples de cette API, voir [la page sur `fetch()`](https://example.org/).

Résumé technique

Catégories de contenu Remplissez une liste des catégories de contenu auxquelles l'élément HTML appartient.
Contenu autorisé Quel contenu l'élément est-il autorisé à contenir ?
Omission de balise La balise de fin peut-elle être omise, ou doit-elle être présente ? Doit-elle être omise ?
Parents autorisés Quels éléments parents l'élément peut-il avoir ? Par exemple « Tout élément qui accepte contenu de flux. »
Rôles ARIA autorisés Remplissez une liste des rôles ARIA qui peuvent être définis sur l'élément ; par exemple directory.
Interface DOM Quelle interface DOM représente l'élément en JavaScript ? Par exemple HTMLOListElement dans le cas de ol.

Spécifications

{{Specifications}}

Pour utiliser cette macro, supprimez les accents inversés et l'antislash dans le fichier markdown.

Compatibilité des navigateurs

{{Compat}}

Pour utiliser cette macro, supprimez les accents inversés et l'antislash dans le fichier markdown.

Voir aussi

Incluez des liens vers des pages de référence et des guides liés à l'API actuelle. Pour plus de directives, consultez la section Voir aussi dans le Guide de style d'écriture.

  • lien1
  • lien2
  • lien_externe (année)

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu