Nouveaux Éléments Sémantiques

<section>

Représente une section thématique de contenu dans une page, telle qu'un chapitre, un en-tête, un pied de page ou une autre division logique.

<section>...</section>

<article>

Définit un contenu autonome et indépendant, pertinent dans son contexte, comme un article de blog, un post de forum ou une nouvelle.

<article>.....</article>

<aside>

Indique du contenu auxiliaire lié à l'<article> environnant, mais qui peut être considéré comme séparé de celui-ci, comme des barres latérales ou des encarts d'information.

<aside>...</aside>

<header>

Définit un groupe de contenu introductif ou de navigation pour une section ou pour toute la page, généralement utilisé pour les titres et les informations contextuelles.

<header>...</header>

<footer>

Représente le pied de page d'une section ou de la page entière, contenant souvent des informations sur l'auteur, les droits d'auteur ou des liens connexes.

<footer>...</footer>

<nav>

Structure les liens de navigation principaux d'une page ou d'une section.

<nav>...</nav>

<figure> et <figcaption>

<figure> englobe du contenu autonome, souvent des images, des diagrammes ou des blocs de code, et <figcaption> fournit une légende ou un titre pour cet élément.

<figure>
 <figcaption>Légende de l'image</figcaption>
 <img src="image.jpg" alt="Description">
</figure>

<main>

Spécifie le contenu principal et unique du corps d'un document, excluant le contenu répété comme les en-têtes, pieds de page et barres latérales.

<main>...</main>

Autres Éléments HTML5

<video>

Permet d'intégrer des vidéos directement dans le contenu web, avec des attributs pour le contrôle, la source et les pistes.

<video src="video.mp4" controls width="400" height="300">
 Votre navigateur ne supporte pas la vidéo.
</video>

<audio>

Utilisé pour intégrer des contenus audio, tels que de la musique ou des flux audio, avec des options de contrôle.

<audio src="son.mp3" controls>
 Votre navigateur ne supporte pas l'audio.
</audio>

<embed>

Permet d'intégrer du contenu externe, comme des plugins ou des médias, bien que son utilisation soit souvent préférée par d'autres éléments comme <video> ou <iframe> pour des cas spécifiques.

<embed src="ressource.swf" type="application/x-shockwave-flash" width="300" height="200" />

<mark>

Sert à surligner ou à mettre en évidence du texte pertinent, utile par exemple pour marquer des mots-clés dans les résultats de recherche.

<p>Ceci est un exemple avec du <mark>texte mis en évidence</mark>.</p>

<progress>

Indique l'avancement d'une tâche ou d'un processus, souvent utilisé pour visualiser la progression d'un téléchargement ou d'une opération.

<progress value="70" max="100">70%</progress>

<meter>

Représente une mesure scalaire dans une plage connue, telle qu'un pourcentage ou une jauge, utilisé pour afficher des valeurs relatives.

<meter value="8" min="0" max="10">8 sur 10</meter>

<time>

Utilisé pour représenter des dates et des heures de manière sémantique, permettant aux navigateurs et aux moteurs de recherche de mieux interpréter ces informations.

<p>L'événement aura lieu le <time datetime="2024-07-27">27 juillet 2024</time>.</p>

<ruby>, <rt>, et <rp>

Permettent d'ajouter des annotations ruby (prononciations ou commentaires) au texte, particulièrement utiles pour les langues asiatiques.

<ruby>
 漢 <rt>kan</rt>
 字 <rt>ji</rt>
 <rp>)</rp>
</ruby>

<canvas>

Fournit une surface de dessin bitmap pour le rendu graphique dynamique, généralement via JavaScript, pour créer des visualisations, des jeux ou des animations.

<canvas id="monDessin" width="500" height="300"></canvas>
<script>
 const ctx = document.getElementById('monDessin').getContext('2d');
 ctx.fillStyle = 'red';
 ctx.fillRect(10, 10, 150, 100); // Dessine un rectangle rouge
</script>

<details> et <summary>

Permettent de créer des widgets interactifs où l'utilisateur peut ouvrir et fermer une section d'informations supplémentaires. <summary> contient le titre visible.

