HTML - Attributs

Nous avons vu quelques balises HTML et leur utilisation comme les balises d'en-tête <h1>, <h2>, balise de paragraphe <p>et autres balises. Nous les avons utilisés jusqu'à présent dans leur forme la plus simple, mais la plupart des balises HTML peuvent également avoir des attributs, qui sont des informations supplémentaires.

Un attribut est utilisé pour définir les caractéristiques d'un élément HTML et est placé à l'intérieur de la balise d'ouverture de l'élément. Tous les attributs sont constitués de deux parties - unname et un value

le nameest la propriété que vous souhaitez définir. Par exemple, le paragraphe<p> L'élément de l'exemple porte un attribut dont le nom est align, que vous pouvez utiliser pour indiquer l'alignement du paragraphe sur la page.
le valueest ce que vous voulez que la valeur de la propriété soit définie et toujours mise entre guillemets. L'exemple ci-dessous montre trois valeurs possibles de l'attribut align: left, center et right.

Les noms d'attribut et les valeurs d'attribut ne sont pas sensibles à la casse. Cependant, le World Wide Web Consortium (W3C) recommande des attributs / valeurs d'attribut en minuscules dans leur recommandation HTML 4.

Exemple

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>Align Attribute  Example</title> 
   </head>
	
   <body> 
      <p align = "left">This is left aligned</p> 
      <p align = "center">This is center aligned</p> 
      <p align = "right">This is right aligned</p> 
   </body>
	
</html>

Cela affichera le résultat suivant -

Attributs de base

Les quatre attributs de base qui peuvent être utilisés sur la majorité des éléments HTML (mais pas tous) sont -

Id
Title
Class
Style

L'attribut Id

le idL'attribut d'une balise HTML peut être utilisé pour identifier de manière unique tout élément d'une page HTML. Il y a deux raisons principales pour lesquelles vous pourriez vouloir utiliser un attribut id sur un élément -

Si un élément porte un attribut id comme identifiant unique, il est possible d'identifier uniquement cet élément et son contenu.
Si vous avez deux éléments du même nom dans une page Web (ou une feuille de style), vous pouvez utiliser l'attribut id pour distinguer les éléments qui ont le même nom.

Nous discuterons de la feuille de style dans un didacticiel séparé. Pour l'instant, utilisons l'attribut id pour distinguer deux éléments de paragraphe comme indiqué ci-dessous.

Example

<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>

L'attribut de titre

le titleattribut donne un titre suggéré pour l'élément. Ils syntaxe pour letitle l'attribut est similaire comme expliqué pour id attribut -

Le comportement de cet attribut dépendra de l'élément qui le porte, bien qu'il soit souvent affiché comme une info-bulle lorsque le curseur survole l'élément ou pendant le chargement de l'élément.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>The title Attribute Example</title>
   </head>
	
   <body>
      <h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
   </body>
	
</html>

Cela produira le résultat suivant -

Maintenant, essayez d'amener votre curseur sur "Exemple de balise de titre intitulé" et vous verrez que le titre que vous avez utilisé dans votre code apparaît comme une info-bulle du curseur.

L'attribut de classe

le classL'attribut est utilisé pour associer un élément à une feuille de style et spécifie la classe de l'élément. Vous en apprendrez plus sur l'utilisation de l'attribut de classe lorsque vous apprendrez la feuille de style en cascade (CSS). Donc, pour l'instant, vous pouvez l'éviter.

La valeur de l'attribut 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

L'attribut style vous permet de spécifier des règles de feuille de style en cascade (CSS) dans l'élément.

<!DOCTYPE html>
<html>

   <head>
      <title>The style Attribute</title>
   </head>
	
   <body>
      <p style = "font-family:arial; color:#FF0000;">Some text...</p>
   </body>
	
</html>

Cela produira le résultat suivant -

Pour le moment, nous n'apprenons pas le CSS, alors continuons sans trop nous soucier du CSS. Ici, vous devez comprendre ce que sont les attributs HTML et comment ils peuvent être utilisés lors du formatage du contenu.

Attributs d'internationalisation

Il existe trois attributs d'internationalisation, disponibles pour la plupart (mais pas tous) des éléments XHTML.

dir
lang
xml:lang

L'attribut dir

le dirL'attribut vous permet d'indiquer au navigateur la direction dans laquelle le texte doit circuler. L'attribut dir peut prendre l'une des deux valeurs, comme vous pouvez le voir dans le tableau qui suit -

Valeur	Sens
ltr	De gauche à droite (la valeur par défaut)
rtl	De droite à gauche (pour les langues telles que l'hébreu ou l'arabe qui se lisent de droite à gauche)

Example

<!DOCTYPE html>
<html dir = "rtl">

   <head>
      <title>Display Directions</title>
   </head>
	
   <body>
      This is how IE 5 renders right-to-left directed text.
   </body>
	
</html>

Cela produira le résultat suivant -

Lorsque l' attribut dir est utilisé dans la balise <html>, il détermine la façon dont le texte sera présenté dans tout le document. Lorsqu'il est utilisé dans une autre balise, il contrôle la direction du texte uniquement pour le contenu de cette balise.

L'attribut lang

le langL'attribut vous permet d'indiquer la langue principale utilisée dans un document, mais cet attribut a été conservé en HTML uniquement pour des raisons de compatibilité avec les versions antérieures de HTML. Cet attribut a été remplacé par lexml:lang attribut dans les nouveaux documents XHTML.

Les valeurs de l' attribut lang sont des codes de langue à deux caractères standard ISO-639. VérifierHTML Language Codes: ISO 639 pour une liste complète des codes de langue.

Example

<!DOCTYPE html>
<html lang = "en">

   <head>
      <title>English Language Page</title>
   </head>

   <body>
      This page is using English Language
   </body>

</html>

Cela produira le résultat suivant -

L'attribut xml: lang

L' attribut xml: lang est le remplacement XHTML de l' attribut lang . La valeur de l' attribut xml: lang doit être un code de pays ISO-639 comme mentionné dans la section précédente.

Attributs génériques

Voici un tableau de quelques autres attributs qui sont facilement utilisables avec de nombreuses balises HTML.

Attribut	Options	Fonction
aligner	droite, gauche, centre	Aligne les balises horizontalement
valigné	haut, milieu, bas	Aligne verticalement les balises dans un élément HTML.
bgcolor	valeurs numériques, hexadécimales, RVB	Place une couleur d'arrière-plan derrière un élément
Contexte	URL	Place une image d'arrière-plan derrière un élément
id	Défini par l'utilisateur	Nomme un élément à utiliser avec les feuilles de style en cascade.
classe	Défini par l'utilisateur	Classifie un élément à utiliser avec les feuilles de style en cascade.
largeur	Valeur numérique	Spécifie la largeur des tableaux, des images ou des cellules de tableau.
la taille	Valeur numérique	Spécifie la hauteur des tableaux, des images ou des cellules de tableau.
Titre	Défini par l'utilisateur	Titre "pop-up" des éléments.

Nous verrons des exemples connexes au fur et à mesure que nous étudierons d'autres balises HTML. Pour une liste complète des balises HTML et des attributs associés, veuillez consulter la référence à la liste des balises HTML .