[{"data":1,"prerenderedAt":3508},["ShallowReactive",2],{"blog-apprendre-html-complet":3},{"id":4,"title":5,"body":6,"coverImage":3495,"description":3496,"extension":3497,"meta":3498,"navigation":794,"path":3499,"published":794,"publishedAt":3500,"readTime":1658,"seo":3501,"stem":3502,"tags":3503,"__hash__":3507},"blog\u002Fblog\u002Fapprendre-html-complet.md","Apprendre HTML : guide complet pour construire une page web propre et bien structurée",{"type":7,"value":8,"toc":3398},"minimark",[9,14,19,23,26,29,32,36,39,67,71,74,77,82,85,89,92,96,99,103,106,123,126,130,133,320,324,331,334,339,345,352,357,363,377,382,387,391,394,405,409,412,415,433,444,448,451,453,480,486,490,493,497,500,510,554,558,570,575,593,597,600,604,633,637,666,670,694,700,704,707,732,736,761,765,834,838,849,853,859,888,892,922,928,934,945,948,952,976,979,983,1009,1015,1019,1045,1052,1055,1059,1062,1070,1073,1097,1100,1126,1132,1138,1160,1164,1167,1187,1194,1197,1203,1207,1210,1214,1274,1278,1338,1342,1391,1395,1398,1401,1415,1419,1462,1466,1697,1701,1704,1708,1711,1894,1898,1901,1905,1908,2056,2060,2082,2088,2094,2098,2135,2141,2146,2235,2241,2244,2250,2253,2257,2260,2265,2268,2272,2275,2279,2307,2311,2314,2318,2321,2904,2907,2911,2915,2918,2932,2935,2953,2957,2959,2986,2988,3013,3017,3020,3027,3033,3037,3059,3063,3066,3088,3091,3095,3099,3102,3106,3109,3113,3116,3120,3126,3130,3133,3137,3141,3184,3188,3244,3248,3272,3276,3300,3304,3387,3391,3394],[10,11,13],"h1",{"id":12},"apprendre-html","Apprendre HTML",[15,16,18],"h2",{"id":17},"introduction","Introduction",[20,21,22],"p",{},"HTML est la base de presque toutes les pages web.",[20,24,25],{},"Si vous souhaitez créer un site propre, lisible et bien structuré, vous devez d'abord comprendre comment fonctionne HTML. C'est lui qui décrit le contenu de la page : titres, paragraphes, images, liens, formulaires, tableaux et bien plus encore.",[20,27,28],{},"Contrairement à ce que beaucoup imaginent, HTML n'est pas un langage de programmation. Il ne sert pas à écrire de la logique. Il sert à structurer l'information pour que le navigateur puisse l'afficher correctement.",[20,30,31],{},"Dans ce chapitre, nous allons construire une vision claire de HTML, puis avancer pas à pas jusqu'à une page complète et bien organisée.",[15,33,35],{"id":34},"ce-que-vous-allez-apprendre","Ce que vous allez apprendre",[20,37,38],{},"À la fin de ce tutoriel, vous saurez :",[40,41,42,46,49,52,55,58,61,64],"ul",{},[43,44,45],"li",{},"comprendre le rôle exact de HTML ;",[43,47,48],{},"écrire une structure de page correcte ;",[43,50,51],{},"utiliser les balises principales ;",[43,53,54],{},"organiser du contenu avec des titres, paragraphes, listes, liens, images et tableaux ;",[43,56,57],{},"créer un formulaire simple ;",[43,59,60],{},"distinguer les balises sémantiques importantes ;",[43,62,63],{},"éviter les erreurs les plus fréquentes ;",[43,65,66],{},"construire une page HTML propre et lisible.",[15,68,70],{"id":69},"_1-html-cest-quoi-exactement","1. HTML, c'est quoi exactement ?",[20,72,73],{},"HTML signifie HyperText Markup Language.",[20,75,76],{},"Ce nom peut sembler impressionnant, mais l'idée est simple : HTML permet de baliser le contenu d'un document.",[78,79,81],"h3",{"id":80},"hypertext","HyperText",[20,83,84],{},"Le mot hypertexte fait référence au fait que les documents peuvent être reliés entre eux par des liens.",[78,86,88],{"id":87},"markup","Markup",[20,90,91],{},"Le balisage consiste à entourer le contenu de balises pour lui donner du sens.",[78,93,95],{"id":94},"language","Language",[20,97,98],{},"HTML est un langage de description de contenu, pas un langage de calcul.",[78,100,102],{"id":101},"ce-quhtml-fait-vraiment","Ce qu'HTML fait vraiment",[20,104,105],{},"HTML dit par exemple :",[40,107,108,111,114,117,120],{},[43,109,110],{},"ceci est un titre ;",[43,112,113],{},"ceci est un paragraphe ;",[43,115,116],{},"ceci est une image ;",[43,118,119],{},"ceci est un lien ;",[43,121,122],{},"ceci est un formulaire.",[20,124,125],{},"Le navigateur lit cette structure et construit la page à afficher.",[15,127,129],{"id":128},"_2-la-structure-de-base-dun-document-html","2. La structure de base d'un document HTML",[20,131,132],{},"Tout document HTML sérieux commence par une structure minimale.",[134,135,140],"pre",{"className":136,"code":137,"language":138,"meta":139,"style":139},"language-html shiki shiki-themes github-light github-dark","\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.0\">\n    \u003Ctitle>Mon premier site\u003C\u002Ftitle>\n  \u003C\u002Fhead>\n  \u003Cbody>\n    \u003Ch1>Bienvenue\u003C\u002Fh1>\n    \u003Cp>Voici ma première page HTML.\u003C\u002Fp>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html","",[141,142,143,163,183,194,213,238,253,263,273,287,301,310],"code",{"__ignoreMap":139},[144,145,148,152,156,160],"span",{"class":146,"line":147},"line",1,[144,149,151],{"class":150},"sVt8B","\u003C!",[144,153,155],{"class":154},"s9eBZ","DOCTYPE",[144,157,159],{"class":158},"sScJk"," html",[144,161,162],{"class":150},">\n",[144,164,166,169,171,174,177,181],{"class":146,"line":165},2,[144,167,168],{"class":150},"\u003C",[144,170,138],{"class":154},[144,172,173],{"class":158}," lang",[144,175,176],{"class":150},"=",[144,178,180],{"class":179},"sZZnC","\"fr\"",[144,182,162],{"class":150},[144,184,186,189,192],{"class":146,"line":185},3,[144,187,188],{"class":150},"  \u003C",[144,190,191],{"class":154},"head",[144,193,162],{"class":150},[144,195,197,200,203,206,208,211],{"class":146,"line":196},4,[144,198,199],{"class":150},"    \u003C",[144,201,202],{"class":154},"meta",[144,204,205],{"class":158}," charset",[144,207,176],{"class":150},[144,209,210],{"class":179},"\"UTF-8\"",[144,212,162],{"class":150},[144,214,216,218,220,223,225,228,231,233,236],{"class":146,"line":215},5,[144,217,199],{"class":150},[144,219,202],{"class":154},[144,221,222],{"class":158}," name",[144,224,176],{"class":150},[144,226,227],{"class":179},"\"viewport\"",[144,229,230],{"class":158}," content",[144,232,176],{"class":150},[144,234,235],{"class":179},"\"width=device-width, initial-scale=1.0\"",[144,237,162],{"class":150},[144,239,241,243,246,249,251],{"class":146,"line":240},6,[144,242,199],{"class":150},[144,244,245],{"class":154},"title",[144,247,248],{"class":150},">Mon premier site\u003C\u002F",[144,250,245],{"class":154},[144,252,162],{"class":150},[144,254,256,259,261],{"class":146,"line":255},7,[144,257,258],{"class":150},"  \u003C\u002F",[144,260,191],{"class":154},[144,262,162],{"class":150},[144,264,266,268,271],{"class":146,"line":265},8,[144,267,188],{"class":150},[144,269,270],{"class":154},"body",[144,272,162],{"class":150},[144,274,276,278,280,283,285],{"class":146,"line":275},9,[144,277,199],{"class":150},[144,279,10],{"class":154},[144,281,282],{"class":150},">Bienvenue\u003C\u002F",[144,284,10],{"class":154},[144,286,162],{"class":150},[144,288,290,292,294,297,299],{"class":146,"line":289},10,[144,291,199],{"class":150},[144,293,20],{"class":154},[144,295,296],{"class":150},">Voici ma première page HTML.\u003C\u002F",[144,298,20],{"class":154},[144,300,162],{"class":150},[144,302,304,306,308],{"class":146,"line":303},11,[144,305,258],{"class":150},[144,307,270],{"class":154},[144,309,162],{"class":150},[144,311,313,316,318],{"class":146,"line":312},12,[144,314,315],{"class":150},"\u003C\u002F",[144,317,138],{"class":154},[144,319,162],{"class":150},[78,321,323],{"id":322},"le-rôle-de-chaque-partie","Le rôle de chaque partie",[325,326,328],"h4",{"id":327},"doctype-html",[141,329,330],{},"\u003C!DOCTYPE html>",[20,332,333],{},"Cette ligne indique au navigateur que le document utilise le standard HTML5.",[325,335,336],{"id":138},[141,337,338],{},"\u003Chtml>",[20,340,341,342,344],{},"La balise ",[141,343,138],{}," contient l'ensemble de la page.",[20,346,347,348,351],{},"L'attribut ",[141,349,350],{},"lang=\"fr\""," indique que la langue principale du document est le français.",[325,353,354],{"id":191},[141,355,356],{},"\u003Chead>",[20,358,359,360,362],{},"La section ",[141,361,191],{}," contient les informations techniques de la page :",[40,364,365,368,371,374],{},[43,366,367],{},"le jeu de caractères ;",[43,369,370],{},"le titre de la page ;",[43,372,373],{},"les métadonnées ;",[43,375,376],{},"les liens vers des fichiers externes.",[325,378,379],{"id":270},[141,380,381],{},"\u003Cbody>",[20,383,359,384,386],{},[141,385,270],{}," contient tout ce que l'utilisateur voit réellement à l'écran.",[15,388,390],{"id":389},"_3-les-balises-les-attributs-et-le-contenu","3. Les balises, les attributs et le contenu",[20,392,393],{},"HTML repose sur trois notions simples :",[40,395,396,399,402],{},[43,397,398],{},"les balises ;",[43,400,401],{},"les attributs ;",[43,403,404],{},"le contenu.",[78,406,408],{"id":407},"les-balises","Les balises",[20,410,411],{},"Une balise encadre un élément HTML.",[20,413,414],{},"Exemple :",[134,416,418],{"className":136,"code":417,"language":138,"meta":139,"style":139},"\u003Cp>Un paragraphe\u003C\u002Fp>\n",[141,419,420],{"__ignoreMap":139},[144,421,422,424,426,429,431],{"class":146,"line":147},[144,423,168],{"class":150},[144,425,20],{"class":154},[144,427,428],{"class":150},">Un paragraphe\u003C\u002F",[144,430,20],{"class":154},[144,432,162],{"class":150},[20,434,435,436,439,440,443],{},"Ici, ",[141,437,438],{},"\u003Cp>"," ouvre le paragraphe et ",[141,441,442],{},"\u003C\u002Fp>"," le ferme.",[78,445,447],{"id":446},"les-attributs","Les attributs",[20,449,450],{},"Les attributs ajoutent des informations à une balise.",[20,452,414],{},[134,454,456],{"className":136,"code":455,"language":138,"meta":139,"style":139},"\u003Ca href=\"https:\u002F\u002Fexample.com\">Visiter le site\u003C\u002Fa>\n",[141,457,458],{"__ignoreMap":139},[144,459,460,462,465,468,470,473,476,478],{"class":146,"line":147},[144,461,168],{"class":150},[144,463,464],{"class":154},"a",[144,466,467],{"class":158}," href",[144,469,176],{"class":150},[144,471,472],{"class":179},"\"https:\u002F\u002Fexample.com\"",[144,474,475],{"class":150},">Visiter le site\u003C\u002F",[144,477,464],{"class":154},[144,479,162],{"class":150},[20,481,435,482,485],{},[141,483,484],{},"href"," indique l'adresse de destination du lien.",[78,487,489],{"id":488},"le-contenu","Le contenu",[20,491,492],{},"Le contenu est le texte ou l'élément placé entre la balise ouvrante et la balise fermante.",[15,494,496],{"id":495},"_4-les-titres-et-les-paragraphes","4. Les titres et les paragraphes",[20,498,499],{},"Les titres structurent le contenu d'une page.",[20,501,502,503,505,506,509],{},"HTML propose six niveaux de titres : ",[141,504,10],{}," à ",[141,507,508],{},"h6",".",[134,511,513],{"className":136,"code":512,"language":138,"meta":139,"style":139},"\u003Ch1>Titre principal\u003C\u002Fh1>\n\u003Ch2>Sous-titre\u003C\u002Fh2>\n\u003Ch3>Section plus précise\u003C\u002Fh3>\n",[141,514,515,528,541],{"__ignoreMap":139},[144,516,517,519,521,524,526],{"class":146,"line":147},[144,518,168],{"class":150},[144,520,10],{"class":154},[144,522,523],{"class":150},">Titre principal\u003C\u002F",[144,525,10],{"class":154},[144,527,162],{"class":150},[144,529,530,532,534,537,539],{"class":146,"line":165},[144,531,168],{"class":150},[144,533,15],{"class":154},[144,535,536],{"class":150},">Sous-titre\u003C\u002F",[144,538,15],{"class":154},[144,540,162],{"class":150},[144,542,543,545,547,550,552],{"class":146,"line":185},[144,544,168],{"class":150},[144,546,78],{"class":154},[144,548,549],{"class":150},">Section plus précise\u003C\u002F",[144,551,78],{"class":154},[144,553,162],{"class":150},[78,555,557],{"id":556},"bonne-pratique-importante","Bonne pratique importante",[20,559,560,561,563,564,566,567,569],{},"Il est préférable d'avoir un seul ",[141,562,10],{}," principal par page, puis d'organiser le reste avec ",[141,565,15],{},", ",[141,568,78],{},", etc.",[20,571,572,573,509],{},"Les paragraphes, eux, s'écrivent avec la balise ",[141,574,20],{},[134,576,578],{"className":136,"code":577,"language":138,"meta":139,"style":139},"\u003Cp>HTML permet de structurer le contenu d'une page web.\u003C\u002Fp>\n",[141,579,580],{"__ignoreMap":139},[144,581,582,584,586,589,591],{"class":146,"line":147},[144,583,168],{"class":150},[144,585,20],{"class":154},[144,587,588],{"class":150},">HTML permet de structurer le contenu d'une page web.\u003C\u002F",[144,590,20],{"class":154},[144,592,162],{"class":150},[15,594,596],{"id":595},"_5-les-textes-enrichis","5. Les textes enrichis",[20,598,599],{},"HTML permet aussi de mettre en valeur certaines parties du texte.",[78,601,603],{"id":602},"mettre-en-évidence","Mettre en évidence",[134,605,607],{"className":136,"code":606,"language":138,"meta":139,"style":139},"\u003Cp>Ce mot est \u003Cstrong>important\u003C\u002Fstrong>.\u003C\u002Fp>\n",[141,608,609],{"__ignoreMap":139},[144,610,611,613,615,618,621,624,626,629,631],{"class":146,"line":147},[144,612,168],{"class":150},[144,614,20],{"class":154},[144,616,617],{"class":150},">Ce mot est \u003C",[144,619,620],{"class":154},"strong",[144,622,623],{"class":150},">important\u003C\u002F",[144,625,620],{"class":154},[144,627,628],{"class":150},">.\u003C\u002F",[144,630,20],{"class":154},[144,632,162],{"class":150},[78,634,636],{"id":635},"marquer-une-emphase","Marquer une emphase",[134,638,640],{"className":136,"code":639,"language":138,"meta":139,"style":139},"\u003Cp>Il faut \u003Cem>bien comprendre\u003C\u002Fem> la structure du document.\u003C\u002Fp>\n",[141,641,642],{"__ignoreMap":139},[144,643,644,646,648,651,654,657,659,662,664],{"class":146,"line":147},[144,645,168],{"class":150},[144,647,20],{"class":154},[144,649,650],{"class":150},">Il faut \u003C",[144,652,653],{"class":154},"em",[144,655,656],{"class":150},">bien comprendre\u003C\u002F",[144,658,653],{"class":154},[144,660,661],{"class":150},"> la structure du document.\u003C\u002F",[144,663,20],{"class":154},[144,665,162],{"class":150},[78,667,669],{"id":668},"sauter-une-ligne","Sauter une ligne",[134,671,673],{"className":136,"code":672,"language":138,"meta":139,"style":139},"\u003Cp>Première ligne\u003Cbr>Deuxième ligne\u003C\u002Fp>\n",[141,674,675],{"__ignoreMap":139},[144,676,677,679,681,684,687,690,692],{"class":146,"line":147},[144,678,168],{"class":150},[144,680,20],{"class":154},[144,682,683],{"class":150},">Première ligne\u003C",[144,685,686],{"class":154},"br",[144,688,689],{"class":150},">Deuxième ligne\u003C\u002F",[144,691,20],{"class":154},[144,693,162],{"class":150},[20,695,696,697,699],{},"Attention : ",[141,698,686],{}," sert à faire une coupure de ligne ponctuelle, pas à construire la mise en page complète.",[15,701,703],{"id":702},"_6-les-liens","6. Les liens",[20,705,706],{},"Les liens permettent de naviguer d'une page à une autre.",[134,708,710],{"className":136,"code":709,"language":138,"meta":139,"style":139},"\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\">Consulter la documentation\u003C\u002Fa>\n",[141,711,712],{"__ignoreMap":139},[144,713,714,716,718,720,722,725,728,730],{"class":146,"line":147},[144,715,168],{"class":150},[144,717,464],{"class":154},[144,719,467],{"class":158},[144,721,176],{"class":150},[144,723,724],{"class":179},"\"https:\u002F\u002Fdeveloper.mozilla.org\"",[144,726,727],{"class":150},">Consulter la documentation\u003C\u002F",[144,729,464],{"class":154},[144,731,162],{"class":150},[78,733,735],{"id":734},"lien-vers-une-autre-page-du-site","Lien vers une autre page du site",[134,737,739],{"className":136,"code":738,"language":138,"meta":139,"style":139},"\u003Ca href=\"about.html\">À propos\u003C\u002Fa>\n",[141,740,741],{"__ignoreMap":139},[144,742,743,745,747,749,751,754,757,759],{"class":146,"line":147},[144,744,168],{"class":150},[144,746,464],{"class":154},[144,748,467],{"class":158},[144,750,176],{"class":150},[144,752,753],{"class":179},"\"about.html\"",[144,755,756],{"class":150},">À propos\u003C\u002F",[144,758,464],{"class":154},[144,760,162],{"class":150},[78,762,764],{"id":763},"lien-interne-sur-la-page","Lien interne sur la page",[134,766,768],{"className":136,"code":767,"language":138,"meta":139,"style":139},"\u003Ca href=\"#contact\">Aller au contact\u003C\u002Fa>\n\n\u003Csection id=\"contact\">\n  \u003Ch2>Contact\u003C\u002Fh2>\n\u003C\u002Fsection>\n",[141,769,770,790,796,813,826],{"__ignoreMap":139},[144,771,772,774,776,778,780,783,786,788],{"class":146,"line":147},[144,773,168],{"class":150},[144,775,464],{"class":154},[144,777,467],{"class":158},[144,779,176],{"class":150},[144,781,782],{"class":179},"\"#contact\"",[144,784,785],{"class":150},">Aller au contact\u003C\u002F",[144,787,464],{"class":154},[144,789,162],{"class":150},[144,791,792],{"class":146,"line":165},[144,793,795],{"emptyLinePlaceholder":794},true,"\n",[144,797,798,800,803,806,808,811],{"class":146,"line":185},[144,799,168],{"class":150},[144,801,802],{"class":154},"section",[144,804,805],{"class":158}," id",[144,807,176],{"class":150},[144,809,810],{"class":179},"\"contact\"",[144,812,162],{"class":150},[144,814,815,817,819,822,824],{"class":146,"line":196},[144,816,188],{"class":150},[144,818,15],{"class":154},[144,820,821],{"class":150},">Contact\u003C\u002F",[144,823,15],{"class":154},[144,825,162],{"class":150},[144,827,828,830,832],{"class":146,"line":215},[144,829,315],{"class":150},[144,831,802],{"class":154},[144,833,162],{"class":150},[78,835,837],{"id":836},"bonnes-pratiques-pour-les-liens","Bonnes pratiques pour les liens",[40,839,840,843,846],{},[43,841,842],{},"le texte du lien doit être clair ;",[43,844,845],{},"évitez les liens vagues comme \"cliquez ici\" ;",[43,847,848],{},"indiquez la destination quand c'est utile.",[15,850,852],{"id":851},"_7-les-images","7. Les images",[20,854,855,856,509],{},"Une image s'insère avec la balise ",[141,857,858],{},"img",[134,860,862],{"className":136,"code":861,"language":138,"meta":139,"style":139},"\u003Cimg src=\"photo.jpg\" alt=\"Portrait de Corneille\">\n",[141,863,864],{"__ignoreMap":139},[144,865,866,868,870,873,875,878,881,883,886],{"class":146,"line":147},[144,867,168],{"class":150},[144,869,858],{"class":154},[144,871,872],{"class":158}," src",[144,874,176],{"class":150},[144,876,877],{"class":179},"\"photo.jpg\"",[144,879,880],{"class":158}," alt",[144,882,176],{"class":150},[144,884,885],{"class":179},"\"Portrait de Corneille\"",[144,887,162],{"class":150},[78,889,891],{"id":890},"les-attributs-les-plus-importants","Les attributs les plus importants",[40,893,894,900,906,916],{},[43,895,896,899],{},[141,897,898],{},"src"," : le chemin vers le fichier image ;",[43,901,902,905],{},[141,903,904],{},"alt"," : le texte alternatif ;",[43,907,908,911,912,915],{},[141,909,910],{},"width"," et ",[141,913,914],{},"height"," : les dimensions ;",[43,917,918,921],{},[141,919,920],{},"loading=\"lazy\""," : le chargement différé si nécessaire.",[78,923,925,926],{"id":924},"comprendre-le-chemin-dans-src","Comprendre le chemin dans ",[141,927,898],{},[20,929,930,931,933],{},"Le mot ",[141,932,898],{}," signifie source. Il indique au navigateur où trouver le fichier image.",[20,935,936,937,940,941,944],{},"Quand vous écrivez ",[141,938,939],{},"src=\"photo.jpg\"",", vous dites au navigateur : \"cherche le fichier ",[141,942,943],{},"photo.jpg"," à l'endroit indiqué par ce chemin\".",[20,946,947],{},"Il existe plusieurs cas fréquents.",[325,949,951],{"id":950},"_1-le-fichier-est-dans-le-même-dossier","1. Le fichier est dans le même dossier",[134,953,954],{"className":136,"code":861,"language":138,"meta":139,"style":139},[141,955,956],{"__ignoreMap":139},[144,957,958,960,962,964,966,968,970,972,974],{"class":146,"line":147},[144,959,168],{"class":150},[144,961,858],{"class":154},[144,963,872],{"class":158},[144,965,176],{"class":150},[144,967,877],{"class":179},[144,969,880],{"class":158},[144,971,176],{"class":150},[144,973,885],{"class":179},[144,975,162],{"class":150},[20,977,978],{},"Ici, l'image se trouve au même niveau que la page HTML.",[325,980,982],{"id":981},"_2-le-fichier-est-dans-un-dossier","2. Le fichier est dans un dossier",[134,984,986],{"className":136,"code":985,"language":138,"meta":139,"style":139},"\u003Cimg src=\"images\u002Fphoto.jpg\" alt=\"Portrait de Corneille\">\n",[141,987,988],{"__ignoreMap":139},[144,989,990,992,994,996,998,1001,1003,1005,1007],{"class":146,"line":147},[144,991,168],{"class":150},[144,993,858],{"class":154},[144,995,872],{"class":158},[144,997,176],{"class":150},[144,999,1000],{"class":179},"\"images\u002Fphoto.jpg\"",[144,1002,880],{"class":158},[144,1004,176],{"class":150},[144,1006,885],{"class":179},[144,1008,162],{"class":150},[20,1010,1011,1012,509],{},"Ici, le navigateur va chercher l'image dans le dossier ",[141,1013,1014],{},"images",[325,1016,1018],{"id":1017},"_3-le-fichier-est-dans-un-dossier-parent","3. Le fichier est dans un dossier parent",[134,1020,1022],{"className":136,"code":1021,"language":138,"meta":139,"style":139},"\u003Cimg src=\"..\u002Fphoto.jpg\" alt=\"Portrait de Corneille\">\n",[141,1023,1024],{"__ignoreMap":139},[144,1025,1026,1028,1030,1032,1034,1037,1039,1041,1043],{"class":146,"line":147},[144,1027,168],{"class":150},[144,1029,858],{"class":154},[144,1031,872],{"class":158},[144,1033,176],{"class":150},[144,1035,1036],{"class":179},"\"..\u002Fphoto.jpg\"",[144,1038,880],{"class":158},[144,1040,176],{"class":150},[144,1042,885],{"class":179},[144,1044,162],{"class":150},[20,1046,1047,1048,1051],{},"Le ",[141,1049,1050],{},".."," signifie \"remonter d'un dossier\".",[20,1053,1054],{},"Cette syntaxe est utile quand votre fichier HTML se trouve dans un sous-dossier.",[78,1056,1058],{"id":1057},"chemin-relatif-ou-chemin-absolu","Chemin relatif ou chemin absolu",[20,1060,1061],{},"Le plus souvent, dans un projet web, on utilise des chemins relatifs.",[40,1063,1064,1067],{},[43,1065,1066],{},"Un chemin relatif dépend de l'emplacement du fichier HTML.",[43,1068,1069],{},"Un chemin absolu pointe vers une adresse complète ou vers une racine précise du site.",[20,1071,1072],{},"Exemple de chemin relatif :",[134,1074,1075],{"className":136,"code":985,"language":138,"meta":139,"style":139},[141,1076,1077],{"__ignoreMap":139},[144,1078,1079,1081,1083,1085,1087,1089,1091,1093,1095],{"class":146,"line":147},[144,1080,168],{"class":150},[144,1082,858],{"class":154},[144,1084,872],{"class":158},[144,1086,176],{"class":150},[144,1088,1000],{"class":179},[144,1090,880],{"class":158},[144,1092,176],{"class":150},[144,1094,885],{"class":179},[144,1096,162],{"class":150},[20,1098,1099],{},"Exemple de chemin absolu sur un site :",[134,1101,1103],{"className":136,"code":1102,"language":138,"meta":139,"style":139},"\u003Cimg src=\"\u002Fimages\u002Fphoto.jpg\" alt=\"Portrait de Corneille\">\n",[141,1104,1105],{"__ignoreMap":139},[144,1106,1107,1109,1111,1113,1115,1118,1120,1122,1124],{"class":146,"line":147},[144,1108,168],{"class":150},[144,1110,858],{"class":154},[144,1112,872],{"class":158},[144,1114,176],{"class":150},[144,1116,1117],{"class":179},"\"\u002Fimages\u002Fphoto.jpg\"",[144,1119,880],{"class":158},[144,1121,176],{"class":150},[144,1123,885],{"class":179},[144,1125,162],{"class":150},[20,1127,1047,1128,1131],{},[141,1129,1130],{},"\u002F"," au début indique souvent la racine du site.",[78,1133,1135,1136],{"id":1134},"erreurs-fréquentes-avec-src","Erreurs fréquentes avec ",[141,1137,898],{},[40,1139,1140,1143,1146,1157],{},[43,1141,1142],{},"oublier le bon dossier ;",[43,1144,1145],{},"se tromper dans le nom du fichier ;",[43,1147,1148,1149,1152,1153,1156],{},"utiliser une mauvaise extension, par exemple ",[141,1150,1151],{},".jpg"," au lieu de ",[141,1154,1155],{},".png"," ;",[43,1158,1159],{},"oublier que les majuscules et les minuscules peuvent compter selon l'environnement.",[78,1161,1163],{"id":1162},"bon-réflexe","Bon réflexe",[20,1165,1166],{},"Si une image ne s'affiche pas, vérifiez dans cet ordre :",[1168,1169,1170,1173,1176,1181,1184],"ol",{},[43,1171,1172],{},"le nom du fichier ;",[43,1174,1175],{},"l'extension du fichier ;",[43,1177,1178,1179,1156],{},"le dossier indiqué dans ",[141,1180,898],{},[43,1182,1183],{},"la casse du nom ;",[43,1185,1186],{},"l'emplacement réel du fichier.",[78,1188,1190,1191,1193],{"id":1189},"pourquoi-alt-est-essentiel","Pourquoi ",[141,1192,904],{}," est essentiel",[20,1195,1196],{},"Le texte alternatif décrit l'image pour les lecteurs d'écran et pour les cas où l'image ne peut pas s'afficher.",[20,1198,1199,1200,1202],{},"Un bon ",[141,1201,904],{}," améliore à la fois l'accessibilité et la compréhension du contenu.",[15,1204,1206],{"id":1205},"_8-les-listes","8. Les listes",[20,1208,1209],{},"Les listes sont très utiles pour organiser des informations.",[78,1211,1213],{"id":1212},"liste-non-ordonnée","Liste non ordonnée",[134,1215,1217],{"className":136,"code":1216,"language":138,"meta":139,"style":139},"\u003Cul>\n  \u003Cli>HTML\u003C\u002Fli>\n  \u003Cli>CSS\u003C\u002Fli>\n  \u003Cli>JavaScript\u003C\u002Fli>\n\u003C\u002Ful>\n",[141,1218,1219,1227,1240,1253,1266],{"__ignoreMap":139},[144,1220,1221,1223,1225],{"class":146,"line":147},[144,1222,168],{"class":150},[144,1224,40],{"class":154},[144,1226,162],{"class":150},[144,1228,1229,1231,1233,1236,1238],{"class":146,"line":165},[144,1230,188],{"class":150},[144,1232,43],{"class":154},[144,1234,1235],{"class":150},">HTML\u003C\u002F",[144,1237,43],{"class":154},[144,1239,162],{"class":150},[144,1241,1242,1244,1246,1249,1251],{"class":146,"line":185},[144,1243,188],{"class":150},[144,1245,43],{"class":154},[144,1247,1248],{"class":150},">CSS\u003C\u002F",[144,1250,43],{"class":154},[144,1252,162],{"class":150},[144,1254,1255,1257,1259,1262,1264],{"class":146,"line":196},[144,1256,188],{"class":150},[144,1258,43],{"class":154},[144,1260,1261],{"class":150},">JavaScript\u003C\u002F",[144,1263,43],{"class":154},[144,1265,162],{"class":150},[144,1267,1268,1270,1272],{"class":146,"line":215},[144,1269,315],{"class":150},[144,1271,40],{"class":154},[144,1273,162],{"class":150},[78,1275,1277],{"id":1276},"liste-ordonnée","Liste ordonnée",[134,1279,1281],{"className":136,"code":1280,"language":138,"meta":139,"style":139},"\u003Col>\n  \u003Cli>Créer le fichier HTML\u003C\u002Fli>\n  \u003Cli>Écrire la structure de base\u003C\u002Fli>\n  \u003Cli>Ajouter le contenu\u003C\u002Fli>\n\u003C\u002Fol>\n",[141,1282,1283,1291,1304,1317,1330],{"__ignoreMap":139},[144,1284,1285,1287,1289],{"class":146,"line":147},[144,1286,168],{"class":150},[144,1288,1168],{"class":154},[144,1290,162],{"class":150},[144,1292,1293,1295,1297,1300,1302],{"class":146,"line":165},[144,1294,188],{"class":150},[144,1296,43],{"class":154},[144,1298,1299],{"class":150},">Créer le fichier HTML\u003C\u002F",[144,1301,43],{"class":154},[144,1303,162],{"class":150},[144,1305,1306,1308,1310,1313,1315],{"class":146,"line":185},[144,1307,188],{"class":150},[144,1309,43],{"class":154},[144,1311,1312],{"class":150},">Écrire la structure de base\u003C\u002F",[144,1314,43],{"class":154},[144,1316,162],{"class":150},[144,1318,1319,1321,1323,1326,1328],{"class":146,"line":196},[144,1320,188],{"class":150},[144,1322,43],{"class":154},[144,1324,1325],{"class":150},">Ajouter le contenu\u003C\u002F",[144,1327,43],{"class":154},[144,1329,162],{"class":150},[144,1331,1332,1334,1336],{"class":146,"line":215},[144,1333,315],{"class":150},[144,1335,1168],{"class":154},[144,1337,162],{"class":150},[78,1339,1341],{"id":1340},"liste-de-définitions","Liste de définitions",[134,1343,1345],{"className":136,"code":1344,"language":138,"meta":139,"style":139},"\u003Cdl>\n  \u003Cdt>HTML\u003C\u002Fdt>\n  \u003Cdd>Langage de balisage pour structurer le contenu.\u003C\u002Fdd>\n\u003C\u002Fdl>\n",[141,1346,1347,1356,1369,1383],{"__ignoreMap":139},[144,1348,1349,1351,1354],{"class":146,"line":147},[144,1350,168],{"class":150},[144,1352,1353],{"class":154},"dl",[144,1355,162],{"class":150},[144,1357,1358,1360,1363,1365,1367],{"class":146,"line":165},[144,1359,188],{"class":150},[144,1361,1362],{"class":154},"dt",[144,1364,1235],{"class":150},[144,1366,1362],{"class":154},[144,1368,162],{"class":150},[144,1370,1371,1373,1376,1379,1381],{"class":146,"line":185},[144,1372,188],{"class":150},[144,1374,1375],{"class":154},"dd",[144,1377,1378],{"class":150},">Langage de balisage pour structurer le contenu.\u003C\u002F",[144,1380,1375],{"class":154},[144,1382,162],{"class":150},[144,1384,1385,1387,1389],{"class":146,"line":196},[144,1386,315],{"class":150},[144,1388,1353],{"class":154},[144,1390,162],{"class":150},[15,1392,1394],{"id":1393},"_9-les-sections-sémantiques","9. Les sections sémantiques",[20,1396,1397],{},"La sémantique consiste à choisir les bonnes balises pour décrire correctement le contenu.",[20,1399,1400],{},"C'est très important pour :",[40,1402,1403,1406,1409,1412],{},[43,1404,1405],{},"la lisibilité du code ;",[43,1407,1408],{},"l'accessibilité ;",[43,1410,1411],{},"le référencement ;",[43,1413,1414],{},"la maintenance du projet.",[78,1416,1418],{"id":1417},"les-balises-sémantiques-principales","Les balises sémantiques principales",[40,1420,1421,1427,1433,1439,1444,1450,1456],{},[43,1422,1423,1426],{},[141,1424,1425],{},"header"," : en-tête de page ou de section ;",[43,1428,1429,1432],{},[141,1430,1431],{},"nav"," : navigation ;",[43,1434,1435,1438],{},[141,1436,1437],{},"main"," : contenu principal ;",[43,1440,1441,1443],{},[141,1442,802],{}," : section thématique ;",[43,1445,1446,1449],{},[141,1447,1448],{},"article"," : contenu autonome ;",[43,1451,1452,1455],{},[141,1453,1454],{},"aside"," : contenu complémentaire ;",[43,1457,1458,1461],{},[141,1459,1460],{},"footer"," : pied de page.",[78,1463,1465],{"id":1464},"exemple-de-structure-sémantique","Exemple de structure sémantique",[134,1467,1469],{"className":136,"code":1468,"language":138,"meta":139,"style":139},"\u003Cbody>\n  \u003Cheader>\n    \u003Ch1>Mon site\u003C\u002Fh1>\n    \u003Cnav>\n      \u003Ca href=\"\u002F\">Accueil\u003C\u002Fa>\n      \u003Ca href=\"\u002Fblog\">Blog\u003C\u002Fa>\n      \u003Ca href=\"\u002Fcontact\">Contact\u003C\u002Fa>\n    \u003C\u002Fnav>\n  \u003C\u002Fheader>\n\n  \u003Cmain>\n    \u003Carticle>\n      \u003Ch2>Premier article\u003C\u002Fh2>\n      \u003Cp>Voici le contenu de l'article.\u003C\u002Fp>\n    \u003C\u002Farticle>\n  \u003C\u002Fmain>\n\n  \u003Cfooter>\n    \u003Cp>© 2026 Mon site\u003C\u002Fp>\n  \u003C\u002Ffooter>\n\u003C\u002Fbody>\n",[141,1470,1471,1479,1487,1500,1508,1529,1549,1568,1577,1585,1589,1597,1605,1619,1633,1642,1651,1656,1665,1679,1688],{"__ignoreMap":139},[144,1472,1473,1475,1477],{"class":146,"line":147},[144,1474,168],{"class":150},[144,1476,270],{"class":154},[144,1478,162],{"class":150},[144,1480,1481,1483,1485],{"class":146,"line":165},[144,1482,188],{"class":150},[144,1484,1425],{"class":154},[144,1486,162],{"class":150},[144,1488,1489,1491,1493,1496,1498],{"class":146,"line":185},[144,1490,199],{"class":150},[144,1492,10],{"class":154},[144,1494,1495],{"class":150},">Mon site\u003C\u002F",[144,1497,10],{"class":154},[144,1499,162],{"class":150},[144,1501,1502,1504,1506],{"class":146,"line":196},[144,1503,199],{"class":150},[144,1505,1431],{"class":154},[144,1507,162],{"class":150},[144,1509,1510,1513,1515,1517,1519,1522,1525,1527],{"class":146,"line":215},[144,1511,1512],{"class":150},"      \u003C",[144,1514,464],{"class":154},[144,1516,467],{"class":158},[144,1518,176],{"class":150},[144,1520,1521],{"class":179},"\"\u002F\"",[144,1523,1524],{"class":150},">Accueil\u003C\u002F",[144,1526,464],{"class":154},[144,1528,162],{"class":150},[144,1530,1531,1533,1535,1537,1539,1542,1545,1547],{"class":146,"line":240},[144,1532,1512],{"class":150},[144,1534,464],{"class":154},[144,1536,467],{"class":158},[144,1538,176],{"class":150},[144,1540,1541],{"class":179},"\"\u002Fblog\"",[144,1543,1544],{"class":150},">Blog\u003C\u002F",[144,1546,464],{"class":154},[144,1548,162],{"class":150},[144,1550,1551,1553,1555,1557,1559,1562,1564,1566],{"class":146,"line":255},[144,1552,1512],{"class":150},[144,1554,464],{"class":154},[144,1556,467],{"class":158},[144,1558,176],{"class":150},[144,1560,1561],{"class":179},"\"\u002Fcontact\"",[144,1563,821],{"class":150},[144,1565,464],{"class":154},[144,1567,162],{"class":150},[144,1569,1570,1573,1575],{"class":146,"line":265},[144,1571,1572],{"class":150},"    \u003C\u002F",[144,1574,1431],{"class":154},[144,1576,162],{"class":150},[144,1578,1579,1581,1583],{"class":146,"line":275},[144,1580,258],{"class":150},[144,1582,1425],{"class":154},[144,1584,162],{"class":150},[144,1586,1587],{"class":146,"line":289},[144,1588,795],{"emptyLinePlaceholder":794},[144,1590,1591,1593,1595],{"class":146,"line":303},[144,1592,188],{"class":150},[144,1594,1437],{"class":154},[144,1596,162],{"class":150},[144,1598,1599,1601,1603],{"class":146,"line":312},[144,1600,199],{"class":150},[144,1602,1448],{"class":154},[144,1604,162],{"class":150},[144,1606,1608,1610,1612,1615,1617],{"class":146,"line":1607},13,[144,1609,1512],{"class":150},[144,1611,15],{"class":154},[144,1613,1614],{"class":150},">Premier article\u003C\u002F",[144,1616,15],{"class":154},[144,1618,162],{"class":150},[144,1620,1622,1624,1626,1629,1631],{"class":146,"line":1621},14,[144,1623,1512],{"class":150},[144,1625,20],{"class":154},[144,1627,1628],{"class":150},">Voici le contenu de l'article.\u003C\u002F",[144,1630,20],{"class":154},[144,1632,162],{"class":150},[144,1634,1636,1638,1640],{"class":146,"line":1635},15,[144,1637,1572],{"class":150},[144,1639,1448],{"class":154},[144,1641,162],{"class":150},[144,1643,1645,1647,1649],{"class":146,"line":1644},16,[144,1646,258],{"class":150},[144,1648,1437],{"class":154},[144,1650,162],{"class":150},[144,1652,1654],{"class":146,"line":1653},17,[144,1655,795],{"emptyLinePlaceholder":794},[144,1657,1659,1661,1663],{"class":146,"line":1658},18,[144,1660,188],{"class":150},[144,1662,1460],{"class":154},[144,1664,162],{"class":150},[144,1666,1668,1670,1672,1675,1677],{"class":146,"line":1667},19,[144,1669,199],{"class":150},[144,1671,20],{"class":154},[144,1673,1674],{"class":150},">© 2026 Mon site\u003C\u002F",[144,1676,20],{"class":154},[144,1678,162],{"class":150},[144,1680,1682,1684,1686],{"class":146,"line":1681},20,[144,1683,258],{"class":150},[144,1685,1460],{"class":154},[144,1687,162],{"class":150},[144,1689,1691,1693,1695],{"class":146,"line":1690},21,[144,1692,315],{"class":150},[144,1694,270],{"class":154},[144,1696,162],{"class":150},[78,1698,1700],{"id":1699},"pourquoi-cette-structure-est-meilleure","Pourquoi cette structure est meilleure",[20,1702,1703],{},"Un navigateur, un moteur de recherche ou un lecteur d'écran comprend plus facilement la fonction de chaque bloc.",[15,1705,1707],{"id":1706},"_10-les-tableaux","10. Les tableaux",[20,1709,1710],{},"Les tableaux servent à afficher des données organisées en lignes et en colonnes.",[134,1712,1714],{"className":136,"code":1713,"language":138,"meta":139,"style":139},"\u003Ctable>\n  \u003Cthead>\n    \u003Ctr>\n      \u003Cth>Langage\u003C\u002Fth>\n      \u003Cth>Usage\u003C\u002Fth>\n    \u003C\u002Ftr>\n  \u003C\u002Fthead>\n  \u003Ctbody>\n    \u003Ctr>\n      \u003Ctd>HTML\u003C\u002Ftd>\n      \u003Ctd>Structure\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>CSS\u003C\u002Ftd>\n      \u003Ctd>Style\u003C\u002Ftd>\n    \u003C\u002Ftr>\n  \u003C\u002Ftbody>\n\u003C\u002Ftable>\n",[141,1715,1716,1725,1734,1743,1757,1770,1778,1786,1795,1803,1816,1829,1837,1845,1857,1870,1878,1886],{"__ignoreMap":139},[144,1717,1718,1720,1723],{"class":146,"line":147},[144,1719,168],{"class":150},[144,1721,1722],{"class":154},"table",[144,1724,162],{"class":150},[144,1726,1727,1729,1732],{"class":146,"line":165},[144,1728,188],{"class":150},[144,1730,1731],{"class":154},"thead",[144,1733,162],{"class":150},[144,1735,1736,1738,1741],{"class":146,"line":185},[144,1737,199],{"class":150},[144,1739,1740],{"class":154},"tr",[144,1742,162],{"class":150},[144,1744,1745,1747,1750,1753,1755],{"class":146,"line":196},[144,1746,1512],{"class":150},[144,1748,1749],{"class":154},"th",[144,1751,1752],{"class":150},">Langage\u003C\u002F",[144,1754,1749],{"class":154},[144,1756,162],{"class":150},[144,1758,1759,1761,1763,1766,1768],{"class":146,"line":215},[144,1760,1512],{"class":150},[144,1762,1749],{"class":154},[144,1764,1765],{"class":150},">Usage\u003C\u002F",[144,1767,1749],{"class":154},[144,1769,162],{"class":150},[144,1771,1772,1774,1776],{"class":146,"line":240},[144,1773,1572],{"class":150},[144,1775,1740],{"class":154},[144,1777,162],{"class":150},[144,1779,1780,1782,1784],{"class":146,"line":255},[144,1781,258],{"class":150},[144,1783,1731],{"class":154},[144,1785,162],{"class":150},[144,1787,1788,1790,1793],{"class":146,"line":265},[144,1789,188],{"class":150},[144,1791,1792],{"class":154},"tbody",[144,1794,162],{"class":150},[144,1796,1797,1799,1801],{"class":146,"line":275},[144,1798,199],{"class":150},[144,1800,1740],{"class":154},[144,1802,162],{"class":150},[144,1804,1805,1807,1810,1812,1814],{"class":146,"line":289},[144,1806,1512],{"class":150},[144,1808,1809],{"class":154},"td",[144,1811,1235],{"class":150},[144,1813,1809],{"class":154},[144,1815,162],{"class":150},[144,1817,1818,1820,1822,1825,1827],{"class":146,"line":303},[144,1819,1512],{"class":150},[144,1821,1809],{"class":154},[144,1823,1824],{"class":150},">Structure\u003C\u002F",[144,1826,1809],{"class":154},[144,1828,162],{"class":150},[144,1830,1831,1833,1835],{"class":146,"line":312},[144,1832,1572],{"class":150},[144,1834,1740],{"class":154},[144,1836,162],{"class":150},[144,1838,1839,1841,1843],{"class":146,"line":1607},[144,1840,199],{"class":150},[144,1842,1740],{"class":154},[144,1844,162],{"class":150},[144,1846,1847,1849,1851,1853,1855],{"class":146,"line":1621},[144,1848,1512],{"class":150},[144,1850,1809],{"class":154},[144,1852,1248],{"class":150},[144,1854,1809],{"class":154},[144,1856,162],{"class":150},[144,1858,1859,1861,1863,1866,1868],{"class":146,"line":1635},[144,1860,1512],{"class":150},[144,1862,1809],{"class":154},[144,1864,1865],{"class":150},">Style\u003C\u002F",[144,1867,1809],{"class":154},[144,1869,162],{"class":150},[144,1871,1872,1874,1876],{"class":146,"line":1644},[144,1873,1572],{"class":150},[144,1875,1740],{"class":154},[144,1877,162],{"class":150},[144,1879,1880,1882,1884],{"class":146,"line":1653},[144,1881,258],{"class":150},[144,1883,1792],{"class":154},[144,1885,162],{"class":150},[144,1887,1888,1890,1892],{"class":146,"line":1658},[144,1889,315],{"class":150},[144,1891,1722],{"class":154},[144,1893,162],{"class":150},[78,1895,1897],{"id":1896},"règle-importante","Règle importante",[20,1899,1900],{},"N'utilisez pas un tableau pour faire de la mise en page. Les tableaux servent aux données tabulaires, pas à la disposition visuelle.",[15,1902,1904],{"id":1903},"_11-les-formulaires","11. Les formulaires",[20,1906,1907],{},"Les formulaires permettent de collecter des informations auprès de l'utilisateur.",[134,1909,1911],{"className":136,"code":1910,"language":138,"meta":139,"style":139},"\u003Cform>\n  \u003Clabel for=\"name\">Nom\u003C\u002Flabel>\n  \u003Cinput type=\"text\" id=\"name\" name=\"name\">\n\n  \u003Clabel for=\"email\">Email\u003C\u002Flabel>\n  \u003Cinput type=\"email\" id=\"email\" name=\"email\">\n\n  \u003Cbutton type=\"submit\">Envoyer\u003C\u002Fbutton>\n\u003C\u002Fform>\n",[141,1912,1913,1922,1944,1973,1977,1997,2023,2027,2048],{"__ignoreMap":139},[144,1914,1915,1917,1920],{"class":146,"line":147},[144,1916,168],{"class":150},[144,1918,1919],{"class":154},"form",[144,1921,162],{"class":150},[144,1923,1924,1926,1929,1932,1934,1937,1940,1942],{"class":146,"line":165},[144,1925,188],{"class":150},[144,1927,1928],{"class":154},"label",[144,1930,1931],{"class":158}," for",[144,1933,176],{"class":150},[144,1935,1936],{"class":179},"\"name\"",[144,1938,1939],{"class":150},">Nom\u003C\u002F",[144,1941,1928],{"class":154},[144,1943,162],{"class":150},[144,1945,1946,1948,1951,1954,1956,1959,1961,1963,1965,1967,1969,1971],{"class":146,"line":185},[144,1947,188],{"class":150},[144,1949,1950],{"class":154},"input",[144,1952,1953],{"class":158}," type",[144,1955,176],{"class":150},[144,1957,1958],{"class":179},"\"text\"",[144,1960,805],{"class":158},[144,1962,176],{"class":150},[144,1964,1936],{"class":179},[144,1966,222],{"class":158},[144,1968,176],{"class":150},[144,1970,1936],{"class":179},[144,1972,162],{"class":150},[144,1974,1975],{"class":146,"line":196},[144,1976,795],{"emptyLinePlaceholder":794},[144,1978,1979,1981,1983,1985,1987,1990,1993,1995],{"class":146,"line":215},[144,1980,188],{"class":150},[144,1982,1928],{"class":154},[144,1984,1931],{"class":158},[144,1986,176],{"class":150},[144,1988,1989],{"class":179},"\"email\"",[144,1991,1992],{"class":150},">Email\u003C\u002F",[144,1994,1928],{"class":154},[144,1996,162],{"class":150},[144,1998,1999,2001,2003,2005,2007,2009,2011,2013,2015,2017,2019,2021],{"class":146,"line":240},[144,2000,188],{"class":150},[144,2002,1950],{"class":154},[144,2004,1953],{"class":158},[144,2006,176],{"class":150},[144,2008,1989],{"class":179},[144,2010,805],{"class":158},[144,2012,176],{"class":150},[144,2014,1989],{"class":179},[144,2016,222],{"class":158},[144,2018,176],{"class":150},[144,2020,1989],{"class":179},[144,2022,162],{"class":150},[144,2024,2025],{"class":146,"line":255},[144,2026,795],{"emptyLinePlaceholder":794},[144,2028,2029,2031,2034,2036,2038,2041,2044,2046],{"class":146,"line":265},[144,2030,188],{"class":150},[144,2032,2033],{"class":154},"button",[144,2035,1953],{"class":158},[144,2037,176],{"class":150},[144,2039,2040],{"class":179},"\"submit\"",[144,2042,2043],{"class":150},">Envoyer\u003C\u002F",[144,2045,2033],{"class":154},[144,2047,162],{"class":150},[144,2049,2050,2052,2054],{"class":146,"line":275},[144,2051,315],{"class":150},[144,2053,1919],{"class":154},[144,2055,162],{"class":150},[78,2057,2059],{"id":2058},"les-éléments-de-base","Les éléments de base",[40,2061,2062,2067,2072,2077],{},[43,2063,2064,2066],{},[141,2065,1919],{}," : le conteneur du formulaire ;",[43,2068,2069,2071],{},[141,2070,1928],{}," : le texte associé à un champ ;",[43,2073,2074,2076],{},[141,2075,1950],{}," : le champ de saisie ;",[43,2078,2079,2081],{},[141,2080,2033],{}," : le bouton d'action.",[78,2083,1190,2085,2087],{"id":2084},"pourquoi-label-est-important",[141,2086,1928],{}," est important",[20,2089,2090,2091,2093],{},"Un ",[141,2092,1928],{}," améliore la lisibilité et l'accessibilité. Il permet d'indiquer clairement à quoi sert chaque champ.",[78,2095,2097],{"id":2096},"quelques-types-de-champs-utiles","Quelques types de champs utiles",[40,2099,2100,2105,2110,2115,2120,2125,2130],{},[43,2101,2102,1156],{},[141,2103,2104],{},"text",[43,2106,2107,1156],{},[141,2108,2109],{},"email",[43,2111,2112,1156],{},[141,2113,2114],{},"password",[43,2116,2117,1156],{},[141,2118,2119],{},"number",[43,2121,2122,1156],{},[141,2123,2124],{},"checkbox",[43,2126,2127,1156],{},[141,2128,2129],{},"radio",[43,2131,2132,509],{},[141,2133,2134],{},"date",[15,2136,2138,2139],{"id":2137},"_12-les-métadonnées-utiles-dans-le-head","12. Les métadonnées utiles dans le ",[141,2140,191],{},[20,2142,359,2143,2145],{},[141,2144,191],{}," n'est pas visible directement, mais elle est très importante.",[134,2147,2149],{"className":136,"code":2148,"language":138,"meta":139,"style":139},"\u003Chead>\n  \u003Cmeta charset=\"UTF-8\">\n  \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  \u003Ctitle>Mon site\u003C\u002Ftitle>\n  \u003Cmeta name=\"description\" content=\"Une page d'exemple en HTML.\">\n\u003C\u002Fhead>\n",[141,2150,2151,2159,2173,2193,2205,2227],{"__ignoreMap":139},[144,2152,2153,2155,2157],{"class":146,"line":147},[144,2154,168],{"class":150},[144,2156,191],{"class":154},[144,2158,162],{"class":150},[144,2160,2161,2163,2165,2167,2169,2171],{"class":146,"line":165},[144,2162,188],{"class":150},[144,2164,202],{"class":154},[144,2166,205],{"class":158},[144,2168,176],{"class":150},[144,2170,210],{"class":179},[144,2172,162],{"class":150},[144,2174,2175,2177,2179,2181,2183,2185,2187,2189,2191],{"class":146,"line":185},[144,2176,188],{"class":150},[144,2178,202],{"class":154},[144,2180,222],{"class":158},[144,2182,176],{"class":150},[144,2184,227],{"class":179},[144,2186,230],{"class":158},[144,2188,176],{"class":150},[144,2190,235],{"class":179},[144,2192,162],{"class":150},[144,2194,2195,2197,2199,2201,2203],{"class":146,"line":196},[144,2196,188],{"class":150},[144,2198,245],{"class":154},[144,2200,1495],{"class":150},[144,2202,245],{"class":154},[144,2204,162],{"class":150},[144,2206,2207,2209,2211,2213,2215,2218,2220,2222,2225],{"class":146,"line":215},[144,2208,188],{"class":150},[144,2210,202],{"class":154},[144,2212,222],{"class":158},[144,2214,176],{"class":150},[144,2216,2217],{"class":179},"\"description\"",[144,2219,230],{"class":158},[144,2221,176],{"class":150},[144,2223,2224],{"class":179},"\"Une page d'exemple en HTML.\"",[144,2226,162],{"class":150},[144,2228,2229,2231,2233],{"class":146,"line":240},[144,2230,315],{"class":150},[144,2232,191],{"class":154},[144,2234,162],{"class":150},[78,2236,2238],{"id":2237},"meta-charsetutf-8",[141,2239,2240],{},"meta charset=\"UTF-8\"",[20,2242,2243],{},"Cette ligne définit l'encodage des caractères.",[78,2245,2247],{"id":2246},"meta-viewport",[141,2248,2249],{},"meta viewport",[20,2251,2252],{},"Elle aide à rendre la page adaptée aux écrans mobiles.",[78,2254,2255],{"id":245},[141,2256,245],{},[20,2258,2259],{},"Le titre apparaît dans l'onglet du navigateur.",[78,2261,2263],{"id":2262},"description",[141,2264,2262],{},[20,2266,2267],{},"La description aide au référencement et peut être utilisée par les moteurs de recherche.",[15,2269,2271],{"id":2270},"_13-accessibilité-écrire-du-html-pour-tous","13. Accessibilité : écrire du HTML pour tous",[20,2273,2274],{},"Un bon HTML ne doit pas seulement être beau. Il doit être compréhensible pour tous les utilisateurs.",[78,2276,2278],{"id":2277},"quelques-règles-simples","Quelques règles simples",[40,2280,2281,2284,2287,2292,2297,2300],{},[43,2282,2283],{},"utiliser les titres dans le bon ordre ;",[43,2285,2286],{},"écrire des textes de lien clairs ;",[43,2288,2289,2290,1156],{},"remplir les attributs ",[141,2291,904],{},[43,2293,2294,2295,1156],{},"associer chaque champ de formulaire à un ",[141,2296,1928],{},[43,2298,2299],{},"utiliser des balises sémantiques ;",[43,2301,2302,2303,2306],{},"éviter de tout construire avec des ",[141,2304,2305],{},"div"," inutiles.",[78,2308,2310],{"id":2309},"pourquoi-cest-important","Pourquoi c'est important",[20,2312,2313],{},"L'accessibilité améliore l'expérience pour les lecteurs d'écran, mais aussi pour les moteurs de recherche et pour la maintenance globale du site.",[15,2315,2317],{"id":2316},"_14-construire-une-page-complète","14. Construire une page complète",[20,2319,2320],{},"Voici un exemple de page HTML plus réaliste.",[134,2322,2324],{"className":136,"code":2323,"language":138,"meta":139,"style":139},"\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.0\">\n    \u003Ctitle>Mon portfolio\u003C\u002Ftitle>\n    \u003Cmeta name=\"description\" content=\"Page de présentation personnelle.\">\n  \u003C\u002Fhead>\n  \u003Cbody>\n    \u003Cheader>\n      \u003Ch1>Corneille\u003C\u002Fh1>\n      \u003Cnav>\n        \u003Ca href=\"#apropos\">À propos\u003C\u002Fa>\n        \u003Ca href=\"#projets\">Projets\u003C\u002Fa>\n        \u003Ca href=\"#contact\">Contact\u003C\u002Fa>\n      \u003C\u002Fnav>\n    \u003C\u002Fheader>\n\n    \u003Cmain>\n      \u003Csection id=\"apropos\">\n        \u003Ch2>À propos\u003C\u002Fh2>\n        \u003Cp>Je développe des sites web et des applications modernes.\u003C\u002Fp>\n      \u003C\u002Fsection>\n\n      \u003Csection id=\"projets\">\n        \u003Ch2>Projets\u003C\u002Fh2>\n        \u003Cul>\n          \u003Cli>Portfolio personnel\u003C\u002Fli>\n          \u003Cli>Application de gestion\u003C\u002Fli>\n          \u003Cli>Blog technique\u003C\u002Fli>\n        \u003C\u002Ful>\n      \u003C\u002Fsection>\n\n      \u003Csection id=\"contact\">\n        \u003Ch2>Contact\u003C\u002Fh2>\n        \u003Cform>\n          \u003Clabel for=\"message\">Message\u003C\u002Flabel>\n          \u003Ctextarea id=\"message\" name=\"message\">\u003C\u002Ftextarea>\n          \u003Cbutton type=\"submit\">Envoyer\u003C\u002Fbutton>\n        \u003C\u002Fform>\n      \u003C\u002Fsection>\n    \u003C\u002Fmain>\n\n    \u003Cfooter>\n      \u003Cp>© 2026 Corneille\u003C\u002Fp>\n    \u003C\u002Ffooter>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[141,2325,2326,2336,2350,2358,2372,2392,2405,2426,2434,2442,2450,2463,2471,2491,2511,2529,2538,2546,2550,2558,2573,2585,2599,2608,2613,2629,2642,2651,2666,2680,2694,2704,2713,2718,2733,2746,2755,2776,2803,2822,2831,2840,2849,2854,2863,2877,2886,2895],{"__ignoreMap":139},[144,2327,2328,2330,2332,2334],{"class":146,"line":147},[144,2329,151],{"class":150},[144,2331,155],{"class":154},[144,2333,159],{"class":158},[144,2335,162],{"class":150},[144,2337,2338,2340,2342,2344,2346,2348],{"class":146,"line":165},[144,2339,168],{"class":150},[144,2341,138],{"class":154},[144,2343,173],{"class":158},[144,2345,176],{"class":150},[144,2347,180],{"class":179},[144,2349,162],{"class":150},[144,2351,2352,2354,2356],{"class":146,"line":185},[144,2353,188],{"class":150},[144,2355,191],{"class":154},[144,2357,162],{"class":150},[144,2359,2360,2362,2364,2366,2368,2370],{"class":146,"line":196},[144,2361,199],{"class":150},[144,2363,202],{"class":154},[144,2365,205],{"class":158},[144,2367,176],{"class":150},[144,2369,210],{"class":179},[144,2371,162],{"class":150},[144,2373,2374,2376,2378,2380,2382,2384,2386,2388,2390],{"class":146,"line":215},[144,2375,199],{"class":150},[144,2377,202],{"class":154},[144,2379,222],{"class":158},[144,2381,176],{"class":150},[144,2383,227],{"class":179},[144,2385,230],{"class":158},[144,2387,176],{"class":150},[144,2389,235],{"class":179},[144,2391,162],{"class":150},[144,2393,2394,2396,2398,2401,2403],{"class":146,"line":240},[144,2395,199],{"class":150},[144,2397,245],{"class":154},[144,2399,2400],{"class":150},">Mon portfolio\u003C\u002F",[144,2402,245],{"class":154},[144,2404,162],{"class":150},[144,2406,2407,2409,2411,2413,2415,2417,2419,2421,2424],{"class":146,"line":255},[144,2408,199],{"class":150},[144,2410,202],{"class":154},[144,2412,222],{"class":158},[144,2414,176],{"class":150},[144,2416,2217],{"class":179},[144,2418,230],{"class":158},[144,2420,176],{"class":150},[144,2422,2423],{"class":179},"\"Page de présentation personnelle.\"",[144,2425,162],{"class":150},[144,2427,2428,2430,2432],{"class":146,"line":265},[144,2429,258],{"class":150},[144,2431,191],{"class":154},[144,2433,162],{"class":150},[144,2435,2436,2438,2440],{"class":146,"line":275},[144,2437,188],{"class":150},[144,2439,270],{"class":154},[144,2441,162],{"class":150},[144,2443,2444,2446,2448],{"class":146,"line":289},[144,2445,199],{"class":150},[144,2447,1425],{"class":154},[144,2449,162],{"class":150},[144,2451,2452,2454,2456,2459,2461],{"class":146,"line":303},[144,2453,1512],{"class":150},[144,2455,10],{"class":154},[144,2457,2458],{"class":150},">Corneille\u003C\u002F",[144,2460,10],{"class":154},[144,2462,162],{"class":150},[144,2464,2465,2467,2469],{"class":146,"line":312},[144,2466,1512],{"class":150},[144,2468,1431],{"class":154},[144,2470,162],{"class":150},[144,2472,2473,2476,2478,2480,2482,2485,2487,2489],{"class":146,"line":1607},[144,2474,2475],{"class":150},"        \u003C",[144,2477,464],{"class":154},[144,2479,467],{"class":158},[144,2481,176],{"class":150},[144,2483,2484],{"class":179},"\"#apropos\"",[144,2486,756],{"class":150},[144,2488,464],{"class":154},[144,2490,162],{"class":150},[144,2492,2493,2495,2497,2499,2501,2504,2507,2509],{"class":146,"line":1621},[144,2494,2475],{"class":150},[144,2496,464],{"class":154},[144,2498,467],{"class":158},[144,2500,176],{"class":150},[144,2502,2503],{"class":179},"\"#projets\"",[144,2505,2506],{"class":150},">Projets\u003C\u002F",[144,2508,464],{"class":154},[144,2510,162],{"class":150},[144,2512,2513,2515,2517,2519,2521,2523,2525,2527],{"class":146,"line":1635},[144,2514,2475],{"class":150},[144,2516,464],{"class":154},[144,2518,467],{"class":158},[144,2520,176],{"class":150},[144,2522,782],{"class":179},[144,2524,821],{"class":150},[144,2526,464],{"class":154},[144,2528,162],{"class":150},[144,2530,2531,2534,2536],{"class":146,"line":1644},[144,2532,2533],{"class":150},"      \u003C\u002F",[144,2535,1431],{"class":154},[144,2537,162],{"class":150},[144,2539,2540,2542,2544],{"class":146,"line":1653},[144,2541,1572],{"class":150},[144,2543,1425],{"class":154},[144,2545,162],{"class":150},[144,2547,2548],{"class":146,"line":1658},[144,2549,795],{"emptyLinePlaceholder":794},[144,2551,2552,2554,2556],{"class":146,"line":1667},[144,2553,199],{"class":150},[144,2555,1437],{"class":154},[144,2557,162],{"class":150},[144,2559,2560,2562,2564,2566,2568,2571],{"class":146,"line":1681},[144,2561,1512],{"class":150},[144,2563,802],{"class":154},[144,2565,805],{"class":158},[144,2567,176],{"class":150},[144,2569,2570],{"class":179},"\"apropos\"",[144,2572,162],{"class":150},[144,2574,2575,2577,2579,2581,2583],{"class":146,"line":1690},[144,2576,2475],{"class":150},[144,2578,15],{"class":154},[144,2580,756],{"class":150},[144,2582,15],{"class":154},[144,2584,162],{"class":150},[144,2586,2588,2590,2592,2595,2597],{"class":146,"line":2587},22,[144,2589,2475],{"class":150},[144,2591,20],{"class":154},[144,2593,2594],{"class":150},">Je développe des sites web et des applications modernes.\u003C\u002F",[144,2596,20],{"class":154},[144,2598,162],{"class":150},[144,2600,2602,2604,2606],{"class":146,"line":2601},23,[144,2603,2533],{"class":150},[144,2605,802],{"class":154},[144,2607,162],{"class":150},[144,2609,2611],{"class":146,"line":2610},24,[144,2612,795],{"emptyLinePlaceholder":794},[144,2614,2616,2618,2620,2622,2624,2627],{"class":146,"line":2615},25,[144,2617,1512],{"class":150},[144,2619,802],{"class":154},[144,2621,805],{"class":158},[144,2623,176],{"class":150},[144,2625,2626],{"class":179},"\"projets\"",[144,2628,162],{"class":150},[144,2630,2632,2634,2636,2638,2640],{"class":146,"line":2631},26,[144,2633,2475],{"class":150},[144,2635,15],{"class":154},[144,2637,2506],{"class":150},[144,2639,15],{"class":154},[144,2641,162],{"class":150},[144,2643,2645,2647,2649],{"class":146,"line":2644},27,[144,2646,2475],{"class":150},[144,2648,40],{"class":154},[144,2650,162],{"class":150},[144,2652,2654,2657,2659,2662,2664],{"class":146,"line":2653},28,[144,2655,2656],{"class":150},"          \u003C",[144,2658,43],{"class":154},[144,2660,2661],{"class":150},">Portfolio personnel\u003C\u002F",[144,2663,43],{"class":154},[144,2665,162],{"class":150},[144,2667,2669,2671,2673,2676,2678],{"class":146,"line":2668},29,[144,2670,2656],{"class":150},[144,2672,43],{"class":154},[144,2674,2675],{"class":150},">Application de gestion\u003C\u002F",[144,2677,43],{"class":154},[144,2679,162],{"class":150},[144,2681,2683,2685,2687,2690,2692],{"class":146,"line":2682},30,[144,2684,2656],{"class":150},[144,2686,43],{"class":154},[144,2688,2689],{"class":150},">Blog technique\u003C\u002F",[144,2691,43],{"class":154},[144,2693,162],{"class":150},[144,2695,2697,2700,2702],{"class":146,"line":2696},31,[144,2698,2699],{"class":150},"        \u003C\u002F",[144,2701,40],{"class":154},[144,2703,162],{"class":150},[144,2705,2707,2709,2711],{"class":146,"line":2706},32,[144,2708,2533],{"class":150},[144,2710,802],{"class":154},[144,2712,162],{"class":150},[144,2714,2716],{"class":146,"line":2715},33,[144,2717,795],{"emptyLinePlaceholder":794},[144,2719,2721,2723,2725,2727,2729,2731],{"class":146,"line":2720},34,[144,2722,1512],{"class":150},[144,2724,802],{"class":154},[144,2726,805],{"class":158},[144,2728,176],{"class":150},[144,2730,810],{"class":179},[144,2732,162],{"class":150},[144,2734,2736,2738,2740,2742,2744],{"class":146,"line":2735},35,[144,2737,2475],{"class":150},[144,2739,15],{"class":154},[144,2741,821],{"class":150},[144,2743,15],{"class":154},[144,2745,162],{"class":150},[144,2747,2749,2751,2753],{"class":146,"line":2748},36,[144,2750,2475],{"class":150},[144,2752,1919],{"class":154},[144,2754,162],{"class":150},[144,2756,2758,2760,2762,2764,2766,2769,2772,2774],{"class":146,"line":2757},37,[144,2759,2656],{"class":150},[144,2761,1928],{"class":154},[144,2763,1931],{"class":158},[144,2765,176],{"class":150},[144,2767,2768],{"class":179},"\"message\"",[144,2770,2771],{"class":150},">Message\u003C\u002F",[144,2773,1928],{"class":154},[144,2775,162],{"class":150},[144,2777,2779,2781,2784,2786,2788,2790,2792,2794,2796,2799,2801],{"class":146,"line":2778},38,[144,2780,2656],{"class":150},[144,2782,2783],{"class":154},"textarea",[144,2785,805],{"class":158},[144,2787,176],{"class":150},[144,2789,2768],{"class":179},[144,2791,222],{"class":158},[144,2793,176],{"class":150},[144,2795,2768],{"class":179},[144,2797,2798],{"class":150},">\u003C\u002F",[144,2800,2783],{"class":154},[144,2802,162],{"class":150},[144,2804,2806,2808,2810,2812,2814,2816,2818,2820],{"class":146,"line":2805},39,[144,2807,2656],{"class":150},[144,2809,2033],{"class":154},[144,2811,1953],{"class":158},[144,2813,176],{"class":150},[144,2815,2040],{"class":179},[144,2817,2043],{"class":150},[144,2819,2033],{"class":154},[144,2821,162],{"class":150},[144,2823,2825,2827,2829],{"class":146,"line":2824},40,[144,2826,2699],{"class":150},[144,2828,1919],{"class":154},[144,2830,162],{"class":150},[144,2832,2834,2836,2838],{"class":146,"line":2833},41,[144,2835,2533],{"class":150},[144,2837,802],{"class":154},[144,2839,162],{"class":150},[144,2841,2843,2845,2847],{"class":146,"line":2842},42,[144,2844,1572],{"class":150},[144,2846,1437],{"class":154},[144,2848,162],{"class":150},[144,2850,2852],{"class":146,"line":2851},43,[144,2853,795],{"emptyLinePlaceholder":794},[144,2855,2857,2859,2861],{"class":146,"line":2856},44,[144,2858,199],{"class":150},[144,2860,1460],{"class":154},[144,2862,162],{"class":150},[144,2864,2866,2868,2870,2873,2875],{"class":146,"line":2865},45,[144,2867,1512],{"class":150},[144,2869,20],{"class":154},[144,2871,2872],{"class":150},">© 2026 Corneille\u003C\u002F",[144,2874,20],{"class":154},[144,2876,162],{"class":150},[144,2878,2880,2882,2884],{"class":146,"line":2879},46,[144,2881,1572],{"class":150},[144,2883,1460],{"class":154},[144,2885,162],{"class":150},[144,2887,2889,2891,2893],{"class":146,"line":2888},47,[144,2890,258],{"class":150},[144,2892,270],{"class":154},[144,2894,162],{"class":150},[144,2896,2898,2900,2902],{"class":146,"line":2897},48,[144,2899,315],{"class":150},[144,2901,138],{"class":154},[144,2903,162],{"class":150},[20,2905,2906],{},"Cette structure montre bien comment organiser une page cohérente : en-tête, contenu principal et pied de page.",[15,2908,2910],{"id":2909},"_15-les-erreurs-fréquentes","15. Les erreurs fréquentes",[78,2912,2914],{"id":2913},"oublier-de-fermer-une-balise","Oublier de fermer une balise",[20,2916,2917],{},"Incorrect :",[134,2919,2921],{"className":136,"code":2920,"language":138,"meta":139,"style":139},"\u003Cp>Un texte\n",[141,2922,2923],{"__ignoreMap":139},[144,2924,2925,2927,2929],{"class":146,"line":147},[144,2926,168],{"class":150},[144,2928,20],{"class":154},[144,2930,2931],{"class":150},">Un texte\n",[20,2933,2934],{},"Correct :",[134,2936,2938],{"className":136,"code":2937,"language":138,"meta":139,"style":139},"\u003Cp>Un texte\u003C\u002Fp>\n",[141,2939,2940],{"__ignoreMap":139},[144,2941,2942,2944,2946,2949,2951],{"class":146,"line":147},[144,2943,168],{"class":150},[144,2945,20],{"class":154},[144,2947,2948],{"class":150},">Un texte\u003C\u002F",[144,2950,20],{"class":154},[144,2952,162],{"class":150},[78,2954,2956],{"id":2955},"mauvais-emboîtement","Mauvais emboîtement",[20,2958,2917],{},[134,2960,2962],{"className":136,"code":2961,"language":138,"meta":139,"style":139},"\u003Cp>\u003Cstrong>Texte\u003C\u002Fp>\u003C\u002Fstrong>\n",[141,2963,2964],{"__ignoreMap":139},[144,2965,2966,2968,2970,2973,2975,2978,2980,2982,2984],{"class":146,"line":147},[144,2967,168],{"class":150},[144,2969,20],{"class":154},[144,2971,2972],{"class":150},">\u003C",[144,2974,620],{"class":154},[144,2976,2977],{"class":150},">Texte\u003C\u002F",[144,2979,20],{"class":154},[144,2981,2798],{"class":150},[144,2983,620],{"class":154},[144,2985,162],{"class":150},[20,2987,2934],{},[134,2989,2991],{"className":136,"code":2990,"language":138,"meta":139,"style":139},"\u003Cp>\u003Cstrong>Texte\u003C\u002Fstrong>\u003C\u002Fp>\n",[141,2992,2993],{"__ignoreMap":139},[144,2994,2995,2997,2999,3001,3003,3005,3007,3009,3011],{"class":146,"line":147},[144,2996,168],{"class":150},[144,2998,20],{"class":154},[144,3000,2972],{"class":150},[144,3002,620],{"class":154},[144,3004,2977],{"class":150},[144,3006,620],{"class":154},[144,3008,2798],{"class":150},[144,3010,20],{"class":154},[144,3012,162],{"class":150},[78,3014,3016],{"id":3015},"utiliser-une-balise-sans-comprendre-son-rôle","Utiliser une balise sans comprendre son rôle",[20,3018,3019],{},"Ne choisissez pas une balise seulement parce qu'elle \"marche\". Choisissez-la parce qu'elle décrit correctement le contenu.",[78,3021,3023,3024,3026],{"id":3022},"oublier-alt-sur-les-images","Oublier ",[141,3025,904],{}," sur les images",[20,3028,3029,3030,3032],{},"Une image sans ",[141,3031,904],{}," est souvent une mauvaise pratique, surtout si elle transmet une information utile.",[15,3034,3036],{"id":3035},"_16-bonnes-pratiques-à-retenir","16. Bonnes pratiques à retenir",[40,3038,3039,3042,3044,3050,3053,3056],{},[43,3040,3041],{},"garder une structure simple et logique ;",[43,3043,2283],{},[43,3045,3046,3047,3049],{},"préférer les balises sémantiques aux ",[141,3048,2305],{}," partout ;",[43,3051,3052],{},"écrire des attributs clairs ;",[43,3054,3055],{},"éviter de mélanger contenu, style et comportement ;",[43,3057,3058],{},"valider votre HTML quand c'est possible.",[15,3060,3062],{"id":3061},"_17-résumé","17. Résumé",[20,3064,3065],{},"Dans ce tutoriel, nous avons vu :",[40,3067,3068,3071,3074,3077,3080,3083,3085],{},[43,3069,3070],{},"ce qu'est HTML ;",[43,3072,3073],{},"la structure de base d'un document ;",[43,3075,3076],{},"les balises essentielles ;",[43,3078,3079],{},"les liens, images, listes, tableaux et formulaires ;",[43,3081,3082],{},"la sémantique ;",[43,3084,1408],{},[43,3086,3087],{},"les bonnes pratiques pour créer une page propre.",[20,3089,3090],{},"HTML est la fondation d'un site web bien construit. Plus votre structure est claire, plus le reste du projet sera facile à maintenir.",[15,3092,3094],{"id":3093},"exercices","Exercices",[78,3096,3098],{"id":3097},"exercice-1","Exercice 1",[20,3100,3101],{},"Créez une page avec un titre principal, un paragraphe d'introduction et un sous-titre.",[78,3103,3105],{"id":3104},"exercice-2","Exercice 2",[20,3107,3108],{},"Ajoutez une liste de trois éléments présentant vos technologies préférées.",[78,3110,3112],{"id":3111},"exercice-3","Exercice 3",[20,3114,3115],{},"Créez un lien vers un autre site de votre choix.",[78,3117,3119],{"id":3118},"exercice-4","Exercice 4",[20,3121,3122,3123,3125],{},"Ajoutez une image avec un attribut ",[141,3124,904],{}," descriptif.",[78,3127,3129],{"id":3128},"exercice-5","Exercice 5",[20,3131,3132],{},"Créez un petit formulaire avec un champ nom et un bouton d'envoi.",[15,3134,3136],{"id":3135},"corrigés","Corrigés",[78,3138,3140],{"id":3139},"correction-exercice-1","Correction exercice 1",[134,3142,3144],{"className":136,"code":3143,"language":138,"meta":139,"style":139},"\u003Ch1>Bienvenue sur mon site\u003C\u002Fh1>\n\u003Cp>Voici ma première page HTML.\u003C\u002Fp>\n\u003Ch2>Présentation\u003C\u002Fh2>\n",[141,3145,3146,3159,3171],{"__ignoreMap":139},[144,3147,3148,3150,3152,3155,3157],{"class":146,"line":147},[144,3149,168],{"class":150},[144,3151,10],{"class":154},[144,3153,3154],{"class":150},">Bienvenue sur mon site\u003C\u002F",[144,3156,10],{"class":154},[144,3158,162],{"class":150},[144,3160,3161,3163,3165,3167,3169],{"class":146,"line":165},[144,3162,168],{"class":150},[144,3164,20],{"class":154},[144,3166,296],{"class":150},[144,3168,20],{"class":154},[144,3170,162],{"class":150},[144,3172,3173,3175,3177,3180,3182],{"class":146,"line":185},[144,3174,168],{"class":150},[144,3176,15],{"class":154},[144,3178,3179],{"class":150},">Présentation\u003C\u002F",[144,3181,15],{"class":154},[144,3183,162],{"class":150},[78,3185,3187],{"id":3186},"correction-exercice-2","Correction exercice 2",[134,3189,3190],{"className":136,"code":1216,"language":138,"meta":139,"style":139},[141,3191,3192,3200,3212,3224,3236],{"__ignoreMap":139},[144,3193,3194,3196,3198],{"class":146,"line":147},[144,3195,168],{"class":150},[144,3197,40],{"class":154},[144,3199,162],{"class":150},[144,3201,3202,3204,3206,3208,3210],{"class":146,"line":165},[144,3203,188],{"class":150},[144,3205,43],{"class":154},[144,3207,1235],{"class":150},[144,3209,43],{"class":154},[144,3211,162],{"class":150},[144,3213,3214,3216,3218,3220,3222],{"class":146,"line":185},[144,3215,188],{"class":150},[144,3217,43],{"class":154},[144,3219,1248],{"class":150},[144,3221,43],{"class":154},[144,3223,162],{"class":150},[144,3225,3226,3228,3230,3232,3234],{"class":146,"line":196},[144,3227,188],{"class":150},[144,3229,43],{"class":154},[144,3231,1261],{"class":150},[144,3233,43],{"class":154},[144,3235,162],{"class":150},[144,3237,3238,3240,3242],{"class":146,"line":215},[144,3239,315],{"class":150},[144,3241,40],{"class":154},[144,3243,162],{"class":150},[78,3245,3247],{"id":3246},"correction-exercice-3","Correction exercice 3",[134,3249,3251],{"className":136,"code":3250,"language":138,"meta":139,"style":139},"\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\">Documentation MDN\u003C\u002Fa>\n",[141,3252,3253],{"__ignoreMap":139},[144,3254,3255,3257,3259,3261,3263,3265,3268,3270],{"class":146,"line":147},[144,3256,168],{"class":150},[144,3258,464],{"class":154},[144,3260,467],{"class":158},[144,3262,176],{"class":150},[144,3264,724],{"class":179},[144,3266,3267],{"class":150},">Documentation MDN\u003C\u002F",[144,3269,464],{"class":154},[144,3271,162],{"class":150},[78,3273,3275],{"id":3274},"correction-exercice-4","Correction exercice 4",[134,3277,3278],{"className":136,"code":861,"language":138,"meta":139,"style":139},[141,3279,3280],{"__ignoreMap":139},[144,3281,3282,3284,3286,3288,3290,3292,3294,3296,3298],{"class":146,"line":147},[144,3283,168],{"class":150},[144,3285,858],{"class":154},[144,3287,872],{"class":158},[144,3289,176],{"class":150},[144,3291,877],{"class":179},[144,3293,880],{"class":158},[144,3295,176],{"class":150},[144,3297,885],{"class":179},[144,3299,162],{"class":150},[78,3301,3303],{"id":3302},"correction-exercice-5","Correction exercice 5",[134,3305,3307],{"className":136,"code":3306,"language":138,"meta":139,"style":139},"\u003Cform>\n  \u003Clabel for=\"name\">Nom\u003C\u002Flabel>\n  \u003Cinput type=\"text\" id=\"name\" name=\"name\">\n  \u003Cbutton type=\"submit\">Envoyer\u003C\u002Fbutton>\n\u003C\u002Fform>\n",[141,3308,3309,3317,3335,3361,3379],{"__ignoreMap":139},[144,3310,3311,3313,3315],{"class":146,"line":147},[144,3312,168],{"class":150},[144,3314,1919],{"class":154},[144,3316,162],{"class":150},[144,3318,3319,3321,3323,3325,3327,3329,3331,3333],{"class":146,"line":165},[144,3320,188],{"class":150},[144,3322,1928],{"class":154},[144,3324,1931],{"class":158},[144,3326,176],{"class":150},[144,3328,1936],{"class":179},[144,3330,1939],{"class":150},[144,3332,1928],{"class":154},[144,3334,162],{"class":150},[144,3336,3337,3339,3341,3343,3345,3347,3349,3351,3353,3355,3357,3359],{"class":146,"line":185},[144,3338,188],{"class":150},[144,3340,1950],{"class":154},[144,3342,1953],{"class":158},[144,3344,176],{"class":150},[144,3346,1958],{"class":179},[144,3348,805],{"class":158},[144,3350,176],{"class":150},[144,3352,1936],{"class":179},[144,3354,222],{"class":158},[144,3356,176],{"class":150},[144,3358,1936],{"class":179},[144,3360,162],{"class":150},[144,3362,3363,3365,3367,3369,3371,3373,3375,3377],{"class":146,"line":196},[144,3364,188],{"class":150},[144,3366,2033],{"class":154},[144,3368,1953],{"class":158},[144,3370,176],{"class":150},[144,3372,2040],{"class":179},[144,3374,2043],{"class":150},[144,3376,2033],{"class":154},[144,3378,162],{"class":150},[144,3380,3381,3383,3385],{"class":146,"line":215},[144,3382,315],{"class":150},[144,3384,1919],{"class":154},[144,3386,162],{"class":150},[15,3388,3390],{"id":3389},"prochaine-étape","Prochaine étape",[20,3392,3393],{},"Une fois HTML bien compris, la suite logique est d'apprendre CSS pour mettre en forme la page, puis JavaScript pour ajouter de l'interactivité.",[3395,3396,3397],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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);}",{"title":139,"searchDepth":165,"depth":165,"links":3399},[3400,3401,3402,3408,3411,3416,3419,3424,3429,3440,3445,3450,3453,3459,3466,3470,3471,3478,3479,3480,3487,3494],{"id":17,"depth":165,"text":18},{"id":34,"depth":165,"text":35},{"id":69,"depth":165,"text":70,"children":3403},[3404,3405,3406,3407],{"id":80,"depth":185,"text":81},{"id":87,"depth":185,"text":88},{"id":94,"depth":185,"text":95},{"id":101,"depth":185,"text":102},{"id":128,"depth":165,"text":129,"children":3409},[3410],{"id":322,"depth":185,"text":323},{"id":389,"depth":165,"text":390,"children":3412},[3413,3414,3415],{"id":407,"depth":185,"text":408},{"id":446,"depth":185,"text":447},{"id":488,"depth":185,"text":489},{"id":495,"depth":165,"text":496,"children":3417},[3418],{"id":556,"depth":185,"text":557},{"id":595,"depth":165,"text":596,"children":3420},[3421,3422,3423],{"id":602,"depth":185,"text":603},{"id":635,"depth":185,"text":636},{"id":668,"depth":185,"text":669},{"id":702,"depth":165,"text":703,"children":3425},[3426,3427,3428],{"id":734,"depth":185,"text":735},{"id":763,"depth":185,"text":764},{"id":836,"depth":185,"text":837},{"id":851,"depth":165,"text":852,"children":3430},[3431,3432,3434,3435,3437,3438],{"id":890,"depth":185,"text":891},{"id":924,"depth":185,"text":3433},"Comprendre le chemin dans src",{"id":1057,"depth":185,"text":1058},{"id":1134,"depth":185,"text":3436},"Erreurs fréquentes avec src",{"id":1162,"depth":185,"text":1163},{"id":1189,"depth":185,"text":3439},"Pourquoi alt est essentiel",{"id":1205,"depth":165,"text":1206,"children":3441},[3442,3443,3444],{"id":1212,"depth":185,"text":1213},{"id":1276,"depth":185,"text":1277},{"id":1340,"depth":185,"text":1341},{"id":1393,"depth":165,"text":1394,"children":3446},[3447,3448,3449],{"id":1417,"depth":185,"text":1418},{"id":1464,"depth":185,"text":1465},{"id":1699,"depth":185,"text":1700},{"id":1706,"depth":165,"text":1707,"children":3451},[3452],{"id":1896,"depth":185,"text":1897},{"id":1903,"depth":165,"text":1904,"children":3454},[3455,3456,3458],{"id":2058,"depth":185,"text":2059},{"id":2084,"depth":185,"text":3457},"Pourquoi label est important",{"id":2096,"depth":185,"text":2097},{"id":2137,"depth":165,"text":3460,"children":3461},"12. Les métadonnées utiles dans le head",[3462,3463,3464,3465],{"id":2237,"depth":185,"text":2240},{"id":2246,"depth":185,"text":2249},{"id":245,"depth":185,"text":245},{"id":2262,"depth":185,"text":2262},{"id":2270,"depth":165,"text":2271,"children":3467},[3468,3469],{"id":2277,"depth":185,"text":2278},{"id":2309,"depth":185,"text":2310},{"id":2316,"depth":165,"text":2317},{"id":2909,"depth":165,"text":2910,"children":3472},[3473,3474,3475,3476],{"id":2913,"depth":185,"text":2914},{"id":2955,"depth":185,"text":2956},{"id":3015,"depth":185,"text":3016},{"id":3022,"depth":185,"text":3477},"Oublier alt sur les images",{"id":3035,"depth":165,"text":3036},{"id":3061,"depth":165,"text":3062},{"id":3093,"depth":165,"text":3094,"children":3481},[3482,3483,3484,3485,3486],{"id":3097,"depth":185,"text":3098},{"id":3104,"depth":185,"text":3105},{"id":3111,"depth":185,"text":3112},{"id":3118,"depth":185,"text":3119},{"id":3128,"depth":185,"text":3129},{"id":3135,"depth":165,"text":3136,"children":3488},[3489,3490,3491,3492,3493],{"id":3139,"depth":185,"text":3140},{"id":3186,"depth":185,"text":3187},{"id":3246,"depth":185,"text":3247},{"id":3274,"depth":185,"text":3275},{"id":3302,"depth":185,"text":3303},{"id":3389,"depth":165,"text":3390},null,"Un tutoriel complet pour comprendre HTML, construire une page web de zéro, utiliser les bonnes balises, organiser le contenu et écrire un document sémantique et accessible.","md",{},"\u002Fblog\u002Fapprendre-html-complet","2026-06-09",{"title":5,"description":3496},"blog\u002Fapprendre-html-complet",[3504,3505,3506],"HTML","Débutant","Frontend","bnsbJdRAdXGXQE0A1fBnv_9D3MnpfHI0FHyjDcZt6Y4",1788219651038]