<details>
 <summary>En savoir plus sur HTML5</summary>
 Contenu détaillé et informatif sur les avancées HTML5.
</details>

<datalist>

Associe une liste d'options prédéfinies à un champ de saisie, offrant une auto-complétion lors de la saisie utilisateur.

<input type="text" list="navigateurs" />
<datalist id="navigateurs">
 <option value="Chrome">
 <option value="Firefox">
 <option value="Safari">
</datalist>

<output>

Représente le résultat d'un calcul ou d'une action utilisateur, souvent utilisé dans les formulaires pour afficher des résultats.

<form oninput="resultat.value=parseInt(a.value)+parseInt(b.value)">
 <input type="number" id="a" value="10" /> +
 <input type="number" id="b" value="5" /> =
 <output name="resultat" for="a b"></output>
</form>

<source>

Utilisé dans les éléments multimédias comme <video> et <audio> pour spécifier plusieurs sources de médias avec différents formats, permettant au navigateur de choisir le plus approprié.

<picture>
 <source srcset="image.webp" type="image/webp">
 <source srcset="image.jpg" type="image/jpeg">
 <img src="image.jpg" alt="Description image">
</picture>

<dialog>

Définit une boîte de dialogue, une fenêtre qui superpose le contenu principal pour traiter des interactions critiques ou des informations.

<dialog id="fenetreDialogue">
 <h3>Titre du Dialogue</h3>
 <p>Contenu du dialogue...</p>
 <button onclick="document.getElementById('fenetreDialogue').close()">Fermer</button>
</dialog>
<button onclick="document.getElementById('fenetreDialogue').showModal()">Ouvrir Dialogue</button>

Types d'Entrée <input>

• email: Pour les adresses e-mail.
• url: Pour les adresses URL.
• number: Pour les valeurs numériques.
• range: Pour sélectionner une valeur numérique dans une plage prédéfinie.
• date, month, week, time, datetime-local: Pour la sélection de dates et heures.
• color: Pour la sélection d'une couleur.
• search: Pour les champs de recherche.

Attributs Globaux

contenteditable

Cet attribut booléen permet à un utilisateur de modifier le contenu d'un élément directement dans le navigateur.

<p contenteditable="true">Vous pouvez modifier ce texte.</p>

designMode (via JavaScript)

Permet de rendre l'ensemble d'une page web ou une partie spécifique modifiable par l'utilisateur, contrôlé par JavaScript.

document.designMode = "on"; // Active le mode édition pour toute la page

hidden

Indique que l'élément n'est pas pertinent ou n'est pas censé être visible pour l'utilisateur à ce moment précis.

<div hidden>Ce contenu est masqué.</div>

spellcheck

Active ou désactive la vérification orthographique et grammaticale sur les éléments de saisie de texte.

<textarea spellcheck="false"></textarea>

tabindex

Contrôle l'ordre de tabulation des éléments interactifs d'une page lors de l'utilisation de la touche Tab.

<a href="#" tabindex="0">Lien focalisable</a>
<button tabindex="-1">Bouton non focalisable par Tab</button>

Événements Nouveaux ou Améliorés

Tableau des Événements

Certains événements ont été ajoutés ou améliorés pour une meilleure gestion des interactions et des états de la page.

Élément/Objet	Événement	Description
window, document	beforeprint, afterprint	Déclenchés avant et après l'impression de la page.
window	hashchange	Se déclenche lorsque la partie fragmentaire (hash) de l'URL change.
window	pagehide, pageshow	Déclenchés lors de la navigation vers ou depuis une page, y compris lors de l'utilisation du cache.
window	unhandledrejection	Déclenché lorsqu'une promesse est rejetée sans gestionnaire .catch().
audio, video	canplay, canplaythrough, durationchange, emptied, ended, error, loadeddata, loadedmetadata, loadstart, mozaudioavailable, pause, play, playing, progress, ratechange, seeked, seeking, stalled, volumechange, waiting	Gestion des états de lecture multimédia.
form	reset, submit	Événements liés à la soumission et à la réinitialisation des formulaires.
input, textarea, select	input	Se déclenche immédiatement lorsque la valeur d'un champ de formulaire change.
element	wheel	Se déclenche lorsque la molette de la souris est utilisée sur l'élément.

