[{"data":1,"prerenderedAt":369},["ShallowReactive",2],{"term-s\u002Fsemantic-html":3,"related-s\u002Fsemantic-html":352},{"id":4,"title":5,"acronym":6,"body":7,"category":334,"description":335,"difficulty":336,"extension":337,"letter":338,"meta":339,"navigation":172,"path":340,"related":341,"seo":346,"sitemap":347,"stem":350,"subcategory":6,"__hash__":351},"terms\u002Fterms\u002Fs\u002Fsemantic-html.md","Semantic HTML",null,{"type":8,"value":9,"toc":331},"minimark",[10,15,19,327],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"Semantic HTML means using the RIGHT tag for the job instead of wrapping everything in divs. ",[20,21,22,23],"nav",{}," for navigation, ",[24,25,26,27,62],"article",{}," for articles, ",[28,29,30,31,35,38],"button",{}," for buttons. It tells browsers, search engines, and screen readers what the content actually IS, not just what it looks like.",[11,32,34],{"id":33},"real-talk","Real Talk",[16,36,37],{},"Semantic HTML uses elements that convey the meaning and role of content beyond just its visual presentation. Elements like ",[39,40,41,42],"header",{},", ",[43,44,41,45],"main",{},[20,46,41,47],{},[24,48,41,49],{},[50,51,41,52],"section",{},[53,54,41,55],"aside",{},[56,57,41,58],"footer",{},[59,60,61],"figure",{},", and ",[28,63,64,65,69,320,324],{}," provide structural and semantic meaning that aids accessibility, SEO, and maintainability.",[11,66,68],{"id":67},"show-me-the-code","Show Me The Code",[70,71,76],"pre",{"className":72,"code":73,"language":74,"meta":75,"style":75},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Not semantic -->\n\u003Cdiv class=\"nav\">\n  \u003Cdiv class=\"nav-item\" onclick=\"...\">Home\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003C!-- Semantic -->\n\u003Cnav aria-label=\"Main navigation\">\n  \u003Ca href=\"\u002F\">Home\u003C\u002Fa>\n\u003C\u002Fnav>\n\n\u003Cmain>\n  \u003Carticle>\n    \u003Ch1>Post Title\u003C\u002Fh1>\n    \u003Cp>Content...\u003C\u002Fp>\n  \u003C\u002Farticle>\n\u003C\u002Fmain>\n","html","",[77,78,79,88,117,158,167,174,180,201,231,240,245,254,263,283,301,311],"code",{"__ignoreMap":75},[80,81,84],"span",{"class":82,"line":83},"line",1,[80,85,87],{"class":86},"sHwdD","\u003C!-- Not semantic -->\n",[80,89,91,95,99,103,106,109,112,114],{"class":82,"line":90},2,[80,92,94],{"class":93},"sMK4o","\u003C",[80,96,98],{"class":97},"swJcz","div",[80,100,102],{"class":101},"spNyl"," class",[80,104,105],{"class":93},"=",[80,107,108],{"class":93},"\"",[80,110,20],{"class":111},"sfazB",[80,113,108],{"class":93},[80,115,116],{"class":93},">\n",[80,118,120,123,125,127,129,131,134,136,139,141,144,147,151,154,156],{"class":82,"line":119},3,[80,121,122],{"class":93},"  \u003C",[80,124,98],{"class":97},[80,126,102],{"class":101},[80,128,105],{"class":93},[80,130,108],{"class":93},[80,132,133],{"class":111},"nav-item",[80,135,108],{"class":93},[80,137,138],{"class":101}," onclick",[80,140,105],{"class":93},[80,142,143],{"class":93},"\"...\"",[80,145,146],{"class":93},">",[80,148,150],{"class":149},"sTEyZ","Home",[80,152,153],{"class":93},"\u003C\u002F",[80,155,98],{"class":97},[80,157,116],{"class":93},[80,159,161,163,165],{"class":82,"line":160},4,[80,162,153],{"class":93},[80,164,98],{"class":97},[80,166,116],{"class":93},[80,168,170],{"class":82,"line":169},5,[80,171,173],{"emptyLinePlaceholder":172},true,"\n",[80,175,177],{"class":82,"line":176},6,[80,178,179],{"class":86},"\u003C!-- Semantic -->\n",[80,181,183,185,187,190,192,194,197,199],{"class":82,"line":182},7,[80,184,94],{"class":93},[80,186,20],{"class":97},[80,188,189],{"class":101}," aria-label",[80,191,105],{"class":93},[80,193,108],{"class":93},[80,195,196],{"class":111},"Main navigation",[80,198,108],{"class":93},[80,200,116],{"class":93},[80,202,204,206,209,212,214,216,219,221,223,225,227,229],{"class":82,"line":203},8,[80,205,122],{"class":93},[80,207,208],{"class":97},"a",[80,210,211],{"class":101}," href",[80,213,105],{"class":93},[80,215,108],{"class":93},[80,217,218],{"class":111},"\u002F",[80,220,108],{"class":93},[80,222,146],{"class":93},[80,224,150],{"class":149},[80,226,153],{"class":93},[80,228,208],{"class":97},[80,230,116],{"class":93},[80,232,234,236,238],{"class":82,"line":233},9,[80,235,153],{"class":93},[80,237,20],{"class":97},[80,239,116],{"class":93},[80,241,243],{"class":82,"line":242},10,[80,244,173],{"emptyLinePlaceholder":172},[80,246,248,250,252],{"class":82,"line":247},11,[80,249,94],{"class":93},[80,251,43],{"class":97},[80,253,116],{"class":93},[80,255,257,259,261],{"class":82,"line":256},12,[80,258,122],{"class":93},[80,260,24],{"class":97},[80,262,116],{"class":93},[80,264,266,269,272,274,277,279,281],{"class":82,"line":265},13,[80,267,268],{"class":93},"    \u003C",[80,270,271],{"class":97},"h1",[80,273,146],{"class":93},[80,275,276],{"class":149},"Post Title",[80,278,153],{"class":93},[80,280,271],{"class":97},[80,282,116],{"class":93},[80,284,286,288,290,292,295,297,299],{"class":82,"line":285},14,[80,287,268],{"class":93},[80,289,16],{"class":97},[80,291,146],{"class":93},[80,293,294],{"class":149},"Content...",[80,296,153],{"class":93},[80,298,16],{"class":97},[80,300,116],{"class":93},[80,302,304,307,309],{"class":82,"line":303},15,[80,305,306],{"class":93},"  \u003C\u002F",[80,308,24],{"class":97},[80,310,116],{"class":93},[80,312,314,316,318],{"class":82,"line":313},16,[80,315,153],{"class":93},[80,317,43],{"class":97},[80,319,116],{"class":93},[11,321,323],{"id":322},"when-youll-hear-this","When You'll Hear This",[16,325,326],{},"\"Replace all those divs with semantic elements — use nav, main, article.\" \u002F \"Semantic HTML is step one of accessibility.\"",[328,329,330],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":75,"searchDepth":90,"depth":90,"links":332},[333],{"id":13,"depth":90,"text":14},"frontend","Semantic HTML means using the RIGHT tag for the job instead of wrapping everything in divs.","beginner","md","s",{},"\u002Fterms\u002Fs\u002Fsemantic-html",[342,343,344,345],"HTML","Accessibility","DOM","SEO",{"title":5,"description":335},{"changefreq":348,"priority":349},"weekly",0.7,"terms\u002Fs\u002Fsemantic-html","UP7K7lpU-b-Dvj5L3ZSzxdSRCacOEiSJKrqZRDw8ZOM",[353,358,362,366],{"title":343,"path":354,"acronym":355,"category":334,"difficulty":356,"description":357},"\u002Fterms\u002Fa\u002Faccessibility","a11y","intermediate","Accessibility (a11y) is making your website usable by everyone — including people using screen readers, keyboard-only navigation, or who have low vision.",{"title":344,"path":359,"acronym":360,"category":334,"difficulty":336,"description":361},"\u002Fterms\u002Fd\u002Fdom","Document Object Model","The DOM is a live map of your webpage that JavaScript can read and edit. When the browser loads your HTML it turns it into a big tree of objects.",{"title":342,"path":363,"acronym":364,"category":334,"difficulty":336,"description":365},"\u002Fterms\u002Fh\u002Fhtml","HyperText Markup Language","HTML is like the skeleton of a webpage. You write tags like \u003Ch1> and \u003Cp> and the browser builds the bones of your site from them.",{"title":345,"path":367,"acronym":6,"category":334,"difficulty":336,"description":368},"\u002Fterms\u002Fs\u002Fseo","SEO is the art of convincing Google to rank your website higher than your competitors.",1776518311897]