Attributs HTML

Les attributs HTML peuvent être dits comme des mots spéciaux qui sont utilisés à l'intérieur des balises d'ouverture et sont chargés de contrôler le comportement d'un élément. Ils sont un modificateur de type d'élément HTML. Ce modificateur peut effectuer deux tâches. Il peut soit modifier la fonctionnalité par défaut d'un élément, soit fournir la fonctionnalité à tout élément qui ne peut pas fonctionner correctement sans eux. Syntaxiquement, un attribut est ajouté à la balise de démarrage HTML. Il existe différents types d'attributs qui ont été identifiés. Il s'agit notamment des attributs requis, des attributs facultatifs, des attributs standard et des attributs d'événement. Les attributs requis sont ceux qui sont nécessaires par type d'élément particulier pour que la fonction fonctionne correctement. L'attribut facultatif peut être utilisé pour modifier la fonctionnalité par défaut d'un type d'élément. Les attributs standard sont pris en charge par un grand nombre de types d'éléments et les attributs d'événement peuvent être utilisés pour générer des types d'éléments qui peuvent spécifier les scripts qui s'exécutent dans des circonstances spécifiques. Les attributs apparaissent généralement sous forme de paires nom-valeur et sont séparés par «=» (signe égal). Ils sont écrits dans la balise de début d'un élément après le nom de l'élément.

Différents attributs HTML

Jetons un coup d'œil aux différents attributs HTML et comment ils fonctionnent en détail.

Attributs principaux

Il existe quatre principaux attributs qui sont principalement utilisés. Pour les nommer, ils sont les suivants:

  • ID: cet attribut de HTML peut être facilement utilisé pour identifier de manière unique un élément présent dans une page HTML. L'identifiant utilisateur peut être utilisé soit lorsqu'un élément porte un attribut id comme identifiant unique, ce qui permet d'identifier l'élément et son contenu ou il est utilisé lorsqu'il y a deux éléments qui portent le même nom dans une page Web. L'attribut ID peut aider à identifier facilement la différence entre les éléments qui portent le même nom.
  • L'attribut de titre: cet attribut fait le travail de donner un titre suggéré pour un élément particulier. Cela dépend du transporteur comment il se comportera et bien qu'il ne soit généralement pas affiché sous forme d'infobulle chaque fois que le curseur survole l'élément ou s'il doit l'afficher lors du chargement de l'élément. Il est également utilisé pour expliquer un élément sur le survol de la souris. Le comportement peut différer avec différents éléments et généralement, sa valeur est affichée au chargement ou au survol du pointeur de la souris dessus.
  • L'attribut de classe: l'association de cet attribut se fait avec un élément de la feuille de style. L'utilisateur doit spécifier la classe de l'élément. Plus d'informations sur cet attribut lors de l'apprentissage de la feuille de style en cascade. La valeur ici peut également être une liste de noms de classe séparés par des espaces. Par exemple: class = "className1 className2 className3"
  • L'attribut de style: cet attribut vous permet de spécifier les règles de feuille de style en cascade dans n'importe quel élément. Il peut fournir divers effets de feuille de style en cascade aux éléments HTML, comme augmenter la taille de la police. Il peut également changer la famille de polices et la coloration.

Après les attributs de base, nous avons quelques attributs d'internationalisation. Ils sont comme ci-dessous:

Attribut d'internationalisation

  • Dir: l' attribut dir vous aide à indiquer au navigateur la direction dans laquelle un texte doit suivre. Cet attribut peut généralement prendre deux valeurs. Ceux-ci peuvent être LTR et RTL. LTR signifie de gauche à droite et c'est la valeur par défaut, tandis que RTL signifie de droite à gauche. Lorsque cet attribut est utilisé dans la balise, il détermine comment un texte doit être représenté dans l'ensemble du document. Il peut également être utilisé pour contrôler la direction du texte à partir uniquement du contenu de la balise.
  • L'attribut Lang: cet attribut permet de présenter la langue principale utilisée dans un document. Cet attribut peut être conservé en HTML afin qu'il soit rétrocompatible avec les versions antérieures de HTML. Il peut également être remplacé par l'attribut XML: lang dans les nouveaux documents XHTML. Les valeurs des attributs lang sont la norme ISO-639 et ont des codes de langue à deux caractères. La déclaration d'une langue est importante pour accéder à l'application et aux différents moteurs de recherche.
  • L'attribut XML-Lang: cet attribut est censé remplacer l'attribut lang. La valeur de l'attribut XML-lang doit avoir le code du pays comme mentionné précédemment.

En plus de ceux-ci, il existe de nombreux attributs génériques qui sont décrits ci-dessous.

