Programmation
Référence consultable pour les balises, éléments, attributs, régions de page, formulaires et libellés d'accessibilité.
51 résultats
Bases
Tag
<header>...</header>Un mot-clé de balisage enveloppé dans des chevrons qui indique au navigateur le type d'élément à créer.
Utilisez le nom de la balise lorsque la cible est un type d'élément large, tel que tous les boutons ou tous les liens.
<header>...</header>Modifiez le style de toutes les balises de bouton à l'intérieur de l'en-tête.
Bases
Element
<button>Menu</button>Un fragment complet de code HTML, généralement composé d'une balise de début, du contenu et d'une balise de fin.
Utilisez le terme "élément" lorsque vous faites référence à une partie visible de la page, comme un titre, une carte ou un bouton.
<button>Menu</button>Déplacer l'élément de sélection de la langue à côté du bouton du menu.
Bases
Attribute
<a href="/ko">Home</a>Informations supplémentaires écrites à l'intérieur d'une balise de début, telles que href, class, id, src ou aria-label.
Les attributs sont utiles lorsque la même étiquette apparaît de nombreuses fois, mais qu'une seule a une classe, un ID ou une étiquette spécifique.
<a href="/ko">Home</a>Ajouter un attribut "aria-label" au bouton de menu avec uniquement une icône.
Bases
Opening and closing tag
<section>Content</section>De nombreux éléments commencent par une balise d'ouverture et se terminent par une balise de fermeture correspondante.
Cela aide à expliquer où commence et se termine une section dans le balisage.
Une balise de fermeture manquante peut amener le navigateur à traiter le contenu ultérieur comme faisant partie du mauvais élément.
<section>Content</section>Vérifier que la section des cartes contient les balises d'ouverture et de fermeture correspondantes.
Document
DOCTYPE
<!doctype html>Une déclaration qui indique au navigateur d'afficher le document en tant que HTML moderne.
Il est généralement géré par le framework et rarement modifié lors du développement de composants.
<!doctype html>Ne modifiez pas le type de document ; modifiez uniquement le composant de la page.
Document
html
<html lang="ko">...</html>L'élément racine qui enveloppe tout le document HTML.
L'élément HTML est utilisé pour les paramètres globaux du document, tels que les attributs de langue ou de thème.
<html lang="ko">...</html>Définissez correctement l'attribut html lang pour chaque locale.
Document
head
<head><title>...</title></head>La zone du document pour les métadonnées, le titre, les icônes, les balises SEO et les scripts qui ne sont pas le contenu visible de la page.
Utilisez ce terme lorsque vous demandez de modifier le titre SEO, la description, l'URL canonique ou les métadonnées.
<head><title>...</title></head>Mettre à jour le titre des métadonnées pour la page des termes de structure HTML.
Document
body
<body>Visible page</body>La zone du document qui contient le contenu visible de la page.
La plupart des modifications de mise en page, d'en-tête, de menu et d'outils se produisent dans le corps du texte.
<body>Visible page</body>Conservez l'arrière-plan du corps cohérent en mode clair et en mode sombre.
Document
title
<title>AI Engineering Tools</title>Le titre de la page affiché dans l'onglet du navigateur et souvent utilisé par les moteurs de recherche.
Utilisez-le lorsque le titre H1 visible est correct, mais que le titre du navigateur ou le titre SEO doit être modifié.
<title>AI Engineering Tools</title>Rendez le titre du navigateur plus précis sans modifier l'en-tête de page visible.
Document
meta
<meta name="description" content="...">Métadonnées qui décrivent la page, la zone d'affichage, l'encodage ou les informations de prévisualisation des réseaux sociaux.
Les métadonnées affectent les aperçus et les extraits de recherche, et non le texte visible de la page.
<meta name="description" content="...">Mettre à jour la description meta pour mentionner les termes HTML recherchables.
Zones de page
header
<header>...</header>Une région sémantique pour le contenu introductif ou de navigation principale.
Utilisez un en-tête lorsque vous ciblez le titre du site, la navigation principale, le bouton de thème, le bouton de langue ou le bouton du menu.
<header>...</header>Déplacer l'élément de sélection de la langue dans les contrôles de l'en-tête, à côté du bouton du menu.
Zones de page
nav
<nav>...</nav>Une région sémantique pour les principaux liens de navigation.
Utilisez "nav" lors de la modification des liens de catégories, des groupes de menus ou de la navigation des pages.
<nav>...</nav>Regroupez les liens du menu dans nav par Convertisseur, Mathématiques et Programmation.
Zones de page
main
<main>...</main>La zone de contenu principale d'une page. Une page doit généralement avoir un seul élément principal.
Utilisez "main" pour distinguer le contenu de la page de l'en-tête, du pied de page ou du menu.
<main>...</main>Conservez le menu flottant au-dessus du contenu principal sans le faire disparaître.
Zones de page
section
<section>...</section>Un regroupement thématique de contenu connexe, généralement avec un titre.
Utilisez une section lorsque vous ciblez un grand bloc de page, tel qu'un héros, des outils ou du contenu de référence.
<section>...</section>Réduire le remplissage vertical de la section des outils sur les appareils mobiles.
Zones de page
article
<article>...</article>Un élément de contenu autonome, tel qu'une carte, un article, une entrée de référence ou un résultat.
Utilisez article lorsque chaque carte répétée a son propre titre et son propre corps.
<article>...</article>Rendez chaque article de terme plus compact sur un ordinateur de bureau.
Zones de page
aside
<aside>...</aside>Une zone pour le contenu de support relatif au contenu principal, souvent une barre latérale ou une note.
Utilisez aside lorsque vous demandez un panneau de filtre, une navigation latérale ou une note de support à déplacer.
<aside>...</aside>Déplacer la barre latérale située en dessous du contenu principal sur les appareils mobiles.
Zones de page
footer
<footer>...</footer>Une zone inférieure pour les liens juridiques, la navigation secondaire, les informations de contact ou le contenu de fin.
Utilisez un pied de page lorsque vous ciblez le bas de la page plutôt que le bas d'une section.
<footer>...</footer>Ajouter un petit groupe de liens juridiques au pied de page.
Contenu
Heading
<h1>Page title</h1>Un élément d'en-tête de h1 à h6 qui donne une structure au contenu de la page.
Utilisez le niveau de titre lorsque vous souhaitez modifier la hiérarchie, et non seulement la taille visuelle.
N'utilisez pas h1 ou h2 uniquement pour la taille ; utilisez CSS pour la taille visuelle et les titres pour la structure du document.
<h1>Page title</h1>Conservez le titre de la page en tant que h1 et utilisez h2 ou h3 pour les titres des cartes.
Contenu
p
<p>Description text.</p>Un paragraphe de texte.
Utilisez un paragraphe lorsque vous modifiez le texte descriptif du corps ou son espacement.
<p>Description text.</p>Raccourcir le paragraphe sous le titre principal.
Contenu
a
<a href="/ko/tools/math-prompt">Start</a>Un élément de lien qui navigue vers une autre page, un itinéraire, un fichier ou un emplacement.
Utilisez une ancre ou un lien lorsque l'élément se déplace vers un autre endroit au lieu d'effectuer une action sur place.
<a href="/ko/tools/math-prompt">Start</a>Modifiez le lien des outils de navigation pour qu'il fasse défiler la section des outils.
Contenu
List
<ul><li>Item</li></ul>Un groupe d'éléments connexes, soit non ordonnés avec ul, soit ordonnés avec ol.
Utilisez la liste lorsque vous demandez à ajouter, supprimer, réorganiser ou regrouper des éléments de texte répétés.
<ul><li>Item</li></ul>Regroupez les éléments du menu en listes de catégories.
Contenu
table
<table><tr><td>Cell</td></tr></table>Une grille structurée de lignes et de cellules pour les données tabulaires.
Utilisez un tableau lorsque le contenu est des données de ligne et de colonne réelles, et non simplement une grille visuelle de cartes.
<table><tr><td>Cell</td></tr></table>Utilisez un tableau pour les données de la table de vérité au lieu de simples blocs div.
Contenu
code / pre
<pre><code>npm run build</code></pre>le code marque le texte du code. L'élément <pre> conserve les sauts de ligne et l'espacement pour le code multiligne.
Utilisez un bloc de code lorsque les commandes ou les exemples doivent conserver un espacement exact.
<pre><code>npm run build</code></pre>Afficher les commandes du terminal dans un bloc préformaté/code.
Contenu
strong / em
<strong>Important</strong>Éléments d'emphase sémantique. "strong" signifie importance ; "em" signifie emphase.
Utilisez-les pour une emphase significative, et non seulement pour un style gras ou italique décoratif.
<strong>Important</strong>Utilisez "strong" pour la phrase d'avertissement à l'intérieur de la note.
Média
img
<img src="/hero.png" alt="Tool preview">Un élément qui affiche un fichier image.
Utilisez l'image lorsque vous demandez de remplacer, de redimensionner, de recadrer ou d'ajouter du texte alternatif aux supports visuels.
<img src="/hero.png" alt="Tool preview">Ajouter un attribut "alt" clair à l'image principale.
Média
alt
<img alt="Menu panel open">Texte qui décrit une image pour les lecteurs d'écran et lorsque l'image ne peut pas être chargée.
Utilisez l'attribut alt lorsque vous demandez à améliorer l'accessibilité ou la signification de l'image.
Les images décoratives peuvent utiliser un texte alternatif vide, mais les images significatives nécessitent une description utile.
<img alt="Menu panel open">Ajouter un texte alternatif qui explique ce que montre la capture d'écran.
Média
svg
<svg>...</svg>Un élément graphique vectoriel souvent utilisé pour les icônes, les diagrammes et les formes évolutives.
Utilisez SVG lorsque l'image est une forme simple ou une icône qui doit rester nette.
<svg>...</svg>Utilisez une icône SVG pour le bouton du menu s'il n'y a pas de bibliothèque d'icônes disponible.
Formulaires et contrôles
button
<button type="button">Menu</button>Un contrôle qui effectue une action lorsqu'il est cliqué ou tapé.
Utilisez le bouton lorsque le contrôle modifie l'interface utilisateur UI, ouvre un menu, soumet un formulaire ou exécute une action.
Pour la navigation, un lien est généralement préférable à un bouton.
<button type="button">Menu</button>Faites en sorte que le bouton du menu ferme le menu déroulant de la langue avant d'ouvrir le menu.
Formulaires et contrôles
form
<form>...</form>Un groupe de contrôles utilisés pour collecter et soumettre les entrées de l'utilisateur.
Utilisez un formulaire lorsque les champs d'entrée appartiennent à une seule soumission ou à un seul flux de saisie.
<form>...</form>Regroupez les contrôles de saisie de recherche et de catégorie dans une zone de contrôle unique.
Formulaires et contrôles
label
<label for="search">Search</label>Texte qui nomme un contrôle de formulaire.
Utilisez l'étiquette lorsque une entrée nécessite un nom visible ou convivial pour les lecteurs d'écran.
<label for="search">Search</label>Ajouter une étiquette pour le champ de saisie de recherche sans encombrer l'UI.
Formulaires et contrôles
input
<input type="search" placeholder="Search">Un champ où l'utilisateur tape ou choisit une valeur.
Utilisez input lorsque vous ciblez les champs de recherche, les champs de texte, les nombres, les cases à cocher ou d'autres contrôles simples.
<input type="search" placeholder="Search">Rendez la zone de saisie de recherche pleine largeur sur les appareils mobiles.
Formulaires et contrôles
select
<select><option>English</option></select>Un contrôle de liste déroulante natif pour choisir une option parmi une liste.
Utilisez "select" lorsque le contrôle est une liste déroulante native, et non un panneau de menu personnalisé.
<select><option>English</option></select>Appliquez un style au sélecteur de langue afin que l'option sélectionnée soit lisible en mode sombre.
Formulaires et contrôles
textarea
<textarea>Long text</textarea>Une entrée de texte multiligne.
Utilisez un champ de texte lorsque les utilisateurs doivent coller ou modifier de plus longs textes.
<textarea>Long text</textarea>Augmentez la hauteur de la zone de texte pour une longue saisie de prompt.
Attributs
class
<button class="icon-button">...</button>Un attribut utilisé pour regrouper des éléments pour le style ou le comportement.
La classe est souvent la méthode la plus pratique pour cibler un motif d'interface utilisateur UI répété.
<button class="icon-button">...</button>Appliquez la même classe à tous les boutons de bascule de catégorie de menu.
Attributs
id
<section id="tools">...</section>Un identifiant unique pour un élément sur une page.
Utilisez id lorsqu'un lien doit faire défiler une section spécifique ou qu'une étiquette doit être associée à un champ d'entrée.
Le même identifiant ne doit pas être réutilisé pour plusieurs éléments sur une même page.
<section id="tools">...</section>Ajouter un identifiant à la section des outils afin que le lien "Outils" puisse y faire défiler.
Attributs
href
<a href="/ko/reference/html-structure-terms">HTML</a>L'URL de destination ou le fragment pour un lien.
Utilisez href lorsqu'un lien pointe vers la mauvaise page ou section.
<a href="/ko/reference/html-structure-terms">HTML</a>Modifiez l'attribut href du menu Programmation pour qu'il pointe vers la nouvelle page de termes de l'HTML.
Attributs
src
<img src="/images/example.png" alt="Example">Le chemin d'accès au fichier source pour les images, les scripts, les iframes et les médias similaires.
Utilisez "src" lorsqu'une image ou un script est manquant, incorrect ou doit être remplacé.
<img src="/images/example.png" alt="Example">Remplacer l'attribut src de l'image par le nouveau chemin d'accès de l'image de prévisualisation.
Attributs
data-*
<html data-theme="dark">Attributs personnalisés utilisés pour stocker l'état ou les métadonnées sur un élément.
Utilisez des attributs de données lorsque le style dépend d'un état tel que le thème, l'état ouvert, fermé ou sélectionné.
<html data-theme="dark">Utilisez data-theme sur l'élément html pour basculer les couleurs du mode sombre.
Accessibilité
role
<div role="menu">...</div>Un attribut d'accessibilité qui décrit le type d'objet UI que représente un élément.
Utilisez le rôle lorsqu'un composant personnalisé nécessite une sémantique claire, telle qu'un menu, une boîte de dialogue, un onglet ou une alerte.
Les éléments sémantiques natifs sont généralement meilleurs que d'ajouter un rôle à une div générique.
<div role="menu">...</div>Attribuez un rôle de menu approprié à la liste de langues personnalisée.
Accessibilité
aria-label
<button aria-label="Toggle menu">...</button>Une étiquette de texte pour les technologies d'assistance lorsque le texte visible est manquant ou insuffisant.
Utilisez aria-label pour les contrôles avec uniquement une icône, tels que les boutons de menu, de recherche, de fermeture ou de thème.
<button aria-label="Toggle menu">...</button>Ajouter un "aria-label" qui nomme clairement le bouton du menu "hamburger".
Accessibilité
aria-expanded
<button aria-expanded="false">Menu</button>Un attribut d'accessibilité qui indique si un panneau contrôlé est ouvert ou fermé.
Utilisez-le pour les boutons déroulants, les accordéons et les commutateurs de menu.
<button aria-expanded="false">Menu</button>Mettre à jour aria-expanded lorsque la catégorie du menu s'ouvre ou se ferme.
Relations
Parent and child
<nav><a>Link</a></nav>Un élément parent contient des éléments enfants à l'intérieur.
Utilisez ceci lorsque la cible dépend de son emplacement, par exemple, les liens à l'intérieur de la navigation ou les boutons à l'intérieur de l'en-tête.
<nav><a>Link</a></nav>Appliquez le style uniquement aux liens qui sont des enfants de la navigation de l'en-tête.
Relations
Sibling
<button /> <button />Les éléments qui partagent le même parent sont des frères et sœurs.
Utilisez "sibling" lorsque l'espacement ou l'interaction dépend des éléments voisins.
<button /> <button />Réduire l'espacement entre les boutons d'en-tête.
Relations
Nesting
<section><article><h2>Title</h2></article></section>La structure créée lorsque des éléments sont placés à l'intérieur d'autres éléments.
Utilisez l'imbrication lorsque vous expliquez précisément quel élément interne doit être modifié.
<section><article><h2>Title</h2></article></section>Dans chaque carte, déplacez l'exemple de requête sous les éléments de propriété.
Relations
Wrapper
<div class="container">...</div>Un élément utilisé principalement pour regrouper, contraindre ou positionner d'autres éléments.
Utilisez un wrapper lorsque la mise en page nécessite un élément englobant plutôt que des modifications apportées à chaque enfant.
<div class="container">...</div>Ajouter un conteneur autour des contrôles d'en-tête afin que le menu déroulant puisse s'aligner sur la droite.
Relations
Container
<div class="container">Page content</div>Un conteneur qui maintient le contenu de la page aligné et contraint à une largeur lisible.
Utilisez un conteneur lorsque vous modifiez la largeur globale du contenu ou le remplissage latéral.
<div class="container">Page content</div>Rendez le conteneur de contenu principal légèrement plus étroit sur un ordinateur de bureau.
Relations
Fragment
<>...</>Un conteneur utilisé dans React pour regrouper des éléments sans ajouter d'élément DOM supplémentaire.
Utilisez un fragment lorsque vous regroupez des éléments sans affecter la mise en page ou les sélecteurs CSS.
<>...</>Utilisez un fragment au lieu d'ajouter un div d'enrobage inutile.
Accessibilité
Semantic HTML
<main><section><h1>...</h1></section></main>HTML qui utilise des éléments en fonction de leur signification, et non seulement de leur apparence visuelle.
Utilisez le HTML sémantique lorsque vous améliorez la structure, l'accessibilité, le SEO ou la maintenabilité.
<main><section><h1>...</h1></section></main>Utilisez le HTML sémantique pour les sections de la page de référence au lieu d'utiliser des divs génériques partout.
Accessibilité
Landmark
<header> <nav> <main> <footer>Régions importantes de la page qui aident les utilisateurs des technologies d'assistance à naviguer rapidement.
Les en-têtes, la barre de navigation, le corps principal, la barre latérale et le pied de page peuvent servir de points de repère.
<header> <nav> <main> <footer>Conservez un point de repère principal clair sur chaque page.
Accessibilité
Accessible name
<button aria-label="Open menu">☰</button>Le nom que la technologie d'assistance utilise pour annoncer une commande.
Utilisez un nom accessible lorsque le contrôle est visuellement clair mais n'est pas nommé pour les lecteurs d'écran.
<button aria-label="Open menu">☰</button>Donnez au commutateur de thème un nom clair et accessible dans chaque locale.
Accessibilité
tabindex
<button tabindex="0">Action</button>Un attribut qui peut affecter l'ordre de focus du clavier.
Utilisez-le avec précaution lorsque les contrôles personnalisés ne sont pas accessibles par clavier.
Les valeurs tabindex positives peuvent créer un ordre de navigation clavier confus. L'ordre de focus natif est généralement préférable.
<button tabindex="0">Action</button>Évitez les valeurs tabindex positives et maintenez l'ordre du clavier naturel.