📘 Les attributs HTML

En HTML, les attributs permettent d'ajouter des informations supplémentaires aux balises.

Exemple :

<p align="center">Texte centré</p>

Dans cet exemple :

• p = la balise paragraphe
• align = l'attribut
• "center" = la valeur de l'attribut

⚠️ L'attribut align

L'attribut align est un ancien attribut HTML (HTML 4).

Exemples :

<p align="left">Texte à gauche</p>

<p align="center">Texte centré</p>

<p align="right">Texte à droite</p>

<p align="justify">Texte justifié</p>

Il fonctionne encore dans de nombreux navigateurs, mais il est aujourd'hui déconseillé.

La méthode moderne utilise CSS.

Exemple :

<p style="text-align:center;">
Texte centré
</p>

Ou mieux :

<p class="centre">
Texte centré
</p>

Avec une feuille de style :

.centre {
    text-align:center;
}

📝 Les attributs HTML généraux

Ces attributs peuvent être utilisés sur la plupart des balises.

🆔 Attribut id

L'attribut id donne un identifiant unique à un élément.

Exemple :

<div id="menu">
Contenu du menu
</div>

Il peut être utilisé avec :

• CSS
• JavaScript
• des liens internes

Exemple :

<a href="#contact">
Aller au contact
</a>

<div id="contact">
Contact
</div>

🎨 Attribut class

L'attribut class permet d'appliquer un même style à plusieurs éléments.

Exemple :

<p class="important">
Attention
</p>

<p class="important">
Information importante
</p>

CSS associé :

.important {
    color:red;
    font-weight:bold;
}

🖌️ Attribut style

Permet d'ajouter directement du CSS dans une balise.

Exemple :

<p style="color:blue;">
Texte bleu
</p>

Cependant, il est préférable d'utiliser une feuille CSS séparée.

🖼️ Les attributs des images

Exemple :

<img
src="photo.jpg"
alt="Photo de paysage"
width="300"
height="200">

Attributs :

Exemple :

<img src="photo.jpg" alt="Montagne" loading="lazy">

🔗 Les attributs des liens

Exemple :

<a href="page.html" target="_blank">
Ouvrir la page
</a>

Attributs :

Exemple :

<a href="document.pdf" download>
Télécharger le PDF
</a>

📋 Les attributs des formulaires

Exemple :

<input
type="text"
name="nom"
value="Michel"
placeholder="Votre nom"
required>

Attributs principaux :

⚙️ Les attributs JavaScript

Ils permettent de déclencher des actions.

Exemple :

<button onclick="bonjour()">
Cliquez
</button>

Principaux événements :

♿ Les attributs d'accessibilité ARIA

Les attributs aria-* améliorent l'accessibilité.

Exemple :

<button aria-label="Fermer">
X
</button>

Principaux attributs :

🎬 Les attributs vidéo

Exemple :

<video
src="video.mp4"
controls
autoplay
loop>
</video>

Attributs :

🪟 Les attributs iframe

Exemple :

<iframe
src="page.html"
width="800"
height="600"
loading="lazy">
</iframe>

Attributs :

⚠️ Attributs HTML anciens

Certains attributs existent encore mais ne sont plus recommandés.

✅ Philosophie HTML5 moderne

La séparation des rôles est :

HTML

Structure du document :

<p class="titre">
Bonjour
</p>

CSS

Présentation :

.titre {
    text-align:center;
    color:blue;
}

JavaScript

Comportement :

alert("Bonjour");

📌 Exemple moderne complet

HTML :

<p class="message">
Bonjour
</p>

CSS :

.message {
    text-align:center;
    background-color:yellow;
    padding:10px;
}

Avantages :

✅ Code plus propre
✅ Maintenance plus facile
✅ Compatible avec les navigateurs modernes
✅ Séparation claire entre contenu, style et programmation

⚙️ Les attributs de la balise <script>

La balise <script> permet d'intégrer du code JavaScript dans une page HTML ou de charger un fichier JavaScript externe.

Exemple simple :

<script>
alert("Bonjour");
</script>

Ou avec un fichier externe :

<script src="script.js"></script>

📌 Attribut src

Permet de charger un fichier JavaScript externe.

Exemple :

<script src="js/menu.js"></script>

Le navigateur charge alors le fichier :

js/menu.js

📌 Attribut type

Indique le type du script.

Exemple ancien :

<script type="text/javascript">
alert("Bonjour");
</script>

En HTML5, text/javascript est la valeur par défaut.

Donc aujourd'hui on écrit simplement :

<script>
alert("Bonjour");
</script>

Autres utilisations possibles :

Module JavaScript

<script type="module" src="app.js"></script>

Le mode module permet :

• import
• export
• une meilleure organisation du code

📌 Attribut defer

Permet de différer l'exécution du script jusqu'à ce que le HTML soit complètement analysé.

Exemple :

<script src="menu.js" defer></script>

Sans defer :

1. Le navigateur rencontre le script
2. Il arrête l'analyse HTML
3. Il charge JavaScript
4. Il exécute JavaScript
5. Il reprend le HTML

