recursal/MDN huggingface dataset:
HTML
====

**HTML** (HyperText Markup Language) est un langage descriptif qui définit la structure d'une page web.

Bref historique
---------------

En 1990, lorsqu'il présente sa vision du Web, Tim Berners-Lee définit le concept d'hypertexte, qu'il formalise l'année suivante avec un langage de balisage essentiellement basé sur SGML. L'IETF commence officiellement à spécifier le HTML en 1993, et publie la version 2.0 en 1995, après plusieurs versions de travail. En 1994, Berners-Lee fonde le W3C pour développer le Web. En 1996, le W3C reprend le travail sur le HTML et publie un an plus tard la recommandation HTML 3.2. HTML 4.0 fut publié en 1999 et devient une norme ISO en 2000.

À cette période, le W3C est sur le point d'abandonner le HTML au profit du XHTML, ce qui provoque la création d'un groupe indépendant appelé WHATWG en 2004. Grâce au WHATWG, le travail sur le HTML5 se poursuit : les deux organisations publient la première version de travail en 2008 puis la norme finale en 2014.

Concept et syntaxe
------------------

Un document HTML est un document texte brut structuré par des éléments. Les éléments sont encadrés par des balises ouvrantes et fermantes associées. Chaque balise commence et se termine par les caractères inférieur et supérieur (`<>`). Il existe quelques balises *vides* qui ne contiennent pas de texte, comme par exemple `<img>`.

On peut préciser les balises HTML avec des attributs pour fournir des informations complémentaires qui vont modifier la façon dont le navigateur va interpréter l'élément :

![Detail of the structure of an HTML element](/fr/docs/Glossary/HTML/anatomy-element-html.png)

Un fichier HTML est généralement enregistré avec une extension `.htm` ou `.html`. Il est mis à disposition par un serveur web, et le rendu est réalisé par un navigateur Web.

Pour en savoir plus
-------------------

### Culture générale

* HTML sur Wikipédia
### Apprendre le HTML

* Notre tutoriel HTML
* Les cours web sur codecademy.com
### Référence technique

* La documentation HTML sur MDN
* La spécification HTML
EDI
===

Un Environnement de Développement Intégré (**EDI**) ou Environnement de Développement Interactif est une application logicielle qui fournit des facilités complètes aux programmeurs pour le développemet de logiciels. Un EDI est constitué normalement d'un éditeur de code source, d'outils pour automatiser la compilation et d'un débogueur.

Pour en savoir plus
-------------------

### Culture générale

* Environnement de développement sur Wikipédia
Directive de récupération
=========================

Les **directives de récupération CSP** sont utilisées dans un en-tête de `politique de sécurité de contenu` et contrôlent les emplacements à partir desquels certaines ressources peuvent être chargées. Par exemple, `script-src` permet aux développeurs d'autoriser l'exécution de sources de script sur une page, tandis que `font-src` contrôle les sources des polices de caractères web.

Toutes les directives de récupération reviennent à `default-src`. Cela signifie que si une instruction fetch est absente dans l'en-tête CSP, l'agent utilisateur recherchera la directive default-src.

Ces directives CSP sont :

* `child-src`
* `connect-src`
* `default-src`
* `font-src`
* `frame-src`
* `img-src`
* `manifest-src`
* `media-src`
* `object-src`
* `script-src`
* `style-src`
* `worker-src`
Voir aussi
----------

* `Politique de sécurité de contenu`
* Autres types de directives:
    + Directives de document
    + Directives de navigation
    + Directives de rapport
Désérialisation
===============

Le processus par lequel un format de niveau inférieur (par exemple, qui a été transféré sur un réseau ou stocké dans un magasin de données) est traduit en un objet lisible ou une autre structure de données.

En JavaScript, par exemple, vous pouvez désérialiser une chaîne de caractères JSON vers un objet en appelant la fonction `JSON.parse()`.

Voir aussi
----------

