Vous êtes ici : Accueil > Cours > HTML > Eléments et attributs HTML
Éléments et attributs HTML
Le langage HTML repose sur des éléments insérés dans des balises pour générer du contenu. Les balises peuvent être écrites soit en minuscules soit en majuscules (mais l'usage le plus courant est en minuscule). Elle n'apparaissent pas à l'écran, seul le contenu se trouvant à l'intérieur est affiché.
Il existe deux types de balises :
Les balises les plus courantes fonctionnant par paires qui s'ouvrent puis se referment. Cela est essentiel pour l'imbrication. Un exemple ci-dessous :
<p>Exemple utilisant une balise qui s'ouvre et se ferme</p>
Les balises autofermantes (ou balises orphelines ou éléménts vides) comme par exemple avec la balise <img> :
<img src="monImage.jpg" alt=""/>
/* peut s'écrire sans le slash */
<img src="monImage.jpg" alt="">
Certains éléments peuvent se passer d'attributs, d'autres non. Un attribut se déclare dans la balise ouvrante comme ceci :
/* l'élément a requiert l'attribut href */
<a href="lien"></a>
/* l'élément img requiert deux attributs src et alt */
<img src="monImage.jpg" alt="Description de mon image"/>
Nous verrons dans ce chapitre les éléments et attributs les plus importants ou utilisés en HTML.
L'élément html :
Après avoir déclaré un document HTML grâce au doctype, on place ensuite l'élément html dans une balise. Généralement, on indique dans cette balise la langue du document via l'attribut lang. Ce n'est pas obligatoire, mais peut être intéressant pour l'accessibilité. En effet, les lecteurs d'écran pourront détecter la langue et ainsi retranscrire les informations de manière plus précise.
L'élément html est désigné comme l'élément racine du document. Tous les autres éléments du document sont donc ses descendants. En quelque sorte c'est lui le patron (mais un patron sympa, rassurez-vous).
<!DOCTYPE html>
<html lang="fr">
Métadonnées
Les métadonnées contiennent des informations à propos de la page.
L'élément head
Un document HTML possède un en-tête symbolisé par l'élément head. Celui-ci contiendra des informations relatives au document : le titre, la description du contenu de la page, le type d’encodage, le nom de l'auteur du document... Il existe un grand nombre de données.
💡 NB : ces informations n'apparaissent pas sur la page, elles sont destinées au navigateur et aux moteurs de recherche.
L'élément title :
Cet élément, seul à être obligatoire, a son importance car il va contenir le titre de la page. Celui-ci est affiché généralement dans l'onglet de la page, de la même manière qu'il apparaîtra dans les moteurs de recherche. Il est bien évident que le titre doit être en rapport avec le contenu du document.
L'élément title se présente ainsi :
<title>Titre de la page</title>
Il existe quelques règles à respecter quant à l'utilisation de l'élément title. Il est vivement conseillé ne pas écrire un texte trop long ou trop court : entre 55 et 60 caractères. Votre titre doit décrire le contenu de la page de manière compréhensible. Autremendit dit, on évitera une succession de mots-clés.
💡 Attention à ne pas confondre l'élément et l'attribut du même nom.
L'élément meta :
On écrira des données dans des balises <meta>. Voici comment cette balise se présente :
<head>
/*exemple permettant de décrire le contenu de la page */
<meta name="description" content="description du contenu de la page...">
/*exemple permettant de rafraîchir le contenu de la page toutes les 30 secondes */
<meta http-equiv="refresh" content="30">
</head>
L'élément meta peut être utilisé avec de nombreux attributs dont voici les principaux :
-charset : permet de déclarer l'encodage de la page. Bien que cela ne soit pas obligatoire, il est fortement recommandé d'utiliser l'encodage UTF-8.
-name : définit le nom d'une métadonnée du document (comme dans le code ci-haut).
-content : définit la valeur associée avec l'attribut http-equiv ou l'attribut name suivant le contexte.
-http-equiv : définit un objet pouvant modifier le comportement des serveurs ou des agents utilisateur (comme dans le code ci-haut).
-viewport : permet de définir la taille du viewport (vue virtuelle) à destination des terminaux mobiles.
L'élément link :
Cet élément, placé à l'intérieur de l'entête du document, permet d'importer une ressource extérieure comme une feuille de style, une police de caractère hébergée sur un serveur.... Pour cela, il existe l'attribut rel qui va indiquer le type de relation entre le document et la ressource, et l'attribut href qui va pointer vers la ressource :
L'élément link permet également d'indiquer au navigateur la priorité d'une ressource à charger. Pour cela, nous aurons besoin de déclarer dans l'élément rel la valeur preload (pré-chargement) conjointement à l'élément as dans lequel on indique le type de document.
Par ailleurs, l'élément link, via l'attribut rel et les valeurs prev et next, permet de décrire la position d'un document par rapport à une série de documents.
L'élément figure est un conteneur, et non pas un élément remplacé comme l'élément img, ce qui permet d'y insérer tout type de contenu (images, textes, codes...). De plus, on peut facilement lui appliquer du style CSS. Cet élément n'a aucun incidence sur le contenu du document, il peut ainsi se placer n'importe où.
L'élément figcaption, qui est optionnel, permet d'indiquer un sous-titre, une légende. Dans la première version HTML5, l'élément figcaption ne peut être utilisé que comme premier ou dernier enfant de l’élément figure, c'est-à-dire avant ou après son contenu principal.
La révision HTML5.1 a enlevé cette restriction. Désormais, il est possible de placer l'élément figcaption n’importe où dans le conteneur figure.
Un paysage en bord de mer
<figure>
<img src="images/votre-image.jpg" alt="Un paysage en bord de mer">
<figcaption>Un paysage en bord de mer</figcaption>
</figure>
L'élément picture est un conteneur qui permet l'utilisation de plusieurs éléments source qui, couplés aux attributs srcset (source de l'image) et media (taille de l'écran) donnent la possibilité de proposer plusieurs types d'images, afin que l'agent utilisateur (le navigateur) puisse choisir lui-même l'image à afficher selon les définitions ou tailles d'écran ou encore selon le débit internet.
On pensera toujours à afficher une image par défaut (fallback) via la balise <img>. Si vous souhaitez une compatibilité optimale, vous devrez utiliser ce polyfill.
Allons plus loin grâce à l'attribut srcset. En effet, celui-ci permet, via le descripteur de densité de pixel x, d'afficher des images à haute densité.
Remplaçant en quelque sorte l'élément frame pour diverses raisons, l'élément HTML iframe, introduit en HTML5, permet d'intégrer une page HTML dans le document courant. Il représente ainsi un contexte de navigation imbriqué, c'est un document à part entière.
En tant qu'élément remplacé, la position, l'alignement et le redimensionnement du document embarqué via iframe peuvent être ajustés via les propriétés object-position et object-fit.
Parmi les attributs notables, on retiendra :
- allow : permet de définir une politique de fonctionnalité.
- allowfullscreen devenu allow="fullscreen": permet de contrôler si le contenu peut se présenter en plein écran à l’aide de la méthode requestFullscreen(). Voir un exemple sur ce blog.
- allowpaymentrequest devenu allow="payment" : permet d'intégrer l'API de demande de paiement (Payment Request API)
- src : permet d'intégrer l'URL de la page souhaitée.
- srcdoc : permet d'intégrer le contenu de la page souhaité.
💡 L'API de demande de paiement (Payment Request API) se veut être une alternative native aux formulaires de paiement que l'on trouve sur les sites de commerce en ligne. L'intérêt principal de cette interface est que le traitement de la récupération des informations de paiement est directement géré par le navigateur qui fera l'intermédiaire. L'interface se veut plus claire et cohérente pour une meilleure expérience utilisateur.
Voir une démonstration de l'API de demande de paiement (navigateur webkit/blink).
Les éléments intéractifs
Les éléments details et summary [HTML5.1] :
L'élément details est un contenu intéractif qui permet de dérouler un résumé grâce à l'évènement toogle sans passer par JavaScript. Il sera donc possible d'ouvrir et refermer le résumé.
Elle se présente sous cette forme (varie selon les navigateurs) :
Ceci est un texte à l'intérieur de l'élément details.
<details>
<summary></summary>
<p>Ceci est un texte à l'intérieur de l'élément details.</p>
</details>
Ci-dessous dans son état initial (c'est-à-dire fermé comme l'exemple précédent) mais stylé en CSS.
sommaire
Ceci est un texte à l'intérieur de l'élément details.
<details>
<summary>sommaire</summary>
<p>Ceci est un texte à l'intérieur de l'élément details.</p>
</details>
Un autre exemple avec l'attribut open. Il permet l'ouverture par défaut du contenu. (Vous pouvez ensuite refermer l'élément)
Exemple avec attribut open
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id diam quis massa eleifend bibendum ac sed lacus. Donec nibh enim, tempor non ex ut, hendrerit aliquet lorem. Mauris venenatis varius sapien, non viverra turpis vestibulum et. Fusce eu vehicula velit.
<details open>
<summary>
<p>Votre texte</p>
</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id diam quis massa eleifend bibendum ac sed lacus. Donec nibh enim, tempor non ex ut, hendrerit aliquet lorem. Mauris venenatis varius sapien, non viverra turpis vestibulum et. Fusce eu vehicula velit.</p>
</details>
💡 Bon à savoir : si aucun intitulé ne figure dans l'élément summary, la valeur par défaut est details. De plus, il est possible de remplacer la petite flèche par défaut comme ceci :
Le but de cet élément est de proposer une boîte de dialogue native, compatible et accessible (ce qui évite d'embarquer une bibliothèque JavaScript par exemple, ou de créer le tout en CSS). Par défaut, celle-ci n'apparaît pas dans le DOM, à moins que l'attribut open ne soit appliqué.
Le problème, toujours le même, est le manque de support (moteur blink uniquement). Si vous souhaitez utiliser cet élément, il vous faudra utiliser un polyfill.
💡 NB : Les éléments contextmenu et menuitem ont été dépréciés.
A l'instar de l'élément ul, l'élément menu représente une liste non ordonnée d'éléments. Celui-ci peut contenir des options (option), une liste (li), des boutons, d'autres menus, des balises command, des input, des séparateurs hr. Mais son utilité diffère puisque l'élément menu a été conçu pour afficher des éléments intéractifs.
Concrètement, l'élément menu permet de personnaliser le menu contextuel de l'utilisateur par l'intermédiaire de l'attribut global HTML5contextmenu.
Explication : lorsque vous effectuez un clic droit avec la souris sur une page, un menu apparaît qui indique différentes options comme par exemple la possibilité d'afficher le code source d'une page web.
Ainsi est-il possible de rajouter des éléments interactifs à l'intérieur de ce menu.
L'élément canvas est une spécificité HTML5 qui permet, au travers de la balise du même nom, <canvas>, de créer une aire de dessin dont il faut préciser la hauteur et la largeur. A l'aide de JavaScript, il est alors possible de générer des formes (plus ou moins complexes) à l'intérieur de cette aire et de les animer.
Il existe deux types d'attributs en HTML, eux-mêmes regroupés en deux catégories : les attributs de contenu et les attributs IDL.
Parmi les attributs de contenu on distingue les attributs booléens et les attributs universels. Quant aux attributs IDL, ils qu'on peut obtenir ou modifier via JavaScript
Les attributs HTML booléens
Un booléen est un type de variable à deux états (vrai et faux), par exemple sur les éléments details et dialog
Les attributs HTML universels
Il s'agit des attributs communs à l'ensemble des éléments HTML. Ceux-ci peuvent donc être ajoutés sur tous les éléments (dans certains cas, les attributs n'auront aucun effet).
Attribut placeholder
L'attribut HTML placeholder permet d'ajouter du texte dans un champ de formulaire, ceci afin de renseigner le visiteur.
Par exemple, à l'intérieur d'un textarea, vous pouvez mettre un petit texte du genre : "Ajoutez votre commentaire".
Auparavant, le meilleur moyen de faire apparaître du texte dans un élément remplacé au sein d'un formulaire était le recours à JavaScript. Mais HTML5 a introduit l'attribut placeholder.
💡 Une certaine confusion peut régner sur placeholder. En effet, il est un pseudo-élément CSS (::placeholder) qui sert à styliser le texte contenu dans l'attribut placeholder et qui se présente sous cette forme :
:-moz-placeholder { } /* Firefox version inférieure à 18 */
::-moz-placeholder { } /* Firefox 19 et + */
::-webkit-input-placeholder { } /*chrome, Opera, Safari, android et Edge*/
:-ms-input-placeholder{ } /* IE */
::-ms-input-placeholder{ } /* Edge */
(Notez bien que le navigateur Edge prend en compte les préfixes webkit)
La compatibilité avec certains navigateurs🔗 (Internet Explorer en tête) manque cruellement.
Mais [placeholder] est avant tout un attribut qui se présente comme suit :
<input type="text" placeholder="votre texte">
NB : cette méthode n'est pas recommandée🔗. En effet, cela peut créer une confusion chez le visiteur qui peut croire que le champ est déjà renseigné. Il est vivement conseillé d'utiliser cet attribut en corrélation avec des labels pour vos formulaires.
Attribut spellcheck (correcteur automatique)
L'attribut spellcheck permet d'activer ou de désactiver la correction orthographique automatique (en sachant que la valeur par défaut varie selon le navigateur et selon l'élément visé).
Vous avez certainement déjà remarqué que lorsqu'un mot est mal orthographié, celui-ci est souligné en rouge. Cela se produit sur les éléments de formulaire ainsi que sur les éléments HTML avec l'attribut contenteditable.
Il existe deux types de valeurs :
true : indique que l'orthographe doit être vérifiée.
false : indique que l'orthographe ne doit pas être vérifiée.
Ci-dessous, un exemple dans un textarea (cliquez sur le texte) :
L'objectif de ce nouvel attribut : prévenir l’hameçonnage (ou phishing en anglais).
En effet, lorsqu'un nouvel onglet est ouvert avec l'attribut target et sa valeur _blank, il y a un risque de sécurité. Pour tenter de résoudre ce problème, HTML5.1 a introduit ce nouvel attribut qui peut se placer au sein d'un lien hypertexte ou de la zone d'une image (élément area).