Avec defer :

1. Le HTML continue à être analysé
2. Le script est chargé en parallèle
3. Le script est exécuté après l'analyse HTML

C'est souvent recommandé.

📌 Attribut async

Charge et exécute le script dès qu'il est disponible.

Exemple :

<script src="statistiques.js" async></script>

Différence avec defer :

async convient surtout pour :

• statistiques
• publicités
• scripts indépendants

📌 Attribut crossorigin

Permet de gérer les scripts provenant d'un autre domaine.

Exemple :

<script
src="https://cdn.example.com/app.js"
crossorigin="anonymous">
</script>

Valeurs possibles :

📌 Attribut integrity

Permet de vérifier qu'un fichier externe n'a pas été modifié.

Exemple :

<script
src="https://cdn.example.com/lib.js"
integrity="sha384-xxxxx"
crossorigin="anonymous">
</script>

Utilisé notamment avec les CDN.

Avantage :

✅ Protection contre la modification d'un fichier externe.

📌 Attribut nomodule

Permet de fournir un script aux anciens navigateurs qui ne comprennent pas les modules JavaScript.

Exemple :

<script type="module" src="app.js"></script>

<script nomodule src="ancien.js"></script>

Fonctionnement :

• navigateur moderne → utilise app.js
• ancien navigateur → utilise ancien.js

📌 Attribut nonce

Utilisé avec la sécurité CSP (Content Security Policy).

Exemple :

<script nonce="abc123">
console.log("Script autorisé");
</script>

Il permet d'autoriser uniquement certains scripts.

📌 Attribut referrerpolicy

Contrôle les informations envoyées lors du chargement du script.

Exemple :

<script
src="script.js"
referrerpolicy="no-referrer">
</script>

Valeurs possibles :

• no-referrer
• origin
• strict-origin
• unsafe-url

📋 Résumé des attributs <script>

✅ Exemple moderne recommandé

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

<head>
<meta charset="UTF-8">

<script 
src="js/application.js"
defer>
</script>

</head>

<body>

<h1>Mon site</h1>

</body>

</html>

Dans la majorité des sites modernes :

• src est utilisé pour charger les fichiers externes
• defer est ajouté pour ne pas bloquer l'affichage
• type="text/javascript" n'est plus nécessaire
• type="module" est utilisé pour les applications JavaScript modernes

📦 Utiliser <script> comme conteneur de données

La balise <script> peut contenir autre chose que du JavaScript.

Si la valeur de l'attribut type n'est pas reconnue comme un type JavaScript, le navigateur ne tente pas d'exécuter son contenu.

Elle devient alors un simple conteneur de texte.

Cette technique est très utilisée pour embarquer des données dans une page HTML.

📄 Contenir du JSON

Exemple :

<script type="application/json" id="config">
{
    "nom": "Michel",
    "ville": "Estagel",
    "age": 75
}
</script>

Puis en JavaScript :

const config = JSON.parse(
    document.getElementById("config").textContent
);

console.log(config.nom);

C'est aujourd'hui la méthode recommandée pour transmettre des données du serveur vers JavaScript.

📝 Contenir du Markdown

On peut également stocker du Markdown.

<script type="text/markdown" id="article">

# Bonjour

Voici du **Markdown**.

- un
- deux
- trois

</script>

Puis :

const md = document.getElementById("article").textContent;

Ensuite on peut convertir ce Markdown avec :

• marked.js
• markdown-it
• Showdown
• etc.

📄 Contenir du texte quelconque

<script type="text/plain" id="texte">

Ceci est simplement du texte.

Le navigateur ne fait rien.

</script>

📦 Contenir du XML

<script type="application/xml" id="xml">

<personne>
    <nom>Michel</nom>
</personne>

</script>

📦 Contenir du SVG

<script type="image/svg+xml" id="icone">

<svg width="100" height="100">
...
</svg>

</script>

📦 Contenir du HTML

<script type="text/html" id="modele">

<div class="carte">
    <h2>{{titre}}</h2>
    <p>{{texte}}</p>
</div>

</script>

Cette technique était très utilisée avant l'apparition de la balise <template>.

📦 Contenir du SQL

<script type="text/sql">

SELECT *
FROM clients;

</script>

📦 Contenir du YAML

<script type="text/yaml">

nom: Michel
ville: Estagel

</script>

📦 Contenir du CSV

<script type="text/csv">

nom;ville
Michel;Estagel

</script>

📦 Contenir n'importe quel langage

Le navigateur ne vérifie pas réellement le contenu.

Ainsi on peut écrire :

<script type="text/php">
...
</script>

<script type="text/python">
...
</script>

<script type="text/lua">
...
</script>

<script type="text/berry">
...
</script>

<script type="application/x-config">
...
</script>

Le contenu sera simplement conservé dans le DOM.

📋 Types MIME les plus utilisés

💡 Astuce

Avant l'apparition de la balise <template>, les développeurs utilisaient très souvent :

<script type="text/html">
...
</script>

pour stocker des modèles HTML.

