Attributs HTML-tutoriel HTML-php.cn

Les attributs HTML sont des mots spéciaux qui modifient le comportement d'un élément HTML. Ils sont utilisés dans les balises d'ouverture des éléments et peuvent soit modifier la fonctionnalité par défaut d'un élément, soit fournir la fonctionnalité nécessaire. Syntaxiquement, un attribut est ajouté à la balise de début HTML. Ils peuvent être classés en attributs obligatoires, facultatifs, standard ou d'événement, et sont écrits sous forme de paires nom-valeur séparées par un signe égal « = » dans la balise de début d'un élément.

Différents attributs HTML

Vous trouverez ci-dessous les différents attributs HTML et leur fonctionnement en détail :

1. Attributs de base

Quatre attributs principaux sont principalement utilisés :

ID : Cet attribut identifie un élément de manière unique au sein d'une page HTML. Lorsqu'un élément porte un attribut ID, celui-ci sert d'identifiant unique qui facilite l'identification de l'élément et de son contenu. Ceci est particulièrement utile lorsqu'il existe plusieurs éléments portant le même nom dans une page Web.
Attribut Titre : Cet attribut fournit un titre suggéré pour un élément. Son comportement dépend du contexte dans lequel il est utilisé, et il peut être affiché sous forme d'info-bulle lorsque le curseur survole l'élément ou lors du chargement de l'élément. Il peut également fournir des informations supplémentaires sur un élément lorsque l'utilisateur passe le pointeur de la souris dessus.
Attribut de classe : Cet attribut associe un élément à une feuille de style en précisant la classe de l'élément. On peut en apprendre davantage sur cet attribut lors de l'apprentissage de la feuille de style en cascade. La valeur de l'attribut class peut être une liste de noms de classe séparés par des espaces. Par exemple : class="className1 className2 className3″
Attribut de style : Cet attribut permet à l'utilisateur de spécifier des règles CSS pour un élément individuel. Avec l'attribut style, l'utilisateur peut appliquer divers effets CSS aux éléments HTML, tels que la modification de la taille de la police, de la famille de polices et de la couleur.

2. Attribut d'internationalisation

Dir : L'attribut dir permet d'indiquer au navigateur la direction que le texte doit suivre. Cet attribut peut prendre deux valeurs : LTR et RTL. LTR signifie de gauche à droite, ce qui est la valeur par défaut, tandis que RTL signifie de droite à gauche. Lorsqu'il est utilisé dans le balise, elle détermine la manière dont le texte doit être représenté dans l’ensemble du document. Il peut également contrôler la direction du texte dans le contenu de la balise.
Attribut Lang : Cet attribut permet de présenter la langue principale utilisée dans un document. On peut l'utiliser en HTML pour maintenir une compatibilité ascendante avec les versions antérieures de HTML. Aussi, on le remplace par l'attribut XML: lang dans les nouveaux documents XHTML. Les valeurs de l'attribut lang sont basées sur la norme ISO-639 et se composent de codes de langue à deux caractères. Déclarer une langue est important pour l'accessibilité et pour que les moteurs de recherche indexent correctement le contenu.
Attribut XML-Lang : Cet attribut tend à remplacer l'attribut lang. La valeur de l'attribut XML-lang doit inclure les codes de langue et de pays spécifiés par ISO-639.

3. Attribut générique

Attribut Aligner : Cet attribut est utile lorsque vous souhaitez positionner certains éléments sur votre page Web. Il vous permet de modifier l'alignement à gauche, à droite ou au centre de la page. L'alignement par défaut de tous les éléments est défini à gauche, mais vous pouvez le modifier à l'aide de l'attribut align.
Attribut Src : Lorsqu'on souhaite insérer une image dans une page Web, il faut utiliser l'attribut balise avec l’attribut src. On peut spécifier l’adresse de l’image comme valeur de l’attribut entre guillemets doubles. On peut utiliser l'attribut src comme suit pour inclure l'image sur la page Web.

Code :

<html>
<head>
<title>src Attribute</title>
</head>
<body>
<img src=" https://www.google.com/url?sa=i&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwi2lr-WjbvhAhXPXisKHb6JABgQjRx6BAgBEAU&url=https%3A%2F%2Fwww.google.com.mx%2F&psig=AOvVaw2jWnG-ltpLO7QE_Ge7TXeO&ust=1554627554684449">
</body>
</html>

Copier après la connexion

Attribut Alt : Cet attribut est utilisé comme une balise alternative qui peut être utilisée pour afficher quelque chose si l'attribut principal, qui est le balise, ne parvient pas à afficher l’image originale qui lui est attribuée. Il peut décrire l'image à un développeur qui l'utilise du côté du codage. Si l'image principale échoue, l'image alternative peut s'afficher.
L'attribut Largeur et Hauteur : Ces attributs peuvent ajuster la hauteur et la largeur d'une image.

Exemple :

Code :