Écouter un Événement une Seule Fois

L'option once: true dans addEventListener permet de s'assurer qu'une fonction de rappel ne sera exécutée qu'une seule fois.

const monBouton = document.getElementById('monBtn');
monBouton.addEventListener('click', () => {
 console.log('Bouton cliqué une fois.');
}, { once: true });

API Fichiers

FileList et File

FileList représente la liste des fichiers sélectionnés par l'utilisateur via un élément <input type="file">. Chaque fichier est représenté par un objet File contenant des métadonnées comme le nom, la taille et le type.

<input type="file" id="chargeurFichier" accept="image/*" multiple>
<div id="apercu"></div>

<script>
document.getElementById('chargeurFichier').addEventListener('change', function(event) {
 const fichiers = event.target.files;
 const zoneApercu = document.getElementById('apercu');
 zoneApercu.innerHTML = ''; // Nettoie l'aperçu précédent

 if (fichiers.length === 0) {
   zoneApercu.innerHTML = '<p>Aucun fichier sélectionné.</p>';
   return;
 }

 // Traite les 5 premiers fichiers pour l'exemple
 const fichiersAffiche = Array.from(fichiers).slice(0, 5);

 fichiersAffiche.forEach(fichier => {
   if (!fichier.type.startsWith('image/')) {
     console.warn(`${fichier.name} n'est pas une image.`);
     return;
   }

   const lecteur = new FileReader();
   lecteur.onload = function(e) {
     const elementFichier = document.createElement('div');
     elementFichier.innerHTML = `
       <img src="${e.target.result}" alt="Aperçu" height="100" />
       <p>Nom: ${fichier.name}, Taille: ${(fichier.size / 1024).toFixed(2)} Ko</p>
     `;
     zoneApercu.appendChild(elementFichier);
   };
   lecteur.readAsDataURL(fichier);
 });
});
</script>

ArrayBuffer et Vues d'ArrayBuffer

ArrayBuffer est un objet représentant un bloc de données binaires brutes de taille fixe. Les vues d'ArrayBuffer (comme Uint8Array, Float32Array) permettent d'interpréter et de manipuler ces données binaires comme des tableaux de types numériques spécifiques.

// Création d'un buffer de 16 octets
const buffer = new ArrayBuffer(16);
// Création d'une vue comme un tableau d'entiers non signés de 8 bits
const view = new Uint8Array(buffer);

// Remplissage de la vue
for (let i = 0; i < view.length; i++) {
 view[i] = i * 5;
}
console.log(view); // Affiche [0, 5, 10, 15, ..., 75]

FileReader

Cet objet permet aux applications web de lire le contenu des fichiers (ou des données brutes) stockés sur l'ordinateur de l'utilisateur de manière asynchrone.

Événement	Description
onabort	Interruption de la lecture.
onerror	Erreur lors de la lecture.
onloadstart	Début de la lecture.
onprogress	Progression de la lecture.
onload	Lecture terminée avec succès.
onloadend	Fin de la lecture (succès ou échec).

<input type="file" id="fichierSelect">
<button onclick="lireContenu()">Lire Fichier</button>
<div id="resultatLecture"></div>

<script>
function lireContenu() {
 const fichierInput = document.getElementById('fichierSelect');
 const resultatDiv = document.getElementById('resultatLecture');
 const [fichier] = fichierInput.files; // Prend le premier fichier

 if (!fichier) {
   resultatDiv.textContent = 'Veuillez sélectionner un fichier.';
   return;
 }

 const lecteur = new FileReader();

 lecteur.onload = (e) => {
   // Affiche le contenu comme une image si c'est une image
   if (fichier.type.startsWith('image/')) {
     resultatDiv.innerHTML = `<img src="${e.target.result}" alt="Aperçu" style="max-width: 300px;">`;
   } else {
     resultatDiv.textContent = e.target.result;
   }
 };

 lecteur.onerror = (e) => {
   resultatDiv.textContent = 'Erreur lors de la lecture du fichier.';
 };

 // Choix de la méthode de lecture : readAsDataURL, readAsText, readAsArrayBuffer
 lecteur.readAsDataURL(fichier);
}
</script>