Aujourd'hui, on préfère généralement :

<template id="carte">

<div class="carte">
...
</div>

</template>

La balise <template> est plus adaptée, mais la technique utilisant <script> reste parfaitement valide lorsqu'on souhaite embarquer des données (JSON, Markdown, YAML, etc.) directement dans une page HTML.

📦 La balise <template>

La balise <template> permet de stocker du contenu HTML qui n'est pas affiché lors du chargement de la page.

Le navigateur le conserve en mémoire mais ne l'insère pas dans le document.

C'est une sorte de modèle (template) que JavaScript peut dupliquer autant de fois que nécessaire.

Exemple simple

<template id="bonjour">

<h2>Bonjour</h2>

<p>Bienvenue sur le site.</p>

</template>

Au chargement de la page, rien ne s'affiche.

Pourquoi utiliser <template> ?

Sans <template>, il faudrait construire le HTML avec des chaînes de caractères :

document.body.innerHTML +=
"<h2>Bonjour</h2><p>Bienvenue</p>";

Cette méthode est :

• peu lisible
• difficile à maintenir
• source d'erreurs

Avec <template>, le HTML reste écrit normalement.

Utilisation en JavaScript

HTML :

<template id="fiche">

<div class="fiche">
<h2>Nom</h2>
<p>Description</p>
</div>

</template>

JavaScript :

const modele = document.getElementById("fiche");

const copie = modele.content.cloneNode(true);

document.body.appendChild(copie);

Le contenu apparaît alors dans la page.

Que signifie content ?

La propriété content contient le document stocké dans le template.

const contenu = document.getElementById("fiche").content;

C'est un objet de type :

DocumentFragment

Pourquoi utiliser cloneNode(true) ?

Le contenu du template ne peut être inséré qu'après avoir été copié.

const copie = modele.content.cloneNode(true);

true signifie :

recopier également tous les éléments enfants.

Si on écrivait :

cloneNode(false)

on copierait uniquement le premier niveau.

Modifier le contenu avant insertion

HTML :

<template id="personne">

<div class="personne">

<h2></h2>

<p></p>

</div>

</template>

JavaScript :

const copie =
document.getElementById("personne")
.content
.cloneNode(true);

copie.querySelector("h2").textContent = "Michel";

copie.querySelector("p").textContent = "Estagel";

document.body.appendChild(copie);

Résultat :

Michel

Estagel

Répéter un modèle

Le même template peut être utilisé des centaines de fois.

const personnes = [

{nom:"Michel", ville:"Estagel"},
{nom:"Jean", ville:"Perpignan"},
{nom:"Paul", ville:"Narbonne"}

];

const modele =
document.getElementById("personne");

for(const p of personnes){

const copie =
modele.content.cloneNode(true);

copie.querySelector("h2").textContent =
p.nom;

copie.querySelector("p").textContent =
p.ville;

document.body.appendChild(copie);

}

Un seul modèle HTML suffit.

Les templates peuvent être complexes

Ils peuvent contenir :

• du texte
• des images
• des tableaux
• des formulaires
• des vidéos
• des SVG
• des iframes
• d'autres templates

Exemple :

<template id="carte">

<div class="carte">

<img src="">

<h2></h2>

<p></p>

<button>Détails</button>

</div>

</template>

Un template peut contenir du CSS

<template>

<style>

.carte{
border:1px solid gray;
padding:1rem;
}

</style>

<div class="carte">
Bonjour
</div>

</template>

Le style sera appliqué lorsque le template sera inséré.

Peut-on mettre du JavaScript ?

Oui.

<template>

<script>

console.log("Bonjour");

</script>

</template>

Le script n'est pas exécuté tant que le template n'est pas inséré dans la page.

Cependant, cette pratique est peu recommandée.

Différence entre <template> et <script type="text/html">

Ancienne méthode :

<script type="text/html" id="modele">

<div class="carte">

<h2></h2>

</div>

</script>

Méthode moderne :

<template id="modele">

<div class="carte">

<h2></h2>

</div>

</template>

Le résultat est similaire, mais <template> est prévu spécialement pour cet usage.

Avantages de <template>

✅ HTML parfaitement valide

✅ Invisible tant qu'il n'est pas utilisé

✅ Peut être cloné rapidement

✅ Plus lisible

✅ Plus facile à maintenir

✅ Supporté par tous les navigateurs modernes

Cas d'utilisation

La balise <template> est idéale pour créer :

• une carte de produit
• une fiche utilisateur
• un commentaire
• un article
• une ligne de tableau
• un menu
• une galerie d'images
• une liste de fichiers
• une fenêtre modale
• une notification
• un message de discussion

Résumé

La balise <template> est un modèle HTML réutilisable.

Contrairement à une balise <div> classique :

• son contenu n'est pas affiché ;
• il est conservé dans le DOM ;
• JavaScript peut le cloner avec content.cloneNode(true) autant de fois que nécessaire.

C'est aujourd'hui la méthode recommandée pour générer dynamiquement du HTML sans avoir à construire des chaînes de caractères.