### Culture générale

* Sérialisation sur Wikipédia
XLink
=====

XLink est un standard du W3C qui sert à décrire des liens entre documents XML ou entre XML et d'autres documents. Un certain nombre de ses comportements est laissé à l'implémentation qui détermine comment ils doivent être gérés.

Des XLinks simples sont "pris en charge" dans Firefox (au moins dans SVG et MathML), bien qu'ils ne fonctionnent pas comme des liens dans le cas où un document XML brut avec des XLinks est chargé et qu'une tentative est faite pour cliquer sur des points particuliers de l'arborescence XML.

Pour ceux qui ont trouvé XLink 1.0 lourd pour les liens normaux, XLink 1.1 supprime la nécessité de spécifier `xlink:type="simple"` pour les liens simples.

XLink est utilisé dans SVG, MathML et d'autres standards importants.

### Spécification

* XLink 1.0
* XLink 1.1 (actuellement au stade de brouillon de travail)
### Voir aussi

* XML dans Mozilla
* Code snippets:getAttributeNS - un wrapper à utiliser avec les navigateurs qui ne supportent par cette méthode DOM
* Code snippets:xml:base function - une tentative grossière de trouver un XLink complet en se basant sur un attribut xlink:href (ou <xi:include href=>) et sur son xml:base ou celui de son ancêtre.
Codet (code unit)
=================

Un **codet** (*code unit* en anglais) correspond au composant élémentaire utilisé par un système d'encodage des caractères (comme UTF-8 ou UTF-16). Un système d'encodage des caractères utilise un ou plusieurs codets pour encoder un point de code Unicode.