Stockage Local

Cookies

Les cookies sont de petits morceaux de données envoyés par un serveur et stockés par le navigateur. Ils sont renvoyés au serveur à chaque requête subséquente.

Structure typique : nom=valeur; expires=DATE; path=/; domain=.example.com; Secure; HttpOnly; SameSite=Strict

• name=value: Paire clé-valeur du cookie.
• expires: Date d'expiration.
• max-age: Durée de vie en secondes (prioritaire sur expires).
• domain: Domaine pour lequel le cookie est valide.
• path: Chemin URL pour lequel le cookie est valide.
• Secure: Le cookie n'est envoyé que via HTTPS.
• HttpOnly: Empêche l'accès via JavaScript (protection XSS).
• SameSite: Contrôle l'envoi du cookie avec les requêtes inter-sites (Strict, Lax, None).

Web Storage (sessionStorage et localStorage)

Offrent des mécanismes de stockage côté client plus simples et plus volumineux que les cookies.

• sessionStorage: Les données sont conservées uniquement pendant la durée de la session du navigateur (jusqu'à la fermeture de l'onglet/fenêtre).
• localStorage: Les données sont conservées de manière persistante, même après la fermeture et la réouverture du navigateur.

// Stockage de données
sessionStorage.setItem('utilisateurCourant', 'Alice');
localStorage.setItem('themePrefere', 'sombre');
localStorage.setItem('parametres', JSON.stringify({ notifications: true, langue: 'fr' }));

// Récupération de données
const utilisateur = sessionStorage.getItem('utilisateurCourant'); // "Alice"
const theme = localStorage.getItem('themePrefere'); // "sombre"
const prefs = JSON.parse(localStorage.getItem('parametres'));

// Suppression de données
sessionStorage.removeItem('utilisateurCourant');
localStorage.clear(); // Vide tout le stockage localStorage pour le domaine

// Écoute des changements (uniquement pour localStorage et sur d'autres onglets)
window.addEventListener('storage', (event) => {
 console.log(`Changement détecté: Clé=${event.key}, Ancienne valeur=${event.oldValue}, Nouvelle valeur=${event.newValue}`);
});

IndexedDB

Une base de données NoSQL transactionnelle côté client, intégrée au navigateur, permettant de stocker des quantités importantes de données structurées, y compris des blobs.

// Connexion ou création de la base de données
const request = indexedDB.open('maBase', 2); // Nom et version

request.onupgradeneeded = (event) => {
 const db = event.target.result;
 // Création d'un "object store" (équivalent table) s'il n'existe pas
 if (!db.objectStoreNames.contains('utilisateurs')) {
   db.createObjectStore('utilisateurs', { keyPath: 'id', autoIncrement: true });
 }
};

request.onsuccess = (event) => {
 const db = event.target.result;
 console.log('Base de données ouverte avec succès.');

 // Ajout d'une transaction pour ajouter des données
 const transaction = db.transaction(['utilisateurs'], 'readwrite');
 const store = transaction.objectStore('utilisateurs');

 store.add({ nom: 'Bob', age: 30 }); // Ajoute un utilisateur

 transaction.oncomplete = () => console.log('Transaction terminée.');
 transaction.onerror = (e) => console.error('Erreur transaction:', e.target.error);
};

request.onerror = (event) => {
 console.error('Erreur ouverture base de données:', event.target.error);
};

Communication Réseau (AJAX)

XMLHttpRequest

L'objet historique pour effectuer des requêtes asynchrones. HTML5 a ajouté des fonctionnalités comme responseType et response pour gérer différents types de données (ArrayBuffer, Blob, JSON).

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true); // Méthode, URL, Asynchrone

// Gérer le type de réponse attendu
xhr.responseType = 'json'; // Ou 'text', 'arraybuffer', 'blob', 'document'

