[{"data":1,"prerenderedAt":2968},["ShallowReactive",2],{"en-post-\u002Fen\u002Fsemantic-html-common-mistakes":3},{"id":4,"title":5,"body":6,"description":2957,"extension":2958,"meta":2959,"navigation":157,"path":2963,"seo":2964,"sitemap":2965,"stem":2966,"__hash__":2967},"blogEn\u002Fen\u002Fsemantic-html-common-mistakes.md","Writing Meaningful HTML: 7 Semantic HTML Mistakes Almost Everyone Makes",{"type":7,"value":8,"toc":2939},"minimark",[9,14,27,520,535,541,548,617,620,623,629,632,713,719,749,760,1113,1135,1137,1141,1149,1161,1309,1324,1326,1330,1348,1450,1470,1472,1479,1493,1713,1726,1732,1743,1758,1760,1768,1773,1821,1931,1947,1949,1956,1962,2211,2217,2219,2225,2240,2362,2568,2594,2596,2600,2610,2615,2634,2636,2640,2694,2802,2804,2808,2925,2935],[10,11,13],"h2",{"id":12},"they-look-the-same-so-whats-different","They look the same, so what's different?",[15,16,17,18,22,23,26],"p",{},"The preview below has two cards. One is built entirely from ",[19,20,21],"code",{},"div","s; the other uses tags that match their meaning. They look exactly the same. Compare the code in the ",[19,24,25],{},"html"," tab below.",[28,29,30,254],"code-group",{},[31,32,36],"pre",{"className":33,"code":34,"language":25,"meta":35,"style":35},"language-html shiki shiki-themes github-light github-dark","\u003Cdiv class=\"card\">\n  \u003Cdiv class=\"title\">A card made of divs\u003C\u002Fdiv>\n  \u003Cdiv class=\"text\">Everything here is a div.\u003C\u002Fdiv>\n  \u003Cdiv class=\"btn\" onclick=\"alert('Clicked!')\">Learn more\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Carticle class=\"card\">\n  \u003Ch2 class=\"title\">A card made of semantic tags\u003C\u002Fh2>\n  \u003Cp class=\"text\">Each tag matches its meaning.\u003C\u002Fp>\n  \u003Cbutton class=\"btn\" onclick=\"alert('Clicked!')\">Learn more\u003C\u002Fbutton>\n\u003C\u002Farticle>\n","",[19,37,38,64,86,107,142,152,159,175,195,215,245],{"__ignoreMap":35},[39,40,43,47,50,54,57,61],"span",{"class":41,"line":42},"line",1,[39,44,46],{"class":45},"sVt8B","\u003C",[39,48,21],{"class":49},"s9eBZ",[39,51,53],{"class":52},"sScJk"," class",[39,55,56],{"class":45},"=",[39,58,60],{"class":59},"sZZnC","\"card\"",[39,62,63],{"class":45},">\n",[39,65,67,70,72,74,76,79,82,84],{"class":41,"line":66},2,[39,68,69],{"class":45},"  \u003C",[39,71,21],{"class":49},[39,73,53],{"class":52},[39,75,56],{"class":45},[39,77,78],{"class":59},"\"title\"",[39,80,81],{"class":45},">A card made of divs\u003C\u002F",[39,83,21],{"class":49},[39,85,63],{"class":45},[39,87,89,91,93,95,97,100,103,105],{"class":41,"line":88},3,[39,90,69],{"class":45},[39,92,21],{"class":49},[39,94,53],{"class":52},[39,96,56],{"class":45},[39,98,99],{"class":59},"\"text\"",[39,101,102],{"class":45},">Everything here is a div.\u003C\u002F",[39,104,21],{"class":49},[39,106,63],{"class":45},[39,108,110,112,114,116,118,121,124,126,129,132,135,138,140],{"class":41,"line":109},4,[39,111,69],{"class":45},[39,113,21],{"class":49},[39,115,53],{"class":52},[39,117,56],{"class":45},[39,119,120],{"class":59},"\"btn\"",[39,122,123],{"class":52}," onclick",[39,125,56],{"class":45},[39,127,128],{"class":59},"\"",[39,130,131],{"class":52},"alert",[39,133,134],{"class":59},"('Clicked!')\"",[39,136,137],{"class":45},">Learn more\u003C\u002F",[39,139,21],{"class":49},[39,141,63],{"class":45},[39,143,145,148,150],{"class":41,"line":144},5,[39,146,147],{"class":45},"\u003C\u002F",[39,149,21],{"class":49},[39,151,63],{"class":45},[39,153,155],{"class":41,"line":154},6,[39,156,158],{"emptyLinePlaceholder":157},true,"\n",[39,160,162,164,167,169,171,173],{"class":41,"line":161},7,[39,163,46],{"class":45},[39,165,166],{"class":49},"article",[39,168,53],{"class":52},[39,170,56],{"class":45},[39,172,60],{"class":59},[39,174,63],{"class":45},[39,176,178,180,182,184,186,188,191,193],{"class":41,"line":177},8,[39,179,69],{"class":45},[39,181,10],{"class":49},[39,183,53],{"class":52},[39,185,56],{"class":45},[39,187,78],{"class":59},[39,189,190],{"class":45},">A card made of semantic tags\u003C\u002F",[39,192,10],{"class":49},[39,194,63],{"class":45},[39,196,198,200,202,204,206,208,211,213],{"class":41,"line":197},9,[39,199,69],{"class":45},[39,201,15],{"class":49},[39,203,53],{"class":52},[39,205,56],{"class":45},[39,207,99],{"class":59},[39,209,210],{"class":45},">Each tag matches its meaning.\u003C\u002F",[39,212,15],{"class":49},[39,214,63],{"class":45},[39,216,218,220,223,225,227,229,231,233,235,237,239,241,243],{"class":41,"line":217},10,[39,219,69],{"class":45},[39,221,222],{"class":49},"button",[39,224,53],{"class":52},[39,226,56],{"class":45},[39,228,120],{"class":59},[39,230,123],{"class":52},[39,232,56],{"class":45},[39,234,128],{"class":59},[39,236,131],{"class":52},[39,238,134],{"class":59},[39,240,137],{"class":45},[39,242,222],{"class":49},[39,244,63],{"class":45},[39,246,248,250,252],{"class":41,"line":247},11,[39,249,147],{"class":45},[39,251,166],{"class":49},[39,253,63],{"class":45},[31,255,259],{"className":256,"code":257,"language":258,"meta":35,"style":35},"language-css shiki shiki-themes github-light github-dark",".card { border: 1px solid #ddd; border-radius: 12px; padding: 16px; margin-bottom: 12px; max-width: 320px; }\n.title { font-size: 18px; font-weight: 700; margin: 0 0 6px; }\n.text { color: #555; margin: 0 0 12px; }\n.btn { display: inline-block; font: inherit; font-size: 14px; padding: 6px 12px; border: 0; border-radius: 8px; background: #f59e0b; color: #fff; cursor: pointer; }\n","css",[19,260,261,340,387,419],{"__ignoreMap":35},[39,262,263,266,269,273,276,279,283,286,289,292,295,297,300,302,304,307,309,312,314,316,319,321,323,325,327,330,332,335,337],{"class":41,"line":42},[39,264,265],{"class":52},".card",[39,267,268],{"class":45}," { ",[39,270,272],{"class":271},"sj4cs","border",[39,274,275],{"class":45},": ",[39,277,278],{"class":271},"1",[39,280,282],{"class":281},"szBVR","px",[39,284,285],{"class":271}," solid",[39,287,288],{"class":271}," #ddd",[39,290,291],{"class":45},"; ",[39,293,294],{"class":271},"border-radius",[39,296,275],{"class":45},[39,298,299],{"class":271},"12",[39,301,282],{"class":281},[39,303,291],{"class":45},[39,305,306],{"class":271},"padding",[39,308,275],{"class":45},[39,310,311],{"class":271},"16",[39,313,282],{"class":281},[39,315,291],{"class":45},[39,317,318],{"class":271},"margin-bottom",[39,320,275],{"class":45},[39,322,299],{"class":271},[39,324,282],{"class":281},[39,326,291],{"class":45},[39,328,329],{"class":271},"max-width",[39,331,275],{"class":45},[39,333,334],{"class":271},"320",[39,336,282],{"class":281},[39,338,339],{"class":45},"; }\n",[39,341,342,345,347,350,352,355,357,359,362,364,367,369,372,374,377,380,383,385],{"class":41,"line":66},[39,343,344],{"class":52},".title",[39,346,268],{"class":45},[39,348,349],{"class":271},"font-size",[39,351,275],{"class":45},[39,353,354],{"class":271},"18",[39,356,282],{"class":281},[39,358,291],{"class":45},[39,360,361],{"class":271},"font-weight",[39,363,275],{"class":45},[39,365,366],{"class":271},"700",[39,368,291],{"class":45},[39,370,371],{"class":271},"margin",[39,373,275],{"class":45},[39,375,376],{"class":271},"0",[39,378,379],{"class":271}," 0",[39,381,382],{"class":271}," 6",[39,384,282],{"class":281},[39,386,339],{"class":45},[39,388,389,392,394,397,399,402,404,406,408,410,412,415,417],{"class":41,"line":88},[39,390,391],{"class":52},".text",[39,393,268],{"class":45},[39,395,396],{"class":271},"color",[39,398,275],{"class":45},[39,400,401],{"class":271},"#555",[39,403,291],{"class":45},[39,405,371],{"class":271},[39,407,275],{"class":45},[39,409,376],{"class":271},[39,411,379],{"class":271},[39,413,414],{"class":271}," 12",[39,416,282],{"class":281},[39,418,339],{"class":45},[39,420,421,424,426,429,431,434,436,439,441,444,446,448,450,453,455,457,459,461,464,466,468,470,472,474,476,478,480,482,484,487,489,491,494,496,499,501,503,505,508,510,513,515,518],{"class":41,"line":109},[39,422,423],{"class":52},".btn",[39,425,268],{"class":45},[39,427,428],{"class":271},"display",[39,430,275],{"class":45},[39,432,433],{"class":271},"inline-block",[39,435,291],{"class":45},[39,437,438],{"class":271},"font",[39,440,275],{"class":45},[39,442,443],{"class":271},"inherit",[39,445,291],{"class":45},[39,447,349],{"class":271},[39,449,275],{"class":45},[39,451,452],{"class":271},"14",[39,454,282],{"class":281},[39,456,291],{"class":45},[39,458,306],{"class":271},[39,460,275],{"class":45},[39,462,463],{"class":271},"6",[39,465,282],{"class":281},[39,467,414],{"class":271},[39,469,282],{"class":281},[39,471,291],{"class":45},[39,473,272],{"class":271},[39,475,275],{"class":45},[39,477,376],{"class":271},[39,479,291],{"class":45},[39,481,294],{"class":271},[39,483,275],{"class":45},[39,485,486],{"class":271},"8",[39,488,282],{"class":281},[39,490,291],{"class":45},[39,492,493],{"class":271},"background",[39,495,275],{"class":45},[39,497,498],{"class":271},"#f59e0b",[39,500,291],{"class":45},[39,502,396],{"class":271},[39,504,275],{"class":45},[39,506,507],{"class":271},"#fff",[39,509,291],{"class":45},[39,511,512],{"class":271},"cursor",[39,514,275],{"class":45},[39,516,517],{"class":271},"pointer",[39,519,339],{"class":45},[15,521,522,523,531,532,534],{},"Both work fine with a mouse. But ",[524,525,526,527,530],"strong",{},"click once inside the preview and press ",[19,528,529],{},"Tab","."," Focus only goes to the button in the second card. The ",[19,533,21],{}," button can't be reached from the keyboard at all.",[536,537,538],"blockquote",{},[15,539,540],{},"Semantic HTML means choosing tags by \"what it is,\" not \"how it looks.\" CSS handles appearance; tags handle meaning.",[15,542,543,544,547],{},"To someone looking at the screen there's no difference. To anything that ",[524,545,546],{},"reads"," the HTML, the difference is big.",[549,550,551,564],"table",{},[552,553,554],"thead",{},[555,556,557,561],"tr",{},[558,559,560],"th",{},"Who reads your HTML",[558,562,563],{},"What meaningful tags give them",[565,566,567,579,587,595,603],"tbody",{},[555,568,569,573],{},[570,571,572],"td",{},"Keyboard users",[570,574,575,576,578],{},"They can ",[19,577,529],{}," between buttons, links, and inputs",[555,580,581,584],{},[570,582,583],{},"Screen readers",[570,585,586],{},"They announce roles like \"button,\" \"heading level 2,\" \"navigation\"",[555,588,589,592],{},[570,590,591],{},"Search engines",[570,593,594],{},"They can tell main content, headings, and navigation apart",[555,596,597,600],{},[570,598,599],{},"Browsers",[570,601,602],{},"Reader mode, auto-translate, and autofill work better",[555,604,605,608],{},[570,606,607],{},"The next developer",[570,609,610,613,614],{},[19,611,612],{},"header"," reads faster than ",[19,615,616],{},"div class=\"header\"",[15,618,619],{},"Let's go through the mistakes you see most often in real code.",[621,622],"hr",{},[10,624,626,627],{"id":625},"mistake-1-a-clickable-div","Mistake 1. A clickable ",[19,628,21],{},[15,630,631],{},"The most common mistake, and the one with the biggest impact.",[31,633,635],{"className":33,"code":634,"language":25,"meta":35,"style":35},"\u003C!-- ❌ -->\n\u003Cdiv class=\"btn\" onclick=\"save()\">Save\u003C\u002Fdiv>\n\n\u003C!-- ✅ -->\n\u003Cbutton type=\"button\" onclick=\"save()\">Save\u003C\u002Fbutton>\n",[19,636,637,643,674,678,683],{"__ignoreMap":35},[39,638,639],{"class":41,"line":42},[39,640,642],{"class":641},"sJ8bj","\u003C!-- ❌ -->\n",[39,644,645,647,649,651,653,655,657,659,661,664,667,670,672],{"class":41,"line":66},[39,646,46],{"class":45},[39,648,21],{"class":49},[39,650,53],{"class":52},[39,652,56],{"class":45},[39,654,120],{"class":59},[39,656,123],{"class":52},[39,658,56],{"class":45},[39,660,128],{"class":59},[39,662,663],{"class":52},"save",[39,665,666],{"class":59},"()\"",[39,668,669],{"class":45},">Save\u003C\u002F",[39,671,21],{"class":49},[39,673,63],{"class":45},[39,675,676],{"class":41,"line":88},[39,677,158],{"emptyLinePlaceholder":157},[39,679,680],{"class":41,"line":109},[39,681,682],{"class":641},"\u003C!-- ✅ -->\n",[39,684,685,687,689,692,694,697,699,701,703,705,707,709,711],{"class":41,"line":144},[39,686,46],{"class":45},[39,688,222],{"class":49},[39,690,691],{"class":52}," type",[39,693,56],{"class":45},[39,695,696],{"class":59},"\"button\"",[39,698,123],{"class":52},[39,700,56],{"class":45},[39,702,128],{"class":59},[39,704,663],{"class":52},[39,706,666],{"class":59},[39,708,669],{"class":45},[39,710,222],{"class":49},[39,712,63],{"class":45},[15,714,715,716,718],{},"Faking a button properly with a ",[19,717,21],{}," takes all of this:",[720,721,722,729,735,746],"ul",{},[723,724,725,728],"li",{},[19,726,727],{},"tabindex=\"0\""," so it can receive keyboard focus",[723,730,731,734],{},[19,732,733],{},"role=\"button\""," so screen readers know it's a button",[723,736,737,738,741,742,745],{},"Handling the ",[19,739,740],{},"Enter"," and ",[19,743,744],{},"Space"," keys yourself",[723,747,748],{},"Implementing a disabled state yourself",[15,750,751,752,754,755,757,758,530],{},"A ",[19,753,222],{}," tag gives you all of it by default. Click inside the preview below, move focus with ",[19,756,529],{},", and press ",[19,759,740],{},[28,761,762,828,992],{},[31,763,765],{"className":33,"code":764,"language":25,"meta":35,"style":35},"\u003Cdiv class=\"fake\">div button\u003C\u002Fdiv>\n\u003Cbutton class=\"real\">Real button\u003C\u002Fbutton>\n\u003Cp id=\"out\">Click inside the preview, then press Tab → Enter.\u003C\u002Fp>\n",[19,766,767,787,807],{"__ignoreMap":35},[39,768,769,771,773,775,777,780,783,785],{"class":41,"line":42},[39,770,46],{"class":45},[39,772,21],{"class":49},[39,774,53],{"class":52},[39,776,56],{"class":45},[39,778,779],{"class":59},"\"fake\"",[39,781,782],{"class":45},">div button\u003C\u002F",[39,784,21],{"class":49},[39,786,63],{"class":45},[39,788,789,791,793,795,797,800,803,805],{"class":41,"line":66},[39,790,46],{"class":45},[39,792,222],{"class":49},[39,794,53],{"class":52},[39,796,56],{"class":45},[39,798,799],{"class":59},"\"real\"",[39,801,802],{"class":45},">Real button\u003C\u002F",[39,804,222],{"class":49},[39,806,63],{"class":45},[39,808,809,811,813,816,818,821,824,826],{"class":41,"line":88},[39,810,46],{"class":45},[39,812,15],{"class":49},[39,814,815],{"class":52}," id",[39,817,56],{"class":45},[39,819,820],{"class":59},"\"out\"",[39,822,823],{"class":45},">Click inside the preview, then press Tab → Enter.\u003C\u002F",[39,825,15],{"class":49},[39,827,63],{"class":45},[31,829,831],{"className":256,"code":830,"language":258,"meta":35,"style":35},".fake, .real { font: inherit; padding: 8px 14px; margin-right: 8px; border-radius: 8px; border: 1px solid #999; background: #f4f4f5; cursor: pointer; display: inline-block; }\n.real:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }\n#out { margin-top: 16px; color: #555; }\n",[19,832,833,930,966],{"__ignoreMap":35},[39,834,835,838,841,844,846,848,850,852,854,856,858,860,862,865,867,869,872,874,876,878,880,882,884,886,888,890,892,894,896,898,900,903,905,907,909,912,914,916,918,920,922,924,926,928],{"class":41,"line":42},[39,836,837],{"class":52},".fake",[39,839,840],{"class":45},", ",[39,842,843],{"class":52},".real",[39,845,268],{"class":45},[39,847,438],{"class":271},[39,849,275],{"class":45},[39,851,443],{"class":271},[39,853,291],{"class":45},[39,855,306],{"class":271},[39,857,275],{"class":45},[39,859,486],{"class":271},[39,861,282],{"class":281},[39,863,864],{"class":271}," 14",[39,866,282],{"class":281},[39,868,291],{"class":45},[39,870,871],{"class":271},"margin-right",[39,873,275],{"class":45},[39,875,486],{"class":271},[39,877,282],{"class":281},[39,879,291],{"class":45},[39,881,294],{"class":271},[39,883,275],{"class":45},[39,885,486],{"class":271},[39,887,282],{"class":281},[39,889,291],{"class":45},[39,891,272],{"class":271},[39,893,275],{"class":45},[39,895,278],{"class":271},[39,897,282],{"class":281},[39,899,285],{"class":271},[39,901,902],{"class":271}," #999",[39,904,291],{"class":45},[39,906,493],{"class":271},[39,908,275],{"class":45},[39,910,911],{"class":271},"#f4f4f5",[39,913,291],{"class":45},[39,915,512],{"class":271},[39,917,275],{"class":45},[39,919,517],{"class":271},[39,921,291],{"class":45},[39,923,428],{"class":271},[39,925,275],{"class":45},[39,927,433],{"class":271},[39,929,339],{"class":45},[39,931,932,935,937,940,942,945,947,949,952,954,957,959,962,964],{"class":41,"line":66},[39,933,934],{"class":52},".real:focus-visible",[39,936,268],{"class":45},[39,938,939],{"class":271},"outline",[39,941,275],{"class":45},[39,943,944],{"class":271},"3",[39,946,282],{"class":281},[39,948,285],{"class":271},[39,950,951],{"class":271}," #f59e0b",[39,953,291],{"class":45},[39,955,956],{"class":271},"outline-offset",[39,958,275],{"class":45},[39,960,961],{"class":271},"2",[39,963,282],{"class":281},[39,965,339],{"class":45},[39,967,968,971,973,976,978,980,982,984,986,988,990],{"class":41,"line":88},[39,969,970],{"class":52},"#out",[39,972,268],{"class":45},[39,974,975],{"class":271},"margin-top",[39,977,275],{"class":45},[39,979,311],{"class":271},[39,981,282],{"class":281},[39,983,291],{"class":45},[39,985,396],{"class":271},[39,987,275],{"class":45},[39,989,401],{"class":271},[39,991,339],{"class":45},[31,993,997],{"className":994,"code":995,"language":996,"meta":35,"style":35},"language-js shiki shiki-themes github-light github-dark","const out = (msg) => (document.getElementById(\"out\").textContent = msg);\ndocument.querySelector(\".fake\").addEventListener(\"click\", () => out(\"div button clicked (mouse only)\"));\ndocument.querySelector(\".real\").addEventListener(\"click\", () => out(\"Real button clicked (keyboard works too)\"));\n","js",[19,998,999,1042,1081],{"__ignoreMap":35},[39,1000,1001,1004,1007,1010,1013,1017,1020,1023,1026,1029,1032,1034,1037,1039],{"class":41,"line":42},[39,1002,1003],{"class":281},"const",[39,1005,1006],{"class":52}," out",[39,1008,1009],{"class":281}," =",[39,1011,1012],{"class":45}," (",[39,1014,1016],{"class":1015},"s4XuR","msg",[39,1018,1019],{"class":45},") ",[39,1021,1022],{"class":281},"=>",[39,1024,1025],{"class":45}," (document.",[39,1027,1028],{"class":52},"getElementById",[39,1030,1031],{"class":45},"(",[39,1033,820],{"class":59},[39,1035,1036],{"class":45},").textContent ",[39,1038,56],{"class":281},[39,1040,1041],{"class":45}," msg);\n",[39,1043,1044,1047,1050,1052,1055,1058,1061,1063,1066,1069,1071,1073,1075,1078],{"class":41,"line":66},[39,1045,1046],{"class":45},"document.",[39,1048,1049],{"class":52},"querySelector",[39,1051,1031],{"class":45},[39,1053,1054],{"class":59},"\".fake\"",[39,1056,1057],{"class":45},").",[39,1059,1060],{"class":52},"addEventListener",[39,1062,1031],{"class":45},[39,1064,1065],{"class":59},"\"click\"",[39,1067,1068],{"class":45},", () ",[39,1070,1022],{"class":281},[39,1072,1006],{"class":52},[39,1074,1031],{"class":45},[39,1076,1077],{"class":59},"\"div button clicked (mouse only)\"",[39,1079,1080],{"class":45},"));\n",[39,1082,1083,1085,1087,1089,1092,1094,1096,1098,1100,1102,1104,1106,1108,1111],{"class":41,"line":88},[39,1084,1046],{"class":45},[39,1086,1049],{"class":52},[39,1088,1031],{"class":45},[39,1090,1091],{"class":59},"\".real\"",[39,1093,1057],{"class":45},[39,1095,1060],{"class":52},[39,1097,1031],{"class":45},[39,1099,1065],{"class":59},[39,1101,1068],{"class":45},[39,1103,1022],{"class":281},[39,1105,1006],{"class":52},[39,1107,1031],{"class":45},[39,1109,1110],{"class":59},"\"Real button clicked (keyboard works too)\"",[39,1112,1080],{"class":45},[1114,1115,1116],"tip",{},[536,1117,1118],{},[15,1119,751,1120,1122,1123,1126,1127,1130,1131,1134],{},[19,1121,222],{}," inside a ",[19,1124,1125],{},"form"," defaults to ",[19,1128,1129],{},"type=\"submit\"",". If the button shouldn't submit the form, always write ",[19,1132,1133],{},"type=\"button\"",", or every press will submit it.",[621,1136],{},[10,1138,1140],{"id":1139},"mistake-2-mixing-up-links-and-buttons","Mistake 2. Mixing up links and buttons",[15,1142,1143,741,1146,1148],{},[19,1144,1145],{},"a",[19,1147,222],{}," are both \"things you press,\" so they're easy to confuse, but the rule is simple.",[536,1150,1151],{},[15,1152,1153],{},[524,1154,1155,1156,1158,1159,530],{},"If it takes you somewhere else, it's an ",[19,1157,1145],{},". If it does something on the current page, it's a ",[19,1160,222],{},[31,1162,1164],{"className":33,"code":1163,"language":25,"meta":35,"style":35},"\u003C!-- ❌ Using a link for something that doesn't navigate -->\n\u003Ca href=\"#\" onclick=\"openModal()\">Log in\u003C\u002Fa>\n\n\u003C!-- ✅ It acts on the current page, so it's a button -->\n\u003Cbutton type=\"button\" onclick=\"openModal()\">Log in\u003C\u002Fbutton>\n\n\u003C!-- ❌ Using a button to navigate -->\n\u003Cbutton onclick=\"location.href='\u002Fpricing'\">See pricing\u003C\u002Fbutton>\n\n\u003C!-- ✅ It navigates, so it's a link -->\n\u003Ca href=\"\u002Fpricing\">See pricing\u003C\u002Fa>\n",[19,1165,1166,1171,1203,1207,1212,1240,1244,1249,1281,1285,1290],{"__ignoreMap":35},[39,1167,1168],{"class":41,"line":42},[39,1169,1170],{"class":641},"\u003C!-- ❌ Using a link for something that doesn't navigate -->\n",[39,1172,1173,1175,1177,1180,1182,1185,1187,1189,1191,1194,1196,1199,1201],{"class":41,"line":66},[39,1174,46],{"class":45},[39,1176,1145],{"class":49},[39,1178,1179],{"class":52}," href",[39,1181,56],{"class":45},[39,1183,1184],{"class":59},"\"#\"",[39,1186,123],{"class":52},[39,1188,56],{"class":45},[39,1190,128],{"class":59},[39,1192,1193],{"class":52},"openModal",[39,1195,666],{"class":59},[39,1197,1198],{"class":45},">Log in\u003C\u002F",[39,1200,1145],{"class":49},[39,1202,63],{"class":45},[39,1204,1205],{"class":41,"line":88},[39,1206,158],{"emptyLinePlaceholder":157},[39,1208,1209],{"class":41,"line":109},[39,1210,1211],{"class":641},"\u003C!-- ✅ It acts on the current page, so it's a button -->\n",[39,1213,1214,1216,1218,1220,1222,1224,1226,1228,1230,1232,1234,1236,1238],{"class":41,"line":144},[39,1215,46],{"class":45},[39,1217,222],{"class":49},[39,1219,691],{"class":52},[39,1221,56],{"class":45},[39,1223,696],{"class":59},[39,1225,123],{"class":52},[39,1227,56],{"class":45},[39,1229,128],{"class":59},[39,1231,1193],{"class":52},[39,1233,666],{"class":59},[39,1235,1198],{"class":45},[39,1237,222],{"class":49},[39,1239,63],{"class":45},[39,1241,1242],{"class":41,"line":154},[39,1243,158],{"emptyLinePlaceholder":157},[39,1245,1246],{"class":41,"line":161},[39,1247,1248],{"class":641},"\u003C!-- ❌ Using a button to navigate -->\n",[39,1250,1251,1253,1255,1257,1259,1261,1264,1266,1269,1271,1274,1277,1279],{"class":41,"line":177},[39,1252,46],{"class":45},[39,1254,222],{"class":49},[39,1256,123],{"class":52},[39,1258,56],{"class":45},[39,1260,128],{"class":59},[39,1262,1263],{"class":45},"location",[39,1265,530],{"class":59},[39,1267,1268],{"class":45},"href",[39,1270,56],{"class":281},[39,1272,1273],{"class":59},"'\u002Fpricing'\"",[39,1275,1276],{"class":45},">See pricing\u003C\u002F",[39,1278,222],{"class":49},[39,1280,63],{"class":45},[39,1282,1283],{"class":41,"line":197},[39,1284,158],{"emptyLinePlaceholder":157},[39,1286,1287],{"class":41,"line":217},[39,1288,1289],{"class":641},"\u003C!-- ✅ It navigates, so it's a link -->\n",[39,1291,1292,1294,1296,1298,1300,1303,1305,1307],{"class":41,"line":247},[39,1293,46],{"class":45},[39,1295,1145],{"class":49},[39,1297,1179],{"class":52},[39,1299,56],{"class":45},[39,1301,1302],{"class":59},"\"\u002Fpricing\"",[39,1304,1276],{"class":45},[39,1306,1145],{"class":49},[39,1308,63],{"class":45},[15,1310,1311,1312,1315,1316,1319,1320,1323],{},"Turn a link into a button and ",[524,1313,1314],{},"open in new tab, copy link address, and search engine crawling"," all stop working. Use an ",[19,1317,1318],{},"href=\"#\""," link as a button and the page jumps to the top or the URL gets a ",[19,1321,1322],{},"#"," tacked on.",[621,1325],{},[10,1327,1329],{"id":1328},"mistake-3-picking-heading-tags-by-font-size","Mistake 3. Picking heading tags by font size",[15,1331,1332,1333,1336,1337,1340,1341,1344,1345,1347],{},"\"This needs to be small, so ",[19,1334,1335],{},"h4","\" is a very common choice. But ",[19,1338,1339],{},"h1","–",[19,1342,1343],{},"h6"," build the document's ",[524,1346,939],{},". Screen reader users skim pages by listening to headings only.",[31,1349,1351],{"className":33,"code":1350,"language":25,"meta":35,"style":35},"\u003C!-- ❌ Picked by size, so the levels are all over the place -->\n\u003Ch1>Shop\u003C\u002Fh1>\n\u003Ch4>Today's picks\u003C\u002Fh4>\n\u003Ch2>Product name\u003C\u002Fh2>\n\n\u003C!-- ✅ Follow the structure, size with CSS -->\n\u003Ch1>Shop\u003C\u002Fh1>\n\u003Ch2 class=\"section-title\">Today's picks\u003C\u002Fh2>\n\u003Ch3>Product name\u003C\u002Fh3>\n",[19,1352,1353,1358,1371,1384,1397,1401,1406,1418,1437],{"__ignoreMap":35},[39,1354,1355],{"class":41,"line":42},[39,1356,1357],{"class":641},"\u003C!-- ❌ Picked by size, so the levels are all over the place -->\n",[39,1359,1360,1362,1364,1367,1369],{"class":41,"line":66},[39,1361,46],{"class":45},[39,1363,1339],{"class":49},[39,1365,1366],{"class":45},">Shop\u003C\u002F",[39,1368,1339],{"class":49},[39,1370,63],{"class":45},[39,1372,1373,1375,1377,1380,1382],{"class":41,"line":88},[39,1374,46],{"class":45},[39,1376,1335],{"class":49},[39,1378,1379],{"class":45},">Today's picks\u003C\u002F",[39,1381,1335],{"class":49},[39,1383,63],{"class":45},[39,1385,1386,1388,1390,1393,1395],{"class":41,"line":109},[39,1387,46],{"class":45},[39,1389,10],{"class":49},[39,1391,1392],{"class":45},">Product name\u003C\u002F",[39,1394,10],{"class":49},[39,1396,63],{"class":45},[39,1398,1399],{"class":41,"line":144},[39,1400,158],{"emptyLinePlaceholder":157},[39,1402,1403],{"class":41,"line":154},[39,1404,1405],{"class":641},"\u003C!-- ✅ Follow the structure, size with CSS -->\n",[39,1407,1408,1410,1412,1414,1416],{"class":41,"line":161},[39,1409,46],{"class":45},[39,1411,1339],{"class":49},[39,1413,1366],{"class":45},[39,1415,1339],{"class":49},[39,1417,63],{"class":45},[39,1419,1420,1422,1424,1426,1428,1431,1433,1435],{"class":41,"line":177},[39,1421,46],{"class":45},[39,1423,10],{"class":49},[39,1425,53],{"class":52},[39,1427,56],{"class":45},[39,1429,1430],{"class":59},"\"section-title\"",[39,1432,1379],{"class":45},[39,1434,10],{"class":49},[39,1436,63],{"class":45},[39,1438,1439,1441,1444,1446,1448],{"class":41,"line":197},[39,1440,46],{"class":45},[39,1442,1443],{"class":49},"h3",[39,1445,1392],{"class":45},[39,1447,1443],{"class":49},[39,1449,63],{"class":45},[720,1451,1452,1458,1467],{},[723,1453,1454,1455,1457],{},"It's safest to have a single ",[19,1456,1339],{}," describing the page's topic.",[723,1459,1460,1461,1463,1464,1466],{},"Don't skip levels (",[19,1462,10],{}," straight to ",[19,1465,1335],{}," ❌).",[723,1468,1469],{},"To change the size, change the CSS, not the tag.",[621,1471],{},[10,1473,1475,1476],{"id":1474},"mistake-4-inputs-without-a-label","Mistake 4. Inputs without a ",[19,1477,1478],{},"label",[15,1480,1481,1482,1484,1485,1488,1489,1492],{},"People often drop the ",[19,1483,1478],{}," and rely on ",[19,1486,1487],{},"placeholder"," because it looks cleaner. In the preview, click the ",[524,1490,1491],{},"text"," next to each checkbox.",[28,1494,1495,1637],{},[31,1496,1498],{"className":33,"code":1497,"language":25,"meta":35,"style":35},"\u003Cp>\u003Cinput type=\"checkbox\" \u002F> I agree to the terms (no label)\u003C\u002Fp>\n\n\u003Cp>\u003Clabel>\u003Cinput type=\"checkbox\" \u002F> I agree to the terms (with label)\u003C\u002Flabel>\u003C\u002Fp>\n\n\u003Cp>\n  \u003Clabel for=\"email\">Email\u003C\u002Flabel>\u003Cbr \u002F>\n  \u003Cinput id=\"email\" type=\"email\" placeholder=\"you@example.com\" \u002F>\n\u003C\u002Fp>\n",[19,1499,1500,1526,1530,1562,1566,1574,1601,1629],{"__ignoreMap":35},[39,1501,1502,1504,1506,1509,1512,1514,1516,1519,1522,1524],{"class":41,"line":42},[39,1503,46],{"class":45},[39,1505,15],{"class":49},[39,1507,1508],{"class":45},">\u003C",[39,1510,1511],{"class":49},"input",[39,1513,691],{"class":52},[39,1515,56],{"class":45},[39,1517,1518],{"class":59},"\"checkbox\"",[39,1520,1521],{"class":45}," \u002F> I agree to the terms (no label)\u003C\u002F",[39,1523,15],{"class":49},[39,1525,63],{"class":45},[39,1527,1528],{"class":41,"line":66},[39,1529,158],{"emptyLinePlaceholder":157},[39,1531,1532,1534,1536,1538,1540,1542,1544,1546,1548,1550,1553,1555,1558,1560],{"class":41,"line":88},[39,1533,46],{"class":45},[39,1535,15],{"class":49},[39,1537,1508],{"class":45},[39,1539,1478],{"class":49},[39,1541,1508],{"class":45},[39,1543,1511],{"class":49},[39,1545,691],{"class":52},[39,1547,56],{"class":45},[39,1549,1518],{"class":59},[39,1551,1552],{"class":45}," \u002F> I agree to the terms (with label)\u003C\u002F",[39,1554,1478],{"class":49},[39,1556,1557],{"class":45},">\u003C\u002F",[39,1559,15],{"class":49},[39,1561,63],{"class":45},[39,1563,1564],{"class":41,"line":109},[39,1565,158],{"emptyLinePlaceholder":157},[39,1567,1568,1570,1572],{"class":41,"line":144},[39,1569,46],{"class":45},[39,1571,15],{"class":49},[39,1573,63],{"class":45},[39,1575,1576,1578,1580,1583,1585,1588,1591,1593,1595,1598],{"class":41,"line":154},[39,1577,69],{"class":45},[39,1579,1478],{"class":49},[39,1581,1582],{"class":52}," for",[39,1584,56],{"class":45},[39,1586,1587],{"class":59},"\"email\"",[39,1589,1590],{"class":45},">Email\u003C\u002F",[39,1592,1478],{"class":49},[39,1594,1508],{"class":45},[39,1596,1597],{"class":49},"br",[39,1599,1600],{"class":45}," \u002F>\n",[39,1602,1603,1605,1607,1609,1611,1613,1615,1617,1619,1622,1624,1627],{"class":41,"line":161},[39,1604,69],{"class":45},[39,1606,1511],{"class":49},[39,1608,815],{"class":52},[39,1610,56],{"class":45},[39,1612,1587],{"class":59},[39,1614,691],{"class":52},[39,1616,56],{"class":45},[39,1618,1587],{"class":59},[39,1620,1621],{"class":52}," placeholder",[39,1623,56],{"class":45},[39,1625,1626],{"class":59},"\"you@example.com\"",[39,1628,1600],{"class":45},[39,1630,1631,1633,1635],{"class":41,"line":177},[39,1632,147],{"class":45},[39,1634,15],{"class":49},[39,1636,63],{"class":45},[31,1638,1640],{"className":256,"code":1639,"language":258,"meta":35,"style":35},"p { margin: 0 0 14px; }\ninput[type=\"email\"] { font: inherit; padding: 6px 8px; margin-top: 4px; }\n",[19,1641,1642,1662],{"__ignoreMap":35},[39,1643,1644,1646,1648,1650,1652,1654,1656,1658,1660],{"class":41,"line":42},[39,1645,15],{"class":49},[39,1647,268],{"class":45},[39,1649,371],{"class":271},[39,1651,275],{"class":45},[39,1653,376],{"class":271},[39,1655,379],{"class":271},[39,1657,864],{"class":271},[39,1659,282],{"class":281},[39,1661,339],{"class":45},[39,1663,1664,1666,1669,1672,1674,1676,1679,1681,1683,1685,1687,1689,1691,1693,1695,1698,1700,1702,1704,1706,1709,1711],{"class":41,"line":66},[39,1665,1511],{"class":49},[39,1667,1668],{"class":45},"[",[39,1670,1671],{"class":52},"type",[39,1673,56],{"class":281},[39,1675,1587],{"class":59},[39,1677,1678],{"class":45},"] { ",[39,1680,438],{"class":271},[39,1682,275],{"class":45},[39,1684,443],{"class":271},[39,1686,291],{"class":45},[39,1688,306],{"class":271},[39,1690,275],{"class":45},[39,1692,463],{"class":271},[39,1694,282],{"class":281},[39,1696,1697],{"class":271}," 8",[39,1699,282],{"class":281},[39,1701,291],{"class":45},[39,1703,975],{"class":271},[39,1705,275],{"class":45},[39,1707,1708],{"class":271},"4",[39,1710,282],{"class":281},[39,1712,339],{"class":45},[15,1714,1715,1716,1718,1719,1721,1722,1725],{},"The first checkbox, with no ",[19,1717,1478],{},", only checks if you hit the tiny box exactly. With a ",[19,1720,1478],{},", clicking the text checks it too, and clicking the word ",[19,1723,1724],{},"Email"," puts the cursor straight into the input. On mobile the difference is even bigger.",[15,1727,1728,1729,1731],{},"Why ",[19,1730,1487],{}," alone isn't enough:",[720,1733,1734,1737,1740],{},[723,1735,1736],{},"It disappears once you start typing, so you forget what the field was for.",[723,1738,1739],{},"Its faded color is hard to read.",[723,1741,1742],{},"Screen readers don't always announce it as the field's name.",[1744,1745,1746],"note",{},[536,1747,1748],{},[15,1749,1750,1751,1753,1754,1757],{},"If the design calls for no visible ",[19,1752,1478],{},", don't delete it. Hide it visually with CSS instead (a class commonly named ",[19,1755,1756],{},"sr-only","). Sighted users won't see it, but screen readers can still read it.",[621,1759],{},[10,1761,1763,1764,1767],{"id":1762},"mistake-5-missing-or-meaningless-alt-text","Mistake 5. Missing or meaningless ",[19,1765,1766],{},"alt"," text",[15,1769,1770,1772],{},[19,1771,1766],{}," is the text that stands in for an image when it can't be seen: by screen readers, when the image fails to load, and by search engines.",[549,1774,1775,1785],{},[552,1776,1777],{},[555,1778,1779,1782],{},[558,1780,1781],{},"Situation",[558,1783,1784],{},"What to write",[565,1786,1787,1798,1810],{},[555,1788,1789,1792],{},[570,1790,1791],{},"Image that conveys content",[570,1793,1794,1795],{},"Describe what it shows: ",[19,1796,1797],{},"alt=\"Bar chart showing Q3 revenue up 20%\"",[555,1799,1800,1803],{},[570,1801,1802],{},"Decorative image (background patterns, flourishes)",[570,1804,1805,1806,1809],{},"Empty: ",[19,1807,1808],{},"alt=\"\""," (screen readers skip it)",[555,1811,1812,1815],{},[570,1813,1814],{},"Icon inside a link or button",[570,1816,1817,1818],{},"Describe the action: ",[19,1819,1820],{},"alt=\"Go to cart\"",[31,1822,1824],{"className":33,"code":1823,"language":25,"meta":35,"style":35},"\u003C!-- ❌ With no alt, some screen readers read out the file name (\"img underscore zero one two three dot png\") -->\n\u003Cimg src=\"img_0123.png\" \u002F>\n\n\u003C!-- ❌ Meaningless alt -->\n\u003Cimg src=\"chart.png\" alt=\"image\" \u002F>\n\n\u003C!-- ✅ -->\n\u003Cimg src=\"chart.png\" alt=\"Bar chart showing Q3 revenue up 20%\" \u002F>\n\u003Cimg src=\"divider.svg\" alt=\"\" \u002F>\n",[19,1825,1826,1831,1848,1852,1857,1880,1884,1888,1909],{"__ignoreMap":35},[39,1827,1828],{"class":41,"line":42},[39,1829,1830],{"class":641},"\u003C!-- ❌ With no alt, some screen readers read out the file name (\"img underscore zero one two three dot png\") -->\n",[39,1832,1833,1835,1838,1841,1843,1846],{"class":41,"line":66},[39,1834,46],{"class":45},[39,1836,1837],{"class":49},"img",[39,1839,1840],{"class":52}," src",[39,1842,56],{"class":45},[39,1844,1845],{"class":59},"\"img_0123.png\"",[39,1847,1600],{"class":45},[39,1849,1850],{"class":41,"line":88},[39,1851,158],{"emptyLinePlaceholder":157},[39,1853,1854],{"class":41,"line":109},[39,1855,1856],{"class":641},"\u003C!-- ❌ Meaningless alt -->\n",[39,1858,1859,1861,1863,1865,1867,1870,1873,1875,1878],{"class":41,"line":144},[39,1860,46],{"class":45},[39,1862,1837],{"class":49},[39,1864,1840],{"class":52},[39,1866,56],{"class":45},[39,1868,1869],{"class":59},"\"chart.png\"",[39,1871,1872],{"class":52}," alt",[39,1874,56],{"class":45},[39,1876,1877],{"class":59},"\"image\"",[39,1879,1600],{"class":45},[39,1881,1882],{"class":41,"line":154},[39,1883,158],{"emptyLinePlaceholder":157},[39,1885,1886],{"class":41,"line":161},[39,1887,682],{"class":641},[39,1889,1890,1892,1894,1896,1898,1900,1902,1904,1907],{"class":41,"line":177},[39,1891,46],{"class":45},[39,1893,1837],{"class":49},[39,1895,1840],{"class":52},[39,1897,56],{"class":45},[39,1899,1869],{"class":59},[39,1901,1872],{"class":52},[39,1903,56],{"class":45},[39,1905,1906],{"class":59},"\"Bar chart showing Q3 revenue up 20%\"",[39,1908,1600],{"class":45},[39,1910,1911,1913,1915,1917,1919,1922,1924,1926,1929],{"class":41,"line":197},[39,1912,46],{"class":45},[39,1914,1837],{"class":49},[39,1916,1840],{"class":52},[39,1918,56],{"class":45},[39,1920,1921],{"class":59},"\"divider.svg\"",[39,1923,1872],{"class":52},[39,1925,56],{"class":45},[39,1927,1928],{"class":59},"\"\"",[39,1930,1600],{"class":45},[15,1932,1933,1936,1937,1939,1940,1946],{},[524,1934,1935],{},"Leaving out"," the ",[19,1938,1766],{}," attribute and setting it to ",[524,1941,1942,1943,1945],{},"empty (",[19,1944,1808],{},")"," are different things. Empty means \"this is decoration, skip it.\" Missing means \"someone forgot.\"",[621,1948],{},[10,1950,1952,1953,1955],{"id":1951},"mistake-6-building-lists-out-of-divs","Mistake 6. Building lists out of ",[19,1954,21],{},"s",[15,1957,1958,1959],{},"Menus, tag lists, search results: ",[524,1960,1961],{},"when the same kind of thing repeats, it's a list.",[31,1963,1965],{"className":33,"code":1964,"language":25,"meta":35,"style":35},"\u003C!-- ❌ -->\n\u003Cdiv class=\"menu\">\n  \u003Cdiv>\u003Ca href=\"\u002F\">Home\u003C\u002Fa>\u003C\u002Fdiv>\n  \u003Cdiv>\u003Ca href=\"\u002Fblog\">Blog\u003C\u002Fa>\u003C\u002Fdiv>\n  \u003Cdiv>\u003Ca href=\"\u002Fabout\">About\u003C\u002Fa>\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003C!-- ✅ -->\n\u003Cnav aria-label=\"Main menu\">\n  \u003Cul>\n    \u003Cli>\u003Ca href=\"\u002F\">Home\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"\u002Fblog\">Blog\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"\u002Fabout\">About\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Fnav>\n",[19,1966,1967,1971,1986,2014,2042,2070,2078,2082,2086,2103,2111,2138,2165,2192,2202],{"__ignoreMap":35},[39,1968,1969],{"class":41,"line":42},[39,1970,642],{"class":641},[39,1972,1973,1975,1977,1979,1981,1984],{"class":41,"line":66},[39,1974,46],{"class":45},[39,1976,21],{"class":49},[39,1978,53],{"class":52},[39,1980,56],{"class":45},[39,1982,1983],{"class":59},"\"menu\"",[39,1985,63],{"class":45},[39,1987,1988,1990,1992,1994,1996,1998,2000,2003,2006,2008,2010,2012],{"class":41,"line":88},[39,1989,69],{"class":45},[39,1991,21],{"class":49},[39,1993,1508],{"class":45},[39,1995,1145],{"class":49},[39,1997,1179],{"class":52},[39,1999,56],{"class":45},[39,2001,2002],{"class":59},"\"\u002F\"",[39,2004,2005],{"class":45},">Home\u003C\u002F",[39,2007,1145],{"class":49},[39,2009,1557],{"class":45},[39,2011,21],{"class":49},[39,2013,63],{"class":45},[39,2015,2016,2018,2020,2022,2024,2026,2028,2031,2034,2036,2038,2040],{"class":41,"line":109},[39,2017,69],{"class":45},[39,2019,21],{"class":49},[39,2021,1508],{"class":45},[39,2023,1145],{"class":49},[39,2025,1179],{"class":52},[39,2027,56],{"class":45},[39,2029,2030],{"class":59},"\"\u002Fblog\"",[39,2032,2033],{"class":45},">Blog\u003C\u002F",[39,2035,1145],{"class":49},[39,2037,1557],{"class":45},[39,2039,21],{"class":49},[39,2041,63],{"class":45},[39,2043,2044,2046,2048,2050,2052,2054,2056,2059,2062,2064,2066,2068],{"class":41,"line":144},[39,2045,69],{"class":45},[39,2047,21],{"class":49},[39,2049,1508],{"class":45},[39,2051,1145],{"class":49},[39,2053,1179],{"class":52},[39,2055,56],{"class":45},[39,2057,2058],{"class":59},"\"\u002Fabout\"",[39,2060,2061],{"class":45},">About\u003C\u002F",[39,2063,1145],{"class":49},[39,2065,1557],{"class":45},[39,2067,21],{"class":49},[39,2069,63],{"class":45},[39,2071,2072,2074,2076],{"class":41,"line":154},[39,2073,147],{"class":45},[39,2075,21],{"class":49},[39,2077,63],{"class":45},[39,2079,2080],{"class":41,"line":161},[39,2081,158],{"emptyLinePlaceholder":157},[39,2083,2084],{"class":41,"line":177},[39,2085,682],{"class":641},[39,2087,2088,2090,2093,2096,2098,2101],{"class":41,"line":197},[39,2089,46],{"class":45},[39,2091,2092],{"class":49},"nav",[39,2094,2095],{"class":52}," aria-label",[39,2097,56],{"class":45},[39,2099,2100],{"class":59},"\"Main menu\"",[39,2102,63],{"class":45},[39,2104,2105,2107,2109],{"class":41,"line":217},[39,2106,69],{"class":45},[39,2108,720],{"class":49},[39,2110,63],{"class":45},[39,2112,2113,2116,2118,2120,2122,2124,2126,2128,2130,2132,2134,2136],{"class":41,"line":247},[39,2114,2115],{"class":45},"    \u003C",[39,2117,723],{"class":49},[39,2119,1508],{"class":45},[39,2121,1145],{"class":49},[39,2123,1179],{"class":52},[39,2125,56],{"class":45},[39,2127,2002],{"class":59},[39,2129,2005],{"class":45},[39,2131,1145],{"class":49},[39,2133,1557],{"class":45},[39,2135,723],{"class":49},[39,2137,63],{"class":45},[39,2139,2141,2143,2145,2147,2149,2151,2153,2155,2157,2159,2161,2163],{"class":41,"line":2140},12,[39,2142,2115],{"class":45},[39,2144,723],{"class":49},[39,2146,1508],{"class":45},[39,2148,1145],{"class":49},[39,2150,1179],{"class":52},[39,2152,56],{"class":45},[39,2154,2030],{"class":59},[39,2156,2033],{"class":45},[39,2158,1145],{"class":49},[39,2160,1557],{"class":45},[39,2162,723],{"class":49},[39,2164,63],{"class":45},[39,2166,2168,2170,2172,2174,2176,2178,2180,2182,2184,2186,2188,2190],{"class":41,"line":2167},13,[39,2169,2115],{"class":45},[39,2171,723],{"class":49},[39,2173,1508],{"class":45},[39,2175,1145],{"class":49},[39,2177,1179],{"class":52},[39,2179,56],{"class":45},[39,2181,2058],{"class":59},[39,2183,2061],{"class":45},[39,2185,1145],{"class":49},[39,2187,1557],{"class":45},[39,2189,723],{"class":49},[39,2191,63],{"class":45},[39,2193,2195,2198,2200],{"class":41,"line":2194},14,[39,2196,2197],{"class":45},"  \u003C\u002F",[39,2199,720],{"class":49},[39,2201,63],{"class":45},[39,2203,2205,2207,2209],{"class":41,"line":2204},15,[39,2206,147],{"class":45},[39,2208,2092],{"class":49},[39,2210,63],{"class":45},[15,2212,2213,2214,530],{},"With list tags, screen readers announce \"list, 3 items\" up front, so users know how long the list is before they start. If order matters (install steps, rankings), use ",[19,2215,2216],{},"ol",[621,2218],{},[10,2220,2222,2223,1955],{"id":2221},"mistake-7-building-the-page-skeleton-entirely-from-divs","Mistake 7. Building the page skeleton entirely from ",[19,2224,21],{},[15,2226,2227,2228,840,2230,840,2232,2235,2236,2239],{},"Tags like ",[19,2229,612],{},[19,2231,2092],{},[19,2233,2234],{},"main",", and ",[19,2237,2238],{},"footer"," are called landmarks. Screen reader users use them to jump around: \"skip to main content,\" \"go to navigation.\" Think of them as the numbered exits of a subway station.",[549,2241,2242,2255],{},[552,2243,2244],{},[555,2245,2246,2249,2252],{},[558,2247,2248],{},"If you're writing this",[558,2250,2251],{},"Write this instead",[558,2253,2254],{},"Meaning",[565,2256,2257,2272,2287,2302,2317,2332,2347],{},[555,2258,2259,2264,2269],{},[570,2260,2261],{},[19,2262,2263],{},"\u003Cdiv class=\"header\">",[570,2265,2266],{},[19,2267,2268],{},"\u003Cheader>",[570,2270,2271],{},"Site logo, top area",[555,2273,2274,2279,2284],{},[570,2275,2276],{},[19,2277,2278],{},"\u003Cdiv class=\"nav\">",[570,2280,2281],{},[19,2282,2283],{},"\u003Cnav>",[570,2285,2286],{},"Main menu, groups of navigation links",[555,2288,2289,2294,2299],{},[570,2290,2291],{},[19,2292,2293],{},"\u003Cdiv class=\"main\">",[570,2295,2296],{},[19,2297,2298],{},"\u003Cmain>",[570,2300,2301],{},"The page's core content (one per page)",[555,2303,2304,2309,2314],{},[570,2305,2306],{},[19,2307,2308],{},"\u003Cdiv class=\"post\">",[570,2310,2311],{},[19,2312,2313],{},"\u003Carticle>",[570,2315,2316],{},"Self-contained content (a post, a comment, a product card)",[555,2318,2319,2324,2329],{},[570,2320,2321],{},[19,2322,2323],{},"\u003Cdiv class=\"section\">",[570,2325,2326],{},[19,2327,2328],{},"\u003Csection>",[570,2330,2331],{},"A thematic group with its own heading",[555,2333,2334,2339,2344],{},[570,2335,2336],{},[19,2337,2338],{},"\u003Cdiv class=\"sidebar\">",[570,2340,2341],{},[19,2342,2343],{},"\u003Caside>",[570,2345,2346],{},"Related but secondary content",[555,2348,2349,2354,2359],{},[570,2350,2351],{},[19,2352,2353],{},"\u003Cdiv class=\"footer\">",[570,2355,2356],{},[19,2357,2358],{},"\u003Cfooter>",[570,2360,2361],{},"Copyright, contact info, and other bottom matter",[31,2363,2365],{"className":33,"code":2364,"language":25,"meta":35,"style":35},"\u003Cbody>\n  \u003Cheader>\n    \u003Ca href=\"\u002F\">Logo\u003C\u002Fa>\n    \u003Cnav aria-label=\"Main menu\">...\u003C\u002Fnav>\n  \u003C\u002Fheader>\n\n  \u003Cmain>\n    \u003Carticle>\n      \u003Ch1>Post title\u003C\u002Fh1>\n      \u003Csection>\n        \u003Ch2>First subtopic\u003C\u002Fh2>\n        \u003Cp>...\u003C\u002Fp>\n      \u003C\u002Fsection>\n    \u003C\u002Farticle>\n    \u003Caside>Related posts\u003C\u002Faside>\n  \u003C\u002Fmain>\n\n  \u003Cfooter>© 2026\u003C\u002Ffooter>\n\u003C\u002Fbody>\n",[19,2366,2367,2376,2384,2403,2422,2430,2434,2442,2450,2464,2473,2487,2499,2508,2517,2531,2540,2545,2559],{"__ignoreMap":35},[39,2368,2369,2371,2374],{"class":41,"line":42},[39,2370,46],{"class":45},[39,2372,2373],{"class":49},"body",[39,2375,63],{"class":45},[39,2377,2378,2380,2382],{"class":41,"line":66},[39,2379,69],{"class":45},[39,2381,612],{"class":49},[39,2383,63],{"class":45},[39,2385,2386,2388,2390,2392,2394,2396,2399,2401],{"class":41,"line":88},[39,2387,2115],{"class":45},[39,2389,1145],{"class":49},[39,2391,1179],{"class":52},[39,2393,56],{"class":45},[39,2395,2002],{"class":59},[39,2397,2398],{"class":45},">Logo\u003C\u002F",[39,2400,1145],{"class":49},[39,2402,63],{"class":45},[39,2404,2405,2407,2409,2411,2413,2415,2418,2420],{"class":41,"line":109},[39,2406,2115],{"class":45},[39,2408,2092],{"class":49},[39,2410,2095],{"class":52},[39,2412,56],{"class":45},[39,2414,2100],{"class":59},[39,2416,2417],{"class":45},">...\u003C\u002F",[39,2419,2092],{"class":49},[39,2421,63],{"class":45},[39,2423,2424,2426,2428],{"class":41,"line":144},[39,2425,2197],{"class":45},[39,2427,612],{"class":49},[39,2429,63],{"class":45},[39,2431,2432],{"class":41,"line":154},[39,2433,158],{"emptyLinePlaceholder":157},[39,2435,2436,2438,2440],{"class":41,"line":161},[39,2437,69],{"class":45},[39,2439,2234],{"class":49},[39,2441,63],{"class":45},[39,2443,2444,2446,2448],{"class":41,"line":177},[39,2445,2115],{"class":45},[39,2447,166],{"class":49},[39,2449,63],{"class":45},[39,2451,2452,2455,2457,2460,2462],{"class":41,"line":197},[39,2453,2454],{"class":45},"      \u003C",[39,2456,1339],{"class":49},[39,2458,2459],{"class":45},">Post title\u003C\u002F",[39,2461,1339],{"class":49},[39,2463,63],{"class":45},[39,2465,2466,2468,2471],{"class":41,"line":217},[39,2467,2454],{"class":45},[39,2469,2470],{"class":49},"section",[39,2472,63],{"class":45},[39,2474,2475,2478,2480,2483,2485],{"class":41,"line":247},[39,2476,2477],{"class":45},"        \u003C",[39,2479,10],{"class":49},[39,2481,2482],{"class":45},">First subtopic\u003C\u002F",[39,2484,10],{"class":49},[39,2486,63],{"class":45},[39,2488,2489,2491,2493,2495,2497],{"class":41,"line":2140},[39,2490,2477],{"class":45},[39,2492,15],{"class":49},[39,2494,2417],{"class":45},[39,2496,15],{"class":49},[39,2498,63],{"class":45},[39,2500,2501,2504,2506],{"class":41,"line":2167},[39,2502,2503],{"class":45},"      \u003C\u002F",[39,2505,2470],{"class":49},[39,2507,63],{"class":45},[39,2509,2510,2513,2515],{"class":41,"line":2194},[39,2511,2512],{"class":45},"    \u003C\u002F",[39,2514,166],{"class":49},[39,2516,63],{"class":45},[39,2518,2519,2521,2524,2527,2529],{"class":41,"line":2204},[39,2520,2115],{"class":45},[39,2522,2523],{"class":49},"aside",[39,2525,2526],{"class":45},">Related posts\u003C\u002F",[39,2528,2523],{"class":49},[39,2530,63],{"class":45},[39,2532,2534,2536,2538],{"class":41,"line":2533},16,[39,2535,2197],{"class":45},[39,2537,2234],{"class":49},[39,2539,63],{"class":45},[39,2541,2543],{"class":41,"line":2542},17,[39,2544,158],{"emptyLinePlaceholder":157},[39,2546,2548,2550,2552,2555,2557],{"class":41,"line":2547},18,[39,2549,69],{"class":45},[39,2551,2238],{"class":49},[39,2553,2554],{"class":45},">© 2026\u003C\u002F",[39,2556,2238],{"class":49},[39,2558,63],{"class":45},[39,2560,2562,2564,2566],{"class":41,"line":2561},19,[39,2563,147],{"class":45},[39,2565,2373],{"class":49},[39,2567,63],{"class":45},[2569,2570,2571],"warning",{},[536,2572,2573],{},[15,2574,2575,2576,2584,2585,2587,2588,2590,2591,2593],{},"Going the other way and ",[524,2577,2578,2579,2581,2582],{},"turning every ",[19,2580,21],{}," into a ",[19,2583,2470],{}," is also a mistake. Use ",[19,2586,2470],{}," only for a meaningful unit with a heading. If it's just a wrapper for styling, ",[19,2589,21],{}," is correct. ",[19,2592,21],{}," isn't a bad tag; it means \"a box with no special meaning.\"",[621,2595],{},[10,2597,2599],{"id":2598},"aria-is-a-last-resort","ARIA is a last resort",[15,2601,2602,2603,741,2606,2609],{},"Once you start caring about accessibility, you'll run into ARIA attributes like ",[19,2604,2605],{},"role",[19,2607,2608],{},"aria-label",". They're powerful, but they come with a first rule:",[536,2611,2612],{},[15,2613,2614],{},"If a native HTML element does the job, use that element instead of ARIA.",[15,2616,2617,2620,2621,2235,2624,2620,2626,2629,2630,2633],{},[19,2618,2619],{},"\u003Cbutton>"," beats ",[19,2622,2623],{},"\u003Cdiv role=\"button\" tabindex=\"0\">",[19,2625,2283],{},[19,2627,2628],{},"\u003Cdiv role=\"navigation\">",". ARIA only ",[524,2631,2632],{},"says"," \"this is a button\"; it doesn't add any keyboard behavior. Wrong ARIA is more confusing than no ARIA at all.",[621,2635],{},[10,2637,2639],{"id":2638},"is-my-page-ok-a-3-minute-check","Is my page OK? A 3-minute check",[549,2641,2642,2652],{},[552,2643,2644],{},[555,2645,2646,2649],{},[558,2647,2648],{},"How",[558,2650,2651],{},"What to check",[565,2653,2654,2664,2678,2686],{},[555,2655,2656,2661],{},[570,2657,2658,2659],{},"Put the mouse down and use only ",[19,2660,529],{},[570,2662,2663],{},"Can you reach every button and link? Is the focus outline visible?",[555,2665,2666,2669],{},[570,2667,2668],{},"Dev tools → Lighthouse → Accessibility audit",[570,2670,2671,2672,2674,2675,2677],{},"Missing ",[19,2673,1766],{},", missing ",[19,2676,1478],{},", color contrast issues",[555,2679,2680,2683],{},[570,2681,2682],{},"Dev tools → Elements → Accessibility tab",[570,2684,2685],{},"What role and name each element is announced with",[555,2687,2688,2691],{},[570,2689,2690],{},"List just the headings (run the code below in the console)",[570,2692,2693],{},"Are any heading levels skipped?",[31,2695,2697],{"className":994,"code":2696,"language":996,"meta":35,"style":35},"\u002F\u002F Paste into the console to print the page's heading structure, indented\ndocument.querySelectorAll(\"h1,h2,h3,h4,h5,h6\").forEach((h) =>\n  console.log(\" \".repeat((h.tagName[1] - 1) * 2) + h.tagName + \" \" + h.textContent.trim())\n);\n",[19,2698,2699,2704,2732,2797],{"__ignoreMap":35},[39,2700,2701],{"class":41,"line":42},[39,2702,2703],{"class":641},"\u002F\u002F Paste into the console to print the page's heading structure, indented\n",[39,2705,2706,2708,2711,2713,2716,2718,2721,2724,2727,2729],{"class":41,"line":66},[39,2707,1046],{"class":45},[39,2709,2710],{"class":52},"querySelectorAll",[39,2712,1031],{"class":45},[39,2714,2715],{"class":59},"\"h1,h2,h3,h4,h5,h6\"",[39,2717,1057],{"class":45},[39,2719,2720],{"class":52},"forEach",[39,2722,2723],{"class":45},"((",[39,2725,2726],{"class":1015},"h",[39,2728,1019],{"class":45},[39,2730,2731],{"class":281},"=>\n",[39,2733,2734,2737,2740,2742,2745,2747,2750,2753,2755,2758,2761,2764,2766,2769,2772,2774,2777,2780,2782,2785,2788,2791,2794],{"class":41,"line":88},[39,2735,2736],{"class":45},"  console.",[39,2738,2739],{"class":52},"log",[39,2741,1031],{"class":45},[39,2743,2744],{"class":59},"\" \"",[39,2746,530],{"class":45},[39,2748,2749],{"class":52},"repeat",[39,2751,2752],{"class":45},"((h.tagName[",[39,2754,278],{"class":271},[39,2756,2757],{"class":45},"] ",[39,2759,2760],{"class":281},"-",[39,2762,2763],{"class":271}," 1",[39,2765,1019],{"class":45},[39,2767,2768],{"class":281},"*",[39,2770,2771],{"class":271}," 2",[39,2773,1019],{"class":45},[39,2775,2776],{"class":281},"+",[39,2778,2779],{"class":45}," h.tagName ",[39,2781,2776],{"class":281},[39,2783,2784],{"class":59}," \" \"",[39,2786,2787],{"class":281}," +",[39,2789,2790],{"class":45}," h.textContent.",[39,2792,2793],{"class":52},"trim",[39,2795,2796],{"class":45},"())\n",[39,2798,2799],{"class":41,"line":109},[39,2800,2801],{"class":45},");\n",[621,2803],{},[10,2805,2807],{"id":2806},"summary-why-this-is-worth-knowing","Summary: why this is worth knowing",[549,2809,2810,2820],{},[552,2811,2812],{},[555,2813,2814,2817],{},[558,2815,2816],{},"Mistake",[558,2818,2819],{},"Fix",[565,2821,2822,2833,2848,2864,2876,2889,2906],{},[555,2823,2824,2829],{},[570,2825,2826,2827],{},"Clickable ",[19,2828,21],{},[570,2830,2831],{},[19,2832,222],{},[555,2834,2835,2840],{},[570,2836,2837,2839],{},[19,2838,1318],{}," links that run actions",[570,2841,2842,2843,2845,2846],{},"Navigation is ",[19,2844,1145],{},", actions are ",[19,2847,222],{},[555,2849,2850,2853],{},[570,2851,2852],{},"Headings picked by font size",[570,2854,2855,2856,2858,2859,2858,2861,2863],{},"Follow the structure ",[19,2857,1339],{},"→",[19,2860,10],{},[19,2862,1443],{},", size with CSS",[555,2865,2866,2871],{},[570,2867,2868,2869],{},"Inputs with only a ",[19,2870,1487],{},[570,2872,2873,2874],{},"Connect a ",[19,2875,1478],{},[555,2877,2878,2883],{},[570,2879,2880,2881],{},"Missing or meaningless ",[19,2882,1766],{},[570,2884,2885,2886,2888],{},"Describe the content, or ",[19,2887,1808],{}," for decoration",[555,2890,2891,2896],{},[570,2892,2893,2894,1955],{},"Lists made of ",[19,2895,21],{},[570,2897,2898,2900,2901,2903,2904],{},[19,2899,720],{},"\u002F",[19,2902,2216],{}," + ",[19,2905,723],{},[555,2907,2908,2913],{},[570,2909,2910,2911,1955],{},"Page skeleton made only of ",[19,2912,21],{},[570,2914,2915,840,2917,840,2919,840,2921,840,2923],{},[19,2916,612],{},[19,2918,2092],{},[19,2920,2234],{},[19,2922,166],{},[19,2924,2238],{},[15,2926,2927,2928,2931,2932,2934],{},"Semantic HTML isn't a separate \"accessibility task\" you set time aside for. It's ",[524,2929,2930],{},"the habit of thinking once more when you pick a tag."," That one habit lets keyboard and screen reader users actually use your site, helps search engines understand your content, and lets the teammate who reads your code later see its structure at a glance. Next time you're about to type ",[19,2933,21],{},", ask yourself first: \"Is this really a box with no meaning?\"",[2936,2937,2938],"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);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":35,"searchDepth":66,"depth":66,"links":2940},[2941,2942,2944,2945,2946,2948,2950,2952,2954,2955,2956],{"id":12,"depth":66,"text":13},{"id":625,"depth":66,"text":2943},"Mistake 1. A clickable div",{"id":1139,"depth":66,"text":1140},{"id":1328,"depth":66,"text":1329},{"id":1474,"depth":66,"text":2947},"Mistake 4. Inputs without a label",{"id":1762,"depth":66,"text":2949},"Mistake 5. Missing or meaningless alt text",{"id":1951,"depth":66,"text":2951},"Mistake 6. Building lists out of divs",{"id":2221,"depth":66,"text":2953},"Mistake 7. Building the page skeleton entirely from divs",{"id":2598,"depth":66,"text":2599},{"id":2638,"depth":66,"text":2639},{"id":2806,"depth":66,"text":2807},"They look identical on screen, but a div button, an input without a label, or a heading picked by font size look completely different to keyboard users, screen readers, and search engines. Common semantic HTML mistakes and how to fix them, with examples you can try.","md",{"date":2960,"field":2961,"tags":2962},"2026.10.08","frontend",[25],"\u002Fen\u002Fsemantic-html-common-mistakes",{"title":5,"description":2957},{"loc":2963},"en\u002Fsemantic-html-common-mistakes","TYoQ-0KXv4vbGxjbQrePTUwpjNbXAPlLCeqeuZ16xzE",1791459767455]