[{"data":1,"prerenderedAt":754},["ShallowReactive",2],{"page-\u002Fhtml\u002Fstructure-du-document":3,"pieces-html":711,"autour-\u002Fhtml\u002Fstructure-du-document":736,"prerequis-\u002Fhtml\u002Fstructure-du-document":741,"plan-html":743},{"id":4,"title":5,"body":6,"description":682,"extension":683,"ligne":54,"meta":684,"motsCles":685,"navigation":690,"niveau":691,"path":692,"prerequis":693,"ressources":695,"seo":703,"sources":704,"stem":709,"__hash__":710},"docs\u002Fhtml\u002F02.structure-du-document.md","La structure d'un document",{"type":7,"value":8,"toc":668},"minimark",[9,14,40,44,48,221,224,228,234,237,241,250,260,264,274,344,350,354,365,371,375,400,403,407,412,418,422,429,453,464,468,488,547,585,598,602,605,608,618,622,664],[10,11,13],"h2",{"id":12},"ce-que-tu-vas-apprendre","Ce que tu vas apprendre",[15,16,17,34,37],"ul",{},[18,19,20,21,25,26,29,30,33],"li",{},"Le rôle du doctype, de ",[22,23,24],"code",{},"\u003Chtml>",", de ",[22,27,28],{},"\u003Chead>"," et de ",[22,31,32],{},"\u003Cbody>",".",[18,35,36],{},"Les informations utiles à placer dans l'en-tête de la page.",[18,38,39],{},"Écrire un commentaire et afficher des caractères spéciaux.",[10,41,43],{"id":42},"le-squelette","Le squelette",[45,46,47],"p",{},"Chaque page HTML commence par le même squelette :",[49,50,56],"pre",{"className":51,"code":52,"filename":53,"language":54,"meta":55,"style":55},"language-html shiki shiki-themes github-light-default github-dark-default github-dark-default","\u003C!doctype html>\n\u003Chtml lang=\"fr\">\n  \u003Chead>\n    \u003Cmeta charset=\"utf-8\">\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    \u003Ctitle>Gratin dauphinois\u003C\u002Ftitle>\n  \u003C\u002Fhead>\n  \u003Cbody>\n    \u003Ch1>Gratin dauphinois\u003C\u002Fh1>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n","index.html","html","",[22,57,58,78,98,109,128,153,168,178,188,202,211],{"__ignoreMap":55},[59,60,63,67,71,75],"span",{"class":61,"line":62},"line",1,[59,64,66],{"class":65},"scfrF","\u003C!",[59,68,70],{"class":69},"s5JFL","doctype",[59,72,74],{"class":73},"s5iOY"," html",[59,76,77],{"class":65},">\n",[59,79,81,84,86,89,92,96],{"class":61,"line":80},2,[59,82,83],{"class":65},"\u003C",[59,85,54],{"class":69},[59,87,88],{"class":73}," lang",[59,90,91],{"class":65},"=",[59,93,95],{"class":94},"shWOn","\"fr\"",[59,97,77],{"class":65},[59,99,101,104,107],{"class":61,"line":100},3,[59,102,103],{"class":65},"  \u003C",[59,105,106],{"class":69},"head",[59,108,77],{"class":65},[59,110,112,115,118,121,123,126],{"class":61,"line":111},4,[59,113,114],{"class":65},"    \u003C",[59,116,117],{"class":69},"meta",[59,119,120],{"class":73}," charset",[59,122,91],{"class":65},[59,124,125],{"class":94},"\"utf-8\"",[59,127,77],{"class":65},[59,129,131,133,135,138,140,143,146,148,151],{"class":61,"line":130},5,[59,132,114],{"class":65},[59,134,117],{"class":69},[59,136,137],{"class":73}," name",[59,139,91],{"class":65},[59,141,142],{"class":94},"\"viewport\"",[59,144,145],{"class":73}," content",[59,147,91],{"class":65},[59,149,150],{"class":94},"\"width=device-width, initial-scale=1\"",[59,152,77],{"class":65},[59,154,156,158,161,164,166],{"class":61,"line":155},6,[59,157,114],{"class":65},[59,159,160],{"class":69},"title",[59,162,163],{"class":65},">Gratin dauphinois\u003C\u002F",[59,165,160],{"class":69},[59,167,77],{"class":65},[59,169,171,174,176],{"class":61,"line":170},7,[59,172,173],{"class":65},"  \u003C\u002F",[59,175,106],{"class":69},[59,177,77],{"class":65},[59,179,181,183,186],{"class":61,"line":180},8,[59,182,103],{"class":65},[59,184,185],{"class":69},"body",[59,187,77],{"class":65},[59,189,191,193,196,198,200],{"class":61,"line":190},9,[59,192,114],{"class":65},[59,194,195],{"class":69},"h1",[59,197,163],{"class":65},[59,199,195],{"class":69},[59,201,77],{"class":65},[59,203,205,207,209],{"class":61,"line":204},10,[59,206,173],{"class":65},[59,208,185],{"class":69},[59,210,77],{"class":65},[59,212,214,217,219],{"class":61,"line":213},11,[59,215,216],{"class":65},"\u003C\u002F",[59,218,54],{"class":69},[59,220,77],{"class":65},[45,222,223],{},"Chaque ligne a un rôle. Voyons-les de haut en bas.",[10,225,227],{"id":226},"le-doctype","Le doctype",[45,229,230,233],{},[22,231,232],{},"\u003C!doctype html>"," est la toute première ligne. Ce n'est pas un élément, mais une déclaration qui dit au navigateur : « ce document est du HTML moderne ».",[45,235,236],{},"Sans elle, le navigateur passe dans un mode de compatibilité pour les très vieilles pages, et l'affichage peut changer de façon surprenante. Écris-la toujours.",[10,238,240],{"id":239},"lélément-html","L'élément html",[45,242,243,245,246,33],{},[22,244,24],{}," contient tout le reste de la page. On l'appelle l'",[247,248,249],"strong",{},"élément racine",[45,251,252,253,256,257,33],{},"Son attribut ",[22,254,255],{},"lang"," donne la langue du contenu. C'est important : les lecteurs d'écran l'utilisent pour choisir la bonne prononciation, et les navigateurs pour proposer une traduction. Pour du français, écris ",[22,258,259],{},"lang=\"fr\"",[10,261,263],{"id":262},"le-head-les-informations-sur-la-page","Le head : les informations sur la page",[45,265,266,267,269,270,273],{},"L'élément ",[22,268,28],{}," (l'",[247,271,272],{},"en-tête",") regroupe les informations sur la page. Rien de ce qu'il contient ne s'affiche dans la page elle-même.",[275,276,277,290],"table",{},[278,279,280],"thead",{},[281,282,283,287],"tr",{},[284,285,286],"th",{},"Élément",[284,288,289],{},"Rôle",[291,292,293,304,314,324,334],"tbody",{},[281,294,295,301],{},[296,297,298],"td",{},[22,299,300],{},"\u003Cmeta charset=\"utf-8\">",[296,302,303],{},"Indique l'encodage des caractères",[281,305,306,311],{},[296,307,308],{},[22,309,310],{},"\u003Cmeta name=\"viewport\" ...>",[296,312,313],{},"Adapte la page à la largeur d'un téléphone",[281,315,316,321],{},[296,317,318],{},[22,319,320],{},"\u003Ctitle>",[296,322,323],{},"Titre de la page, affiché dans l'onglet",[281,325,326,331],{},[296,327,328],{},[22,329,330],{},"\u003Cmeta name=\"description\" ...>",[296,332,333],{},"Résumé, souvent repris par les moteurs de recherche",[281,335,336,341],{},[296,337,338],{},[22,339,340],{},"\u003Clink rel=\"stylesheet\" ...>",[296,342,343],{},"Relie une feuille de style CSS",[45,345,346,347,349],{},"Le titre ",[22,348,320],{}," compte beaucoup. Il apparaît dans l'onglet, dans les favoris et dans les résultats d'un moteur de recherche. Donne à chaque page un titre différent et précis.",[10,351,353],{"id":352},"lencodage-des-caractères","L'encodage des caractères",[45,355,356,357,360,361,364],{},"L'",[247,358,359],{},"encodage"," décide comment les lettres sont stockées dans le fichier. Avec ",[22,362,363],{},"charset=\"utf-8\"",", tu peux écrire sans souci les accents, les cédilles et le symbole euro.",[45,366,367,368,370],{},"Mets cette balise en premier dans le ",[22,369,28],{},". Enregistre aussi ton fichier en UTF-8, ce que ton éditeur fait en général par défaut. Si tu vois des symboles bizarres à la place de « é », c'est un problème d'encodage.",[10,372,374],{"id":373},"le-viewport","Le viewport",[49,376,378],{"className":51,"code":377,"language":54,"meta":55,"style":55},"\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n",[22,379,380],{"__ignoreMap":55},[59,381,382,384,386,388,390,392,394,396,398],{"class":61,"line":62},[59,383,83],{"class":65},[59,385,117],{"class":69},[59,387,137],{"class":73},[59,389,91],{"class":65},[59,391,142],{"class":94},[59,393,145],{"class":73},[59,395,91],{"class":65},[59,397,150],{"class":94},[59,399,77],{"class":65},[45,401,402],{},"Sans cette ligne, un téléphone affiche la page comme sur un grand écran, puis la réduit. Avec elle, la page prend la largeur réelle de l'appareil. Tu en as besoin pour un site qui s'adapte aux mobiles.",[10,404,406],{"id":405},"le-body-le-contenu-visible","Le body : le contenu visible",[45,408,409,411],{},[22,410,32],{}," contient tout ce qui s'affiche : titres, textes, images, liens, formulaires. Il n'y en a qu'un par page.",[45,413,414,415,417],{},"Les chapitres suivants remplissent ce ",[22,416,32],{},". Tout ce que tu voudras montrer à l'utilisateur y prendra place.",[10,419,421],{"id":420},"les-commentaires","Les commentaires",[45,423,424,425,428],{},"Un ",[247,426,427],{},"commentaire"," est une note pour toi ou pour ton équipe. Le navigateur l'ignore.",[49,430,432],{"className":51,"code":431,"language":54,"meta":55,"style":55},"\u003C!-- À faire : ajouter la liste des ingrédients -->\n\u003Cp>Une recette de saison.\u003C\u002Fp>\n",[22,433,434,440],{"__ignoreMap":55},[59,435,436],{"class":61,"line":62},[59,437,439],{"class":438},"sd6ml","\u003C!-- À faire : ajouter la liste des ingrédients -->\n",[59,441,442,444,446,449,451],{"class":61,"line":80},[59,443,83],{"class":65},[59,445,45],{"class":69},[59,447,448],{"class":65},">Une recette de saison.\u003C\u002F",[59,450,45],{"class":69},[59,452,77],{"class":65},[45,454,455,456,459,460,463],{},"Il s'écrit entre ",[22,457,458],{},"\u003C!--"," et ",[22,461,462],{},"-->",". Ne mets jamais de secret dans un commentaire : n'importe qui peut lire le code source d'une page.",[10,465,467],{"id":466},"les-caractères-spéciaux","Les caractères spéciaux",[45,469,470,471,459,473,476,477,480,481,484,485,33],{},"Les signes ",[22,472,83],{},[22,474,475],{},">"," servent à écrire les balises. Pour les afficher comme texte, utilise une ",[247,478,479],{},"entité"," : un code qui commence par ",[22,482,483],{},"&"," et finit par ",[22,486,487],{},";",[275,489,490,500],{},[278,491,492],{},[281,493,494,497],{},[284,495,496],{},"Entité",[284,498,499],{},"Résultat",[291,501,502,513,524,535],{},[281,503,504,509],{},[296,505,506],{},[22,507,508],{},"<",[296,510,511],{},[22,512,83],{},[281,514,515,520],{},[296,516,517],{},[22,518,519],{},">",[296,521,522],{},[22,523,475],{},[281,525,526,531],{},[296,527,528],{},[22,529,530],{},"&",[296,532,533],{},[22,534,483],{},[281,536,537,542],{},[296,538,539],{},[22,540,541],{},""",[296,543,544],{},[22,545,546],{},"\"",[49,548,550],{"className":51,"code":549,"language":54,"meta":55,"style":55},"\u003Cp>Pour un titre, écris <h1>Mon titre<\u002Fh1>.\u003C\u002Fp>\n",[22,551,552],{"__ignoreMap":55},[59,553,554,556,558,561,564,566,568,571,573,576,578,581,583],{"class":61,"line":62},[59,555,83],{"class":65},[59,557,45],{"class":69},[59,559,560],{"class":65},">Pour un titre, écris ",[59,562,508],{"class":563},"sOnC1",[59,565,195],{"class":65},[59,567,519],{"class":563},[59,569,570],{"class":65},"Mon titre",[59,572,508],{"class":563},[59,574,575],{"class":65},"\u002Fh1",[59,577,519],{"class":563},[59,579,580],{"class":65},".\u003C\u002F",[59,582,45],{"class":69},[59,584,77],{"class":65},[586,587,588],"tip",{},[45,589,590,591,593,594,459,596,33],{},"Avec l'UTF-8, tu n'as pas besoin d'entités pour les accents ni pour « € » : tape-les directement. Les entités servent surtout pour ",[22,592,83],{},", ",[22,595,475],{},[22,597,483],{},[10,599,601],{"id":600},"les-espaces-ne-comptent-pas","Les espaces ne comptent pas",[45,603,604],{},"Le navigateur réduit toute suite d'espaces et de retours à la ligne à un seul espace. Écrire dix retours à la ligne dans un paragraphe n'ajoute aucun vide.",[45,606,607],{},"Cela te laisse libre d'indenter ton code pour qu'il reste lisible. Décale d'un cran (deux espaces) chaque élément imbriqué, comme dans l'exemple du début.",[609,610,611],"note",{},[45,612,613,614,617],{},"Pour séparer deux blocs de texte, utilise deux éléments ",[22,615,616],{},"\u003Cp>",", pas des retours à la ligne. L'espacement visuel se règle ensuite en CSS.",[10,619,621],{"id":620},"à-retenir","À retenir",[15,623,624,638,644,649,654],{},[18,625,626,627,629,630,633,634,459,636,33],{},"Une page commence par ",[22,628,232],{},", suivi de ",[22,631,632],{},"\u003Chtml lang=\"fr\">"," qui contient ",[22,635,28],{},[22,637,32],{},[18,639,640,641,643],{},"Le ",[22,642,28],{}," décrit la page (titre, encodage, viewport) sans rien afficher.",[18,645,646,648],{},[22,647,300],{}," règle l'encodage, et le viewport adapte la page aux mobiles.",[18,650,640,651,653],{},[22,652,32],{}," contient tout le contenu visible.",[18,655,656,657,660,661,663],{},"Un commentaire s'écrit ",[22,658,659],{},"\u003C!-- ... -->",", et les entités comme ",[22,662,508],{}," affichent les signes réservés.",[665,666,667],"style",{},"html pre.shiki code .scfrF, html code.shiki .scfrF{--shiki-light:#1F2328;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3}html pre.shiki code .s5JFL, html code.shiki .s5JFL{--shiki-light:#116329;--shiki-default:#7EE787;--shiki-dark:#7EE787}html pre.shiki code .s5iOY, html code.shiki .s5iOY{--shiki-light:#0550AE;--shiki-default:#79C0FF;--shiki-dark:#79C0FF}html pre.shiki code .shWOn, html code.shiki .shWOn{--shiki-light:#0A3069;--shiki-default:#A5D6FF;--shiki-dark:#A5D6FF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sd6ml, html code.shiki .sd6ml{--shiki-light:#6E7781;--shiki-default:#8B949E;--shiki-dark:#8B949E}html pre.shiki code .sOnC1, html code.shiki .sOnC1{--shiki-light:#CF222E;--shiki-default:#FF7B72;--shiki-dark:#FF7B72}",{"title":55,"searchDepth":80,"depth":100,"links":669},[670,671,672,673,674,675,676,677,678,679,680,681],{"id":12,"depth":80,"text":13},{"id":42,"depth":80,"text":43},{"id":226,"depth":80,"text":227},{"id":239,"depth":80,"text":240},{"id":262,"depth":80,"text":263},{"id":352,"depth":80,"text":353},{"id":373,"depth":80,"text":374},{"id":405,"depth":80,"text":406},{"id":420,"depth":80,"text":421},{"id":466,"depth":80,"text":467},{"id":600,"depth":80,"text":601},{"id":620,"depth":80,"text":621},"Le doctype, l'élément html, le head et le body forment le squelette de toute page HTML.","md",{},[70,686,106,185,687,688,160,427,479,689],"html lang","meta charset","viewport","UTF-8",true,"debutant","\u002Fhtml\u002Fstructure-du-document",[694],"\u002Fhtml\u002Fune-page-web",[696,700],{"nom":697,"url":698,"type":699},"MDN, Les métadonnées d'une page web","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FLearn_web_development\u002FCore\u002FStructuring_content\u002FWebpage_metadata","cours",{"nom":701,"url":702,"type":699},"MDN, Structurer un document","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FLearn_web_development\u002FCore\u002FStructuring_content\u002FStructuring_documents",{"title":5,"description":682},[705,706],{"nom":697,"url":698},{"nom":707,"url":708},"Standard HTML du WHATWG (en anglais)","https:\u002F\u002Fhtml.spec.whatwg.org\u002Fmultipage\u002F","html\u002F02.structure-du-document","JNVA7ilN6M9TGznq8xvDuzemT8TkbO-FMe275tcBmXo",[712,715,716,720,724,728,732],{"path":694,"title":713,"stem":714},"Qu'est-ce que HTML ?","html\u002F01.une-page-web",{"path":692,"title":5,"stem":709},{"path":717,"title":718,"stem":719},"\u002Fhtml\u002Ftexte-liens-images","Texte, liens et images","html\u002F03.texte-liens-images",{"path":721,"title":722,"stem":723},"\u002Fhtml\u002Flistes-et-tableaux","Listes et tableaux","html\u002F04.listes-et-tableaux",{"path":725,"title":726,"stem":727},"\u002Fhtml\u002Fsemantique-et-accessibilite","Sémantique et accessibilité","html\u002F05.semantique-et-accessibilite",{"path":729,"title":730,"stem":731},"\u002Fhtml\u002Fformulaires-et-validation","Formulaires et validation","html\u002F06.formulaires-et-validation",{"path":733,"title":734,"stem":735},"\u002Fhtml","HTML","html\u002Findex",[737,739],{"title":713,"path":694,"stem":714,"description":738,"children":-1},"Une page web est un fichier texte écrit en HTML, un langage de balises que le navigateur lit pour afficher la page.",{"title":718,"path":717,"stem":719,"description":740,"children":-1},"Structurer du texte avec des titres et des paragraphes, créer des liens entre pages et insérer des images.",[742],{"path":694,"title":713,"ligne":54},[744,745,746,747,749,750,752],{"path":694,"title":713,"niveau":691,"stem":714},{"path":692,"title":5,"niveau":691,"stem":709},{"path":717,"title":718,"niveau":691,"stem":719},{"path":721,"title":722,"niveau":748,"stem":723},"intermediaire",{"path":725,"title":726,"niveau":748,"stem":727},{"path":729,"title":730,"niveau":751,"stem":731},"avance",{"path":733,"title":734,"niveau":753,"stem":735},"memo",1794583441659]