xhr.onload = function() {
 if (xhr.status >= 200 && xhr.status < 300) {
   console.log('Réponse reçue:', xhr.response);
 } else {
   console.error('Erreur requête:', xhr.statusText);
 }
};

xhr.onerror = function() {
 console.error('Erreur réseau.');
};

xhr.send(); // Envoyer la requête (peut prendre des données pour POST)

fetch API

Une API moderne et basée sur les Promesses pour effectuer des requêtes réseau, offrant une syntaxe plus propre et plus puissante que XMLHttpRequest.

// Requête GET
fetch('/api/items')
 .then(response => {
   if (!response.ok) {
     throw new Error(`Erreur HTTP: ${response.status}`);
   }
   return response.json(); // Transforme la réponse en JSON
 })
 .then(data => {
   console.log('Données reçues:', data);
 })
 .catch(error => {
   console.error('Échec de la récupération des données:', error);
 });

// Requête POST avec JSON
fetch('/api/save', {
 method: 'POST',
 headers: {
   'Content-Type': 'application/json',
 },
 body: JSON.stringify({ id: 123, valeur: 'test' }),
})
.then(response => response.text())
.then(text => console.log(text));

Gestion des Entités et des Médias

<picture></picture> et <source></source>

Ces éléments permettent de proposer différentes versions d'une image (basées sur la taille de l'écran, le format, etc.) pour que le navigateur puisse choisir la plus appropriée, optimisant ainsi les performances et l'expérience utilisateur.

<picture>
 <source media="(min-width: 1024px)" srcset="grande.jpg">
 <source media="(min-width: 768px)" srcset="moyenne.jpg">
 <img src="petite.jpg" alt="Description de l'image">
</picture>

Composants Web

Une suite de technologies permettant de créer des éléments HTML réutilisables, encapsulés et personnalisés (Custom Elements, Shadow DOM, HTML Templates).

Canvas et SVG

<canvas> pour le dessin bitmap avec JavaScript, et SVG (Scalable Vector Graphics) pour les graphiques vectoriels déclaratifs.

API Multimédia

Les éléments <audio> et <video>, ainsi que leurs API JavaScript associées, offrent un contrôle avancé sur la lecture et la gestion des médias.

Styles CSS3

CSS3 introduit de nombreuses améliorations par rapport à CSS2.1, notamment :

• Sélectionneurs Avancés : Sélecteurs d'attributs, sélecteurs structurels (:nth-child, :first-child), pseudo-classes et pseudo-éléments.
• Modules de Mise en Page :
  • Flexbox : Pour la disposition flexible d'éléments dans un conteneur.
  • Grid Layout : Pour créer des mises en page complexes en grille.
  • Multi-column Layout : Pour diviser le contenu en colonnes.
• Transformations : Fonctions pour appliquer des transformations 2D et 3D (translation, rotation, échelle, inclinaison) aux éléments.
• Transitions : Permettent de créer des animations fluides lors des changements de propriétés CSS.
• Animations : Utilisation de @keyframes pour définir des animations complexes et répétitives.
• Arrière-plans et Bordures : Propriétés étendues comme background-size, border-radius, box-shadow.
• Texte et Polices : Gestion améliorée des polices web (@font-face), propriétés pour le rendu du texte.
• Requêtes Média (Media Queries) : Pour adapter le style en fonction des caractéristiques de l'appareil (taille de l'écran, résolution, orientation).
• Filtres CSS : Application d'effets visuels (flou, luminosité, contraste) directement sur les éléments.
• Variables CSS (Custom Properties) : Permettent de définir des valeurs réutilisables dans les feuilles de style.

/* Exemple Flexbox */
.conteneur-flex {
 display: flex;
 justify-content: space-around;
 align-items: center;
}

/* Exemple de Transition */
.boite {
 width: 100px;
 height: 100px;
 background-color: blue;
 transition: background-color 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.boite:hover {
 background-color: red;
 transform: scale(1.2);
}

/* Exemple de Media Query */
@media (max-width: 768px) {
 .colonne {
   width: 100%;
   float: none;
 }
}