En UTF-16 (le système d'encodage utilisé pour les chaînes de caractères en JavaScript), les codets sont des valeurs sur 16 bits. Cela signifie que les opérations pour manipuler les index ou obtenir la longueur d'une chaîne de caractères manipulent ces codets de 16 bits. Toutefois, ces unités ne correspondent pas toujours exactement à ce que nous interprétons comme étant des caractères.

Par exemple, certains caractères avec des diacritiques comme des accents peuvent être représentés en UTF-16 à l'aide de deux codets :


```js
const maChaine = "\u006E\u0303";
console.log(maChaine); // ñ
console.log(maChaine.length); // 2
```


De plus, 16 bits ne suffisent pas à exprimer tous les points de code définis par Unicode. De nombreux points de code Unicode sont encodés à l'aide d'une paire de deux codets UTF-16 (parfois appelés demi-codets ou *surrogate pair* en anglais) :


```js
const visage = "🥵";
console.log(visage.length); // 2
```


La méthode JavaScript `codePointAt()` de l'objet `String` permet de récupérer les codets Unicode à partir de la forme encodée :


```js
const visage = "🥵";
console.log(visage.codePointAt(0)); // 129397 soit 0x1F975 en hexadécimal
```

Voir aussi
----------

* Gestion des caractères UTF-16, points de code Unicode et groupes de graphèmes
* La FAQ sur l'encodage Unicode (en anglais)
CSRF
====

**CSRF** (Cross-Site Request Forgery) est une attaque qui usurpe l'identité d'un utilisateur de confiance et envoie des commandes non désirées sur un site web. Cela peut être réalisé, par exemple, en ajoutant des paramètres malveillants dans une URL associée à un lien qui prétend aller quelque part ailleurs.

Voir aussi
----------

### Culture générale

* *Cross-site request forgery* sur Wikipédia
* Mesures de prévention (en)
* Tutoriel sur la sécurité, sur MDN
First input delay
=================

La métrique ***first input delay*** (FID) (qu'on pourrait traduire en « délai à la première saisie ») correspond à la durée entre la première interaction d'une personne avec le site web (que ce soit un clic sur un lien, un appui sur un bouton, ou l'utilisation d'un contrôle implémenté en JavaScript) et le moment où le navigateur est effectivement capable de réagir à cette interaction.

Le défilement et le zoom ne sont pas comptabilisés parmi ces premières interactions.

Le temps entre le moment où le contenu est affiché sur la page et le moment où l'ensemble des fonctionnalités sont réactives pour les humains varie souvent selon la taille et la complexité du JavaScript qui doit être téléchargé, analysé, puis exécuté sur le fil d'exécution principal, et selon les performances de l'appareil sous-jacent. Plus le délai sera important, plus l'expérience de navigation sera dégradée. Réduire le temps d'initialisation du site et éliminer les tâches longues peut aider à améliorer cette métrique.

Voir aussi
----------

* `requestIdleCallback()`
* Chargement fainéant (*lazy loading*)
CSS Object Model (CSSOM)
========================

Le **modèle d'objet CSS (ou *CSS object model* en anglais, abrégé en CSSOM)** est un ensemble d'API permettant de lire et de modifier les informations relatives au style (CSS) d'un document. En d'autres termes, de la même manière que le DOM permet de lire et de modifier la structure et le contenu d'un document à partir de JavaScript, le CSSOM permet de lire et de modifier le style du document à partir de JavaScript.

Voir aussi
----------

* Remplir la page : comment fonctionnent les navigateurs
Chasse
======

La **chasse** (ou **avance**) est l'espace total occupé par le glyphe, horizontalement ou verticalement, selon la direction d'écriture actuelle. Elle est égale à la distance parcourue par le curseur, placé directement devant puis décalé derrière le caractère.

Ce terme est utilisé dans la définition d'un certain nombre d'unités de longueur CSS : `<length>`. La *chasse* de l'unité `ch` est soit la largeur, soit la hauteur du caractère « 0 » dans la police de caractères donnée, selon que ce soit l'axe horizontal ou vertical qui est utilisé. Une *chasse* similaire de l'unité `ic` est la largeur ou la hauteur du caractère « 水 ».

Voir aussi
----------

* `<length>`
Adresse IP
==========

Une adresse IP est une série de chiffres assignée à chaque appareil connecté à un réseau qui utilise le protocole Internet.

Le terme "Adresse IP" se réfère généralement à des adresses IPv4 sur 32 bits. L'IPv6 n'est pas encore très répandu.

Voir aussi
----------

### Culture générale

* Adresse IP sur Wikipédia
Serveur
=======

Un serveur matériel est un ordinateur partagé sur un réseau qui fournit des services à des clients. Un serveur logiciel est un programme qui fournit des services à des programmes clients.

Les services sont généralement fournis sur des réseaux locaux ou sur des réseaux étendus. Un programme client et un programme serveur se connectent habituellement en s'échangeant des messages codés en utilisant un protocole.

Les serveurs les plus courants sur les réseaux locaux sont les serveurs de fichiers, de noms, de courrier électronique, d'impression et de fax. Un serveur Web connecté à Internet est un autre exemple de serveur classique. Les mini-ordinateurs, les mainframes et les super-ordinateurs des datacenters sont aussi des serveurs.

Pour approfondir
----------------

### Culture générale

* Introduction aux serveurs
* Serveur informatique sur Wikipédia
Wrapper
=======

Dans les langages de programmation tels que JavaScript, un wrapper est une fonction qui est destinée à appeler une ou plusieurs autres fonctions, parfois purement par commodité, et parfois en les adaptant pour faire une tâche légèrement différente dans le processus.

Voir aussi
----------

### Culture générale

* Fonction *wrapper* sur Wikipédia
En-tête de métadonnées de requête de récupération
=================================================

Un **en-tête de métadonnées de requête de récupération** (*fetch metadata request header* en anglais) est un en-tête de requête HTTP qui fournit des informations supplémentaires sur le contexte d'origine de la requête. Cela permet au serveur de décider si une requête doit être autorisée selon son emplacement d'origine et la façon dont la ressource sera utilisée.

Grâce à ces informations, un serveur peut implémenter une politique d'isolation des ressources, pour limiter l'accès aux seules ressources partageables pour les sites externes, lorsque l'usage correspondant est respecté. Cette approche permet de réduire les risques des vulnérabilités entre sites différents, comme CSRF, *Cross-site Script Inclusion* (XSSI), les attaques temporelles, et les fuites d'information entre origines.

Ces en-têtes ont le préfixe `Sec-`, et sont donc des noms d'en-tête interdits, qui ne peuvent pas être modifié depuis du code JavaScript.

Les en-têtes de métadonnées de requête de récupération sont :

* `Sec-Fetch-Site` (en-US)
* `Sec-Fetch-Mode` (en-US)
* `Sec-Fetch-User` (en-US)
* `Sec-Fetch-Dest` (en-US)

Quant aux en-têtes de requêtes qui suivent, ils ne font pas *strictement* partie des en-têtes de métadonnées de requête de récupération (au sens où ils ne font pas partie de la même spécification), mais fournissent également des informations sur la façon dont une ressource sera utilisée. Un serveur pourra utiliser les en-têtes suivants pour modifier son comportement de mise en cache ou les informations qui seront renvoyées :

* `Sec-Purpose` (en-US)
Expérimental
* `Service-Worker-Navigation-Preload` (en-US)
Voir aussi
----------

* Protéger vos ressources des attaques web avec les en-têtes de métadonnées de requête (en anglais)
* Bac à sable pour les en-têtes de métadonnées de requête (en anglais)
* Liste des en-têtes HTTP
* En-têtes HTTP > En-têtes de métadonnées de requête
* Entrées du glossaire
    + En-tête de représentation
    + En-tête HTTP
    + En-tête de réponse
    + En-tête de requête
Contexte d'application
======================

Un **contexte d'application** est un contexte de navigation de haut niveau lié à un manifeste.

Le contexte d'application peut être créé suite à une requête à l'agent utilisateur visant à naviguer vers un lien en profondeur. Dans ce cas, l'agent utilisateur doit immédiatement naviguer vers le lien en profondeur avec l'option de remplacement (*replacement*) activée. Autrement, quand le contexte d'application est créé, l'agent utilisateur doit immédiatement naviguer vers l'URL de départ avec cette même option activée.

Attention, l'URL de départ n'est pas nécessairement la valeur du membre start\_url : l'utilisateur ou l'agent utilisateur pourraient l'avoir modifié lorsque l'application a été ajoutée à l'écran d'accueil ou mise en favoris.
SVG
===

*Scalable Vector Graphics* (**SVG**) est un format d'image vectorielle 2D basé sur une syntaxe XML.

Le W3C a commencé à travailler sur SVG à la fin des années 90, mais SVG n'est devenu populaire qu'avec la sortie d'Internet Explorer 9, supportant le SVG. Tous les principaux navigateurs le prennent maintenant en charge.

Basé sur une syntaxe XML, SVG peut être stylé avec CSS et être rendu interactif grâce à JavaScript. HTML5 permet à présent d'intégrer directement des balises SVG au sein d'un document HTML.

SVG étant un format d'image vectorielle, les images SVG peuvent être redimensionnées à l'infini, ce qui les rend inestimables pour la conception web adaptative, car elles permettent de créer des éléments d'interface qui s'adaptent à toutes les tailles d'écran. SVG fournit également un ensemble d'outils, comme du clipping, des masques, des filtres et des animations.

Voir aussi
----------

### Culture générale

* SVG sur Wikipédia
### Apprendre le SVG

* W3.org – SVG Primer
### Informations techniques

* Documentation SVG sur MDN
* Dernière spécification SVG
Limitation de la bande passante
===============================

**La limitation de la bande passante** est un ralentissement intentionnel de la vitesse d'Internet. Lorsqu'on souhaite améliorer les performances web, on utilise cette technique afin d'émuler les conditions de faible bande passante probablement rencontrées par une large part du public cible d'un site.

Il est important de ne pas négliger les conditions du réseau rencontrées par les personnes utilisant leur mobile. La bande passante utilisée par les équipes de développement d'une application web sur des ordinateurs puissants, depuis un immeuble de bureaux est assez élevée. C'est dans de bonnes conditions que les équipes de développement, conception et rédaction technique testent une application web. En revanche, pour une personne utilisant un mobile pour accéder à l'application, éventuellement en voyage ou depuis une région éloignée, avec une mauvaise couverture ou un faible forfait de données, cette bande passante sera probablement très réduite (si elle est déjà suffisante pour se connecter au préalable). La limitation de la bande passante permet aux équipes de développement d'émuler l'expérience d'une telle personne dans un scénario moins favorable. La plupart des outils de développement de navigateur, tels que l'inspecteur , fournissent une fonction permettant d'émuler différentes conditions de réseau. En émulant l'expérience de votre public via cette limitation, vous pouvez identifier et résoudre plus facilement les éventuels problèmes de temps de chargement.

Les outils de développement du navigateur ont généralement des options de limitation du réseau, pour vous permettre de tester votre application dans des conditions de réseau lentes.

* Firefox (en anglais)
    + Moniteur réseau
    + Vue adaptative
* Chrome (en anglais)
    + Réseau
* Edge (en anglais)
    + Conditions réseau
Voir aussi
----------

* Surveillance synthétique (en-US)
WebExtensions
=============

Les WebExtensions constituent un système multinavigateur pour développer des extensions de navigateur dans Firefox. Ce système fournit des API qui sont dans une large mesure prises en charge dans différents navigateurs tels que Mozilla Firefox, Google Chrome, Opera et Microsoft Edge.

Voir aussi
----------

### Informations techniques

* Extensions pour navigateur sur MDN web docs
Fil d'exécution principal
=========================

Le **fil d'exécution principal** (*Main Thread* en anglais) correspond à l'étape où le navigateur traite les évènements et la peinture demandée par l'internaute. Par défaut, le navigateur utilise un fil d'exécution unique pour lancer tout le JavaScript de la page, ainsi que pour créer la mise en page, le *reflow*, et la gestion de la mémoire. Cela signifie que les fonctions JavaScript exécutées sur le long terme peuvent bloquer le fil d'exécution, ce qui conduit à un affichage peu réactif et donc a une mauvaise expérience utilisateur.

À moins d'utiliser volontairement un *web worker* tel qu'un *service worker*, JavaScript se lance sur le fil d'exécution principal. Il est donc courant de voir des scripts retarder le traitement des évènements et de la peinture de la page. Moins il y a de travail à réaliser sur le fil d'exécution principal, mieux ce fil pourra réagir aux évènements générés par l'internaute, et plus la page apparaitra comme étant réactive pour les internautes.

Voir aussi
----------

* JavaScript asynchrone
* API Web worker
* API Service worker
* Fil d'exécution (entrée du glossaire)
Moteur de rendu
===============

Un **moteur de rendu** est un logiciel qui trace du texte et des images à l'écran. Le moteur dessine du texte structuré à partir d'un document (souvent du HTML), et le met en page correctement en se basant sur les déclarations de styles données (souvent indiquées dans des CSS). Exemples de moteurs d'affichage : Blink, Gecko, Edge, WebKit.

Pour en savoir plus
-------------------

### Culture générale

* Moteur de rendu HTML sur Wikipédia
### Référence technique

* Documentation Gecko
* Venkatraman.R - Behind Browsers (Part 1, Basics)
SOAP
====

**SOAP** (Simple Object Access Protocol) est un protocole de transmission de données au format XML. Firefox a supprimé le support de SOAP en 2008.

Voir aussi
----------

### Culture générale

* SOAP sur Wikipédia
* SOAP dans les navigateurs basés sur Gecko
### Référence technique

* Spécification
Fonction anonyme auto-exécutante
================================

Une fonction JavaScript qui se lance dès qu'elle est définie. Aussi connu en tant que IIFE (*Immediately Invoked Function Expression* ou Expression-fonction immédiatement invoquée).

Voir IIFE pour plus d'informations.
CRLF
====

CR et LF sont des caractères de contrôle ou bytecode qui peuvent être utilisés pour indiquer une fin de ligne dans un fichier texte.

* CR = **Carriage Return** *(Retour chariot)* (`\r`, `0x0D` en hexadécimal, 13 en décimal) — déplace le curseur au début de la ligne sans avancer à la ligne suivante.
* LF = **Line Feed, Saut de ligne (**`\n`, `0x0A` en hexadécimal, 10 en décimal\*\*) —\*\* déplace le curseur vers la ligne suivante sans retour au début de la ligne.

Un CR tout de suite suivi par un LF (CRLF, `\r\n`, ou `0x0D0A`) descend le curseur vers la ligne suivante et le place au début de la ligne.

Voir aussi
----------

### Culture générale

* Fin de ligne sur Wikipédia
* Retour chariot sur Wikipédia
Camel case
==========

Le ***camel case*** (généralement utilisé en anglais, qu'on pourrait traduire en « casse de chameau ») est une façon d'écrire des suites de mots sans espace, en mettant en majuscule la première lettre de chaque mot en majuscule (à l'exception de la toute première lettre de la séquence qui pourra être en minuscule ou en majuscule). Le nom de cette notation provient de la ressemblance entre la graphie de CamelCase et le dos d'un chameau (où les deux bosses reprennent la forme des C majuscules).

Cette notation est généralement utilisée comme convention pour le nommage des variables et est par exemple utilisée en JavaScript. Voici des exemples de noms écrits en *camel case* :

* `console`
* `crossOriginIsolated`
* `encodeURIComponent`
* `ArrayBuffer`
* `HTMLElement`

Si la séquence de mots contient des acronymes (comme `URI` et `HTML`), les pratiques peuvent varier. Parfois, on garde l'ensemble de l'acronyme en majuscules (voir `encodeURIComponent` ci-avant). Si plusieurs acronymes se suivent, cela peut réduire la lisibilité et être source de confusion, par exemple avec `XMLHTTPRequest` et certains préfèrent n'écrire que la première lettre de chaque mot en majuscule (`XmlHttpRequest`). Pour cet exemple, la variable globale actuelle, `XMLHttpRequest`, utilise une combinaison des deux.

Lorsque la première lettre de la séquence est toujours écrite en majuscule, on parlera de *Pascal case* (également utilisé tel quel en français).

Le *camel case* est utilisé par convention en JavaScript, Java et dans d'autres langages de programmation.

Voir aussi
----------

* Le *snake case* qui consiste à utiliser des tirets bas comme séparateurs (`snake_case`) (en-US)
* Le *kebab case* qui consiste à utiliser des tirets comme séparateurs (`kebab-case`) (en-US)
* La règle `naming-convention` de typescript-eslint
Applications web progressistes
==============================

*Applications web progressistes* (Progressive web apps) est une locution utilisée pour décrire une manière moderne de développer des applications web. Cela consiste à utiliser des sites ou applications web classiques qui profitent du meilleur du web — comme la possibilité d'apparaître avec les moteurs de recherche, le fait d'être lié par les URL ou encore la capacité à fonctionner sur tout type d'environnement —, d'y ajouter des API modernes (comme les Service Workers et les notifications Push) et des fonctionnalités qui offrent d'autres avantages habituellement réservés aux applications natives.

Ces fonctionnalités incluent : la possibilité d'installer l'application, de fonctionner hors-ligne, d'être facile à synchroniser ou encore d'interagir avec l'utilisateur à l'initiative du serveur.

Voir aussi
----------

* Les Applications sur MDN
* Progressive web apps sur Google Developers.