Attribut générique

  • Attribut d'alignement: cet attribut est utile lorsque vous souhaitez disposer de certains éléments de votre page. Vous pouvez modifier l'alignement à gauche, à droite ou au centre de la page. L'alignement par défaut pour tous les éléments est défini à gauche. Cela peut être modifié en utilisant cet attribut align.
  • Attribut Src: si un utilisateur doit insérer une image dans une page Web, nous devons utiliser le avec l'attribut src. Nous pouvons spécifier l'adresse de l'image comme valeur d'attribut à l'intérieur du guillemet double. Vous pouvez utiliser l'attribut src comme ci-dessous pour inclure l'image sur la page Web.


src Attribute


  • Attribut Alt: cet attribut est utilisé comme une balise alternative qui peut être utilisée pour montrer quelque chose si l'attribut principal qui est le balise qui ne parvient pas à afficher la valeur d'origine qui lui est affectée. Cela peut décrire l'image à un développeur qui l'utilise à la fin du codage. Si l'image principale échoue, l'image alternative peut être utilisée pour s'afficher.
  • Attribut Largeur et Hauteur: cet attribut peut être utilisé pour régler la hauteur et la largeur d'une image.

Example:

Width and Height


<

  • L'attribut Href: cet attribut est utilisé lorsque l'utilisateur souhaite diriger vers un lien spécifique vers n'importe quelle adresse. Cet attribut est utilisé avec la balise. Lorsque le lien est placé dans l'attribut href où il doit être dirigé, il est lié au texte affiché dans la balise. Lorsque l'utilisateur clique sur ce texte, l'utilisateur sera redirigé vers l'adresse du lien. L'option par défaut pour ouvrir cette page dans le même onglet. Si vous utilisez l'attribut cible, vous pouvez définir sa valeur sur _blank. Cela redirigera vers un autre onglet ou une autre fenêtre en fonction de la configuration de votre navigateur.

Attribut de données

HTML fournit également des attributs de données personnalisés qui vous aident à ajouter des informations vous concernant dans les balises HTML. Ceux-ci ne sont pas spécifiques à HTML5 et peuvent être utilisés sur tous les éléments HTML. L'attribut data - * nous aide à personnaliser nos propres attributs de données personnalisés, il peut stocker les données en privé sur la page ou l'application.

Afin de personnaliser, les données sont divisées en deux parties:

  1. Nom de l'attribut: il doit comporter au moins un caractère et ne doit pas contenir de majuscules. Ce nom peut également être préfixé en utilisant 'data-'.
  2. Valeur d'attribut: la valeur d'un attribut peut être n'importe quelle chaîne.

La syntaxe de l'attribut de données est la suivante:

  • Gitanjali

    • Propriété d'attribut DOM

    Pour obtenir les objets NamedNodeMap, les propriétés d'attribut dans HTML DOM doivent être utilisées. Il renverra le groupe d'attributs de noeud. Le NamedNodeMap représente également la collection d'objets d'attribut et il est accessible par numéro d'index. Ce numéro d'index commence à 0.

    La syntaxe à utiliser est la suivante: node.attributes

    La valeur renvoyée est les objets NamedNodeMap qui sont présents dans la collection de nœuds. Si l'utilisateur utilise Internet Explorer 8 ou l'une des versions antérieures, la propriété d'attributs renvoie tous les attributs possibles pour n'importe quel élément, ce qui peut entraîner plus de valeurs que prévu.

    Example:


    HTML DOM attributes Property


    HTML DOM attributes Property

    Click Here!


    Button element attributes:

    function myeduCBA() (
    // It returns the number of nodes
    var cba = document.getElementById("CBA").attributes.length;
    // Display the number of nodes
    document.getElementById("sudo").innerHTML = cba;
    )

    The output for above program will be
    Button element attributes: 2

    Example:


    HTML DOM attributes Property


    HTML DOM attributes Property

    Click Here!


    Button element attributes:

    function myeduCBA() (
    // It returns the number of nodes
    var cba = document.getElementById("CBA").attributes.length;
    // Display the number of nodes
    document.getElementById("sudo").innerHTML = cba;
    )

    The output for above program will be
    Button element attributes: 2

    Example:


    HTML DOM attributes Property


    HTML DOM attributes Property

    Click Here!


    Button element attributes:

    function myeduCBA() (
    // It returns the number of nodes
    var cba = document.getElementById("CBA").attributes.length;
    // Display the number of nodes
    document.getElementById("sudo").innerHTML = cba;
    )

    The output for above program will be
    Button element attributes: 2

    Attributs globaux

    HTML fournit également des attributs globaux qui peuvent être utilisés avec n'importe quel élément HTML. Les attributs sont les suivants.

    • Accesskey: il spécifie une touche de raccourci pour activer ou se concentrer sur n'importe quel élément.
    • Traduire: si cet attribut est utilisé, il spécifie si le contenu de l'élément doit être traduit ou non.
    • Classe: il spécifie un ou plusieurs noms de classe pour un élément.
    • Titre: cet attribut spécifie des informations supplémentaires sur un élément.
    • Contenteditable: Afin de spécifier si le contenu est modifiable ou non, cet attribut peut être utilisé.
    • Tabindex: il spécifie l'ordre de tabulation d'un élément.
    • Dir: il spécifie la direction du texte pour tout contenu d'un élément.
    • Vérification orthographique: l' utilisateur peut spécifier explicitement s'il doit vérifier l'orthographe et la grammaire vérifiées ou non.
    • Glissable: il spécifie si un élément doit être glissable ou non.
    • Zone de dépôt: il spécifie si les données glissées sont copiées, déplacées ou liées lors de leur suppression.

    Attributs d'événement

    HTML a la capacité de déclencher des actions lorsque certains événements se produisent. Les attributs d'événement peuvent être comme ci-dessous.

    Onload: il se déclenche une fois le chargement de la page terminé.

    Onmessage: cela peut être dit comme un script qui s'exécute lorsque le message est déclenché.

    Onstorage: il s'agit d'un script à exécuter lorsqu'une zone de stockage Web est mise à jour.

    Onerror: ce script est exécuté lorsqu'une erreur se produit.

    Onpagehide: ce script peut être utilisé lorsqu'un utilisateur peut s'éloigner d'une page.

    Attributs d'événement de formulaire

    Ces événements sont déclenchés par des actions à l'intérieur d'un formulaire HTML.

    Onblur: il se déclenche dès que l'élément perd le focus.

    Onchange: il est déclenché dès que la valeur d'un élément change.

    Oncontextmenu: Ceci est exécuté lorsqu'un menu contextuel est déclenché.

    Onfocus: il est déclenché dès que l'élément obtient le focus.

    Oninput: le script doit s'exécuter lorsque l'élément reçoit une entrée.

    Onsearch: Ceci est déclenché lorsque l'utilisateur écrit quelque chose dans le champ de recherche.

    Oninvalid: Ceci est déclenché lorsqu'un élément qui est entré n'est pas valide.

    Attributs d'événement clés

    Onkeydown: Il se déclenche lorsqu'une touche est enfoncée.

    onkeypress: Ceci est déclenché lorsqu'une touche est enfoncée.

    Onkeyup: Ceci est déclenché lorsqu'un utilisateur relâche une clé.

    Attributs d'événements de souris

    Onclick: Ceci est déclenché lorsque la souris clique sur un élément.

    Onmousemove: Ceci est déclenché lorsque le pointeur de la souris se déplace alors qu'il se trouve sur un élément.

    Onmouseip: Il est déclenché lorsqu'un bouton de la souris est relâché par-dessus un élément.

    Onwheel: Il est déclenché lorsque la molette de la souris roule vers le haut ou vers le bas sur un élément

    Faites glisser les attributs d'événement

    Ondrag: Ceci est déclenché lorsqu'un élément est glissé.

    Ondragleave: le script est exécuté lorsqu'un élément quitte une cible de dépôt valide.

    Ondrop: il se déclenche lorsque l'élément glissé est déposé

    Onscroll: le script est exécuté lorsque la barre de défilement d'un élément est en cours de défilement.

    Conclusion - Attributs HTML

    Le HTML est la technologie la plus ancienne utilisée pour créer différentes applications Web. Avec le temps, le HTML a évolué progressivement et offre de nombreuses fonctionnalités pour les éléments présents. Il fournit une grande variété d'attributs qui contribuent à rendre l'application plus efficace. Il s'agit notamment des attributs de base qui sont les plus basiques qui sont utilisés le plus fréquemment. Il fournit également des attributs d'internationalisation qui permettent des changements de langue. L'attribut data aide à stocker les données et à les personnaliser comme l'utilisateur le souhaite. Avec tout cela, il a également des attributs globaux qui peuvent être utilisés avec n'importe quel élément et n'importe où. Il possède également des attributs d'événement qui sont déclenchés lorsqu'un événement se produit. En conséquence, cela rend l'application Web ou la page Web très interactive. Le HTML s'avère donc encore dans le jeu du développement d'applications web du fait de toutes ces fonctionnalités. Avec ceux-ci, l'attribut style qui peut être utilisé avec CSS le rend plus beau et attrayant à utiliser. Utilisez donc tous les attributs présents et disposez d'une application Web géniale de votre choix en toute simplicité.

    Articles recommandés

    Cela a été un guide pour les attributs HTML. Ici, nous avons discuté des concepts et des différents attributs du HTML. Vous pouvez également consulter les articles suivants pour en savoir plus -

    1. Qu'est-ce que le HTML en termes simples?
    2. Découvrez comment HTML fonctionne
    3. Qu'est-ce que XML?
    4. Meilleurs styles de liste HTML
    5. Comparaisons entre HTML et XML

    Catégorie:

    Outils de développement Web