<html>
<head>
<title>Width and Height</title>
</head>
<body>
<img src=" https://www.google.com/url?sa=i&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwi2lr-WjbvhAhXPXisKHb6JABgQjRx6BAgBEAU&url=https%3A%2F%2Fwww.google.com.mx%2F&psig=AOvVaw2jWnG-ltpLO7QE_Ge7TXeO&ust=1554627554684449" width="300px" height="100px">
</body>
</html>

Copier après la connexion

Href Attribute: This attribute is used when the user wants to direct a specific link to any address and is used along with the tag. When the link is placed in the href attribute, it is associated with the text displayed within the tag. Clicking on this text will redirect the user to the URL specified in the href attribute. By default, clicking on the link will open the linked page in the same tab or window. If one wants to open the linked page in a new tab or window, one can use the target attribute and set its value to “_blank”. This behavior may vary based on the user’s browser settings.

4. Data Attribute

HTML provides custom data attributes that allow adding additional information related to the content in HTML tags. These attributes are not specific to HTML5 and can be used on all HTML elements. The data-* attribute enables the creation of custom data attributes that can store private data for the page or application.

In order to customize, one divides the data into two parts:

Attribute Name: It should have at least one character long and should not have any capital letters. This name can also be prefixed by using “data-“.
Attribute Value: Any string value can be associated with the attribute.

The syntax for a data attribute is as follows:

<li data-book-author="Rabindra Nath Tagore"> Gitanjali </li>

Copier après la connexion

5. DOM Attribute Property

To retrieve the NamedNodeMap objects, one can use the attribute properties in the HTML DOM. This will return a group of node attributes. The NamedNodeMap represents a collection of attribute objects, which can be accessed by their index number, starting at 0. To use this, the user can access the node’s attributes using the syntax node.attributes.

The value returned is a NamedNodeMap object that contains all the attributes in the collection of nodes. However, if someone is using Internet Explorer 8 or an earlier version, the attributes property may return all possible attributes for any element, resulting in more values than expected.

Example:

Code:

<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM attributes Property
</title>
</head>
<body>
<h2>
HTML DOM attributes Property
</h2>
<button id = "CBA" onclick = "myeduCBA()">
Click Here!
</button>
<br><br>
<span>
Button element attributes:
</span>
<span id="sudo"></span>
<script>
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;
}
</script>
</body>
</html>
The output for above program will be
Button element attributes: 2

Copier après la connexion

6. Global Attributes

HTML also provides global attributes that can work with any HTML element:

Accesskey: Specifies a shortcut key to activate or focus on any element.
Translate: Specifies whether the content of the element is to be translated or not.
Class: One or more class names for an element are specified.
Title: Specifies extra information about an element.
Contenteditable: This attribute can be used to specify whether the content is editable or not.
Tabindex: Specifies the tabbing order of an element.
Dir: Specifies the text direction for any content of an element.
Spellcheck: Users can explicitly specify if they want to have the spelling and grammar checked or not.
Draggable: Specifies if an element should be draggable or not.
Dropzone: Specifies whether the dragged data is copied, moved, or linked when dropped.

7. Event Attributes

HTML has the ability to trigger actions when some events take place.

Onload: Fires after the page has finished loading.
Onmessage: A script that runs when the message is triggered.
Onstorage: A script that runs when a web storage area is updated.
Onerror: The script runs when an error occurs.
Onpagehide: The script can be used when the user navigates away from a page.

8. Form Event Attributes

Actions inside an HTML form trigger these events.

Onblur : Il se déclenche dès que l'élément perd le focus.
Onchange : Il se déclenche dès que la valeur d'un élément change.
Oncontextmenu : Ceci est exécuté lorsqu'un menu contextuel est déclenché.
Onfocus : Il se déclenche 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é lorsque l'élément saisi n'est pas valide.

9. Attributs clés de l'événement

Onkeydown : Déclenché lorsqu'une touche est enfoncée.
Onkeypress : Déclenché lorsqu'une touche est enfoncée.
Onkeyup : Ceci est déclenché lorsqu'un utilisateur relâche une clé.

10. Attributs d'événement de souris

Onclick : Ceci se déclenche lorsque la souris clique sur un élément.
Onmousemove : Déclenché lorsque le pointeur de la souris se déplace alors qu'il se trouve sur un élément.
Onmouseip : Déclenché lorsqu'un bouton de la souris est relâché au-dessus d'un élément.
Sur la roue : Déclenché lorsque la molette de la souris roule vers le haut ou vers le bas sur un élément

11. Faites glisser les attributs de l'événement

Ondrag : Ceci est déclenché lorsqu'un élément est déplacé.
Ondragleave : Le script s'exécute lorsqu'un élément quitte une cible de dépôt valide.
Ondrop : Déclenché lorsque l'élément glissé est déposé
Onscroll : Le script s'exécute lorsque la barre de défilement d'un élément défile.

Conclusion

Le HTML a évolué au fil du temps, offrant un large éventail d'attributs tels que le noyau, l'internationalisation, les données, le global et l'événement, rendant les applications et les pages Web plus interactives. Combiné avec CSS, HTML permet une personnalisation facile des éléments Web pour créer des applications Web visuellement attrayantes.

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!