Chargement...

HTML, les attributs


Cours sur les attributs HTML

Les balises peuvent avoir des propriétés, on les appelle des attributs.
<!DOCTYPE html>
<head>
<title>Titre de ma page</title>
<meta name="description" content="Site web" />
<style type="txt/css"> ... </style>
</head>
<body>Bienvenue sur mon site</body>
</html>
Dans l'exemple ci-dessus, l'attribut "name" de la base "meta" a pour valeur "description". Cela permet de dire au navigateur que la balise meta - qui est une balise d'information - nous informe de la description du site. Pour cette balise la valeur se met dans l'attribut "content".

Liste attributs HTML

Attribut Elément Description
accept <form>, <input> Les type de fichier accepté par le serveur
accept-charset <form> Type d'encodage supporté
accesskey TOUS Définit un raccoucrci clavier pour activer ou sélectionner un élément
action <form> L'URL du script qui traitera les valeurs du formulaire
align <caption>, <hr>, <iframe>, <img>, <table>, <td>, <th> Définit l'alignement horizontal de l'élément. Exemple: left, right, center et justify.
alt <area>, <img>, <input> Texte alternatif lorsque l'élément ne peut être affiché.
async <script> Exécute le script en asynchrone
autocomplete <input>, <select>, <textarea> Propriété qui permet d'afficher ou non des propositions de complétion de texte à l'utilisateur
autofocus <input>, <select>, <textarea> L'élement est sélectionné au chargement de la page
autoplay <audio>, <video> Chargement automatique de l'élement multimédia.
charset <meta>, <script> Définit le type de codage de l'élement
checked <input> Indique si l'élément est coché
class TOUS Permet d'associer une classe à un élément
cols <textarea> Indique le nombre de colonne de l'élément
colspan <td>, <th> Permet de fusionner x cellule d'un tableau horizontalement
data-* TOUS Permet de créer ses propres attributs. Exemple data-user="1"
dir TOUS Indique le sens de lecture. Exemple ltr pour (left to right) et rtl ( right to left )
disabled TOUS Permet de bloquer l'édition de l'élément et rend l'élement illisible pour la validation du formulaire.
download <a>, <area> Indique que l'hyperlien doit être utilisé pour télécharger la ressource
draggalbe TOUS Indique si l'élement peut être déplacé par l'utilisateur
dropable TOUS Indique si l'élement peut receptionner un élément draggable.
dropzone TOUS Indique si l'élement peut receptionner un élément draggable.
enctype <form> Définit le type d'encodage des données du formulaire quand la method est POST
for <label>, <output> Décris l'élement qui lui est associé
form <button>, <fieldset>, <input>, <label>, <object>, <output>, <progress>, <select>, <textarea> Indique le formulaire qui est propriétaire de l'élément
href <a>, <area>, <base>, <link> L'url de la ressource associée
id TOUS Permet d'associer un identifiant à un élément
maxlength <input>, <textarea> Définit le nombre de caractère maximum pour l'élément
method <form> Indique quel méthode HTTP doit être utilisé quand le formulaire est envoyé. Peux être GET (défaut) ou POST.
name TOUS Lors de la soumission d'un formulaire, on récupère les valeurs et les noms des champs.
placeholder <input>, <textarea> Ajoute un texte informatif pour l'utilisateur
readonly <input>, <textarea> Indique si l'élément peut être édité par l'utilisateur
selected <option> Permet de sélectionner une valeur dans un <select>
size <input>, <select> Définit la taille d'un élément par un nombre de caractères
src <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video> Indique la source de l'élément. Pour l'image par exemple on indique où elle se trouve sur le serveur.
style TOUS Définit les styles CSS qui primeront sur les styles précédemment définis.
target <a>,<form> Indique où charger le script: nouvelle page, page nommé ou la même page.
title TOUS Permet d'indiquer à l'utilisateur une information, visible lors du survol de la souris sur celui-ci.
type <button>, <input>, <embed>, <object>, <script>, <style> Indique le type de l'élément.
type <button>, <option>, <input>, <li> Indique la valeur de l'élément.



UNE QUESTION SUR L'ARTICLE?


CSSW Apprendre à créer son site web CSSW