HTML Example document

Il n'est pas rare que lorsque vous commenciez votre apprentissage du web (en général HTML et CSS) **on vous épargne la compréhension du fichier HTML minimal nécessaire au navigateur** pour l'interpréter comme étant un document web. Et bien aujourd'hui c'est le moment de plonger ensemble dans **ces quelques lignes et de comprendre leur utilité, leur fonctionnement et leur impact.** Pour commencer, prenons notre fichier minimal de référence : ``` HTML Example document ``` ## Le doctype La première chose à savoir, c'est que le format HTML est **en réalité une spécification basée sur un autre langage appelé XML** : ``` Tove Jani Reminder Don't forget me this weekend! ``` **Le XML est un langage à balises extensible, ce qui signifie que vous pouvez créer autant de balises que vous voulez** pour les besoins de votre application (ici un système de gestion de notes). Mais pour vérifier que le format des données écrites dans le fichier correspond bien à celui attendu par l'application, **il est nécessaire de lui accoler un schéma de référence, ce format on l'appelle DTD** pour "Document Type Definition". Son but sera par exemple d'indiquer que chaque devra être composé d'exactement un expéditeur , un receveur , etc... > Et comme vous le voyez, le format pour relier un document XML à son fichier de DTD se fait avec la balise DOCTYPE, comme dans notre document HTML. Dans notre page web, le "Document Type Definition" indique simplement que le navigateur doit se référer au schéma de la dernière version HTML en vigueur **afin de pouvoir confirmer que toutes les balises utilisées sont valides et correctement utilisées.** ## L'élément racine ``` ... ``` Comme vu précédemment, chaque document HTML doit être un document XML valide, et **l'une des caractéristiques d'un document XML est d'avoir [un élément racine](https://en.wikipedia.org/wiki/Root_element) (et un seul).** **C'est le point d'entrée du document, celui par lequel l'interpréteur va commencer à parcourir le document**, en l’occurrence pour une page web celui-ci doit s'appeler , et il peut contenir certains attributs, dont le principal reste la langue du document. ## L'en-tête ``` ... ``` L'en-tête d'une page web a un rôle très particulier car elle contient **toutes les informations et les fichiers qui devront être chargés en premier.** Cela signifie que si vous incluez des fichiers trop lourds directement dans l'en-tête du document, **alors votre page ne commencera à s'afficher que lorsque toute l'en-tête aura été chargée, et pas avant.** C'est dans l'en-tête que l'on va retrouver toutes les métadonnées de la page : ### Les méta-données **Les "meta-data" (ou métadonnées) sont des données qui décrivent le document lui-même.** Par exemple dans les métadonnées d'un document texte vous pourriez retrouver le nom du fichier, le nom de l'auteur, la date de création, etc... > Beaucoup d'informations qui ne vous seront pas forcément utiles à la lecture du fichier, mais qui pourront l'être pour d'autres usages. Et bien pour un document web, c'est la même chose. La première métadonnée que l'on va retrouver est son titre : ``` HTML Example document ``` > D'ailleurs vous pouvez voir qu'il est chargé avant tout le reste, car il apparait dans le titre de l'onglet navigateur avant que la page n'apparaisse Mais aussi d'autres métadonnées comme l'encodage des caractères, la taille et le comportement du viewport et pleins d'autres choses : ``` ... ... ``` **Il existe des dizaines de métadonnées différentes**, dont certaines pour l'affichage de vos liens sur les réseaux sociaux par exemple : ::: bookmark [![](https://blog.nicolas.brondin-bernard.com/content/2020/06/austin-distel-tLZhFRLj6nY-unsplash.jpg)Comment personnaliser le partage de votre site sur les réseaux sociaux avec OpenGraph - Nicolas Brondin-Bernard](https://blog.nicolas.brondin-bernard.com/comment-personnaliser-le-partage-de-votre-site-sur-les-reseaux-sociaux-avec-opengraph/) ::: À noter que les métadonnées jouent un rôle incontournable dans le référencement naturel (SEO), retrouvez toutes les autres métadonnées dans **[la documentation officielle du Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) !** ### Les liens En parallère du chargement des métadonnées, **les balises et ... ``` Certains fichiers modifierons le comportement de la page (JS et CSS) tandis que d'autres seront simplement utilisés par le navigateur (favicon, manifeste,...). > Le manifeste est par exemple utilisé pour déclarer une "Progressive Web App" (PWA), je vous invite à lire [cet article](https://code-garage.fr/un-manifeste-minimal-pour-creer-une-pwa/) si le sujet vous intéresse. ## Le corps ``` ... ``` Finalement, la balise contient **l'entièreté du contenu affichable de la page** et sera chargé une fois que le chargement de l'en-tête sera terminé. Et si vous voulez aller plus loin dans la compréhension du fonctionnement du web, je vous invite à lire mon article intitulé "[**Comment fonctionne un navigateur web ?**](https://code-garage.fr/comment-fonctionne-un-navigateur-web-version-technique/)".