HTML Form Elements

Key Points

• The `` tag improves accessibility.
• The `` allows multi-line input.</li><li>The `<select>` creates dropdown menus.</li><li>The `<option>` defines dropdown choices.</li></ul><div class="mt-12 p-8 rounded-2xl bg-gradient-to-br from-[#0f0f0f] to-[#1a0a0a] border border-[#1f1f1f]"><h3 class="text-xl font-bold mb-2 text-[#ffffff]">Up Next</h3><p class="text-[#a1a1aa] mb-6">Continue your journey with the next topic.</p><a href="/docs/html/input-types" class="inline-flex items-center gap-2 text-[#ef4444] font-bold hover:underline transition-colors hover:text-[#dc2626]">Go to <!-- -->HTML Input Types<!-- --> ❯</a></div></div><!--$--><!--/$--></article><div class="mt-24 space-y-12"><div class="grid grid-cols-1 md:grid-cols-2 gap-6"><a class="group p-6 rounded-2xl border border-[#1f1f1f] bg-[#0f0f0f] hover:border-[#ef4444]/50 hover:bg-[#ef4444]/5 transition-all duration-300" href="/docs/html/form-attributes"><div class="flex items-center gap-2 mb-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left h-3 w-3 text-[#555] group-hover:text-[#ef4444] transition-colors" aria-hidden="true"><path d="m15 18-6-6 6-6"></path></svg><span class="text-[10px] font-black uppercase tracking-widest text-[#555] group-hover:text-[#ef4444] transition-colors">Previous Chapter</span></div><h4 class="text-lg font-bold text-white group-hover:translate-x-1 transition-transform">HTML Form Attributes</h4></a><a class="group p-6 rounded-2xl border border-[#1f1f1f] bg-[#0f0f0f] hover:border-[#ef4444]/50 hover:bg-[#ef4444]/5 transition-all duration-300" href="/docs/html/input-types"><div class="flex items-center justify-end gap-2 mb-2"><span class="text-[10px] font-black uppercase tracking-widest text-[#555] group-hover:text-[#ef4444] transition-colors">Next Up</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right h-3 w-3 text-[#555] group-hover:text-[#ef4444] transition-colors" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg></div><h4 class="text-lg font-bold text-white group-hover:-translate-x-1 transition-transform text-right">HTML Input Types</h4></a></div><a class="relative overflow-hidden block p-10 rounded-3xl border border-[#1f1f1f] bg-gradient-to-br from-[#0f0f0f] to-[#1a0a0a] group hover:border-[#ef4444] transition-all duration-500 shadow-2xl" href="/docs/html/input-types"><div class="absolute -right-10 -bottom-10 w-64 h-64 bg-[#ef4444]/5 rounded-full blur-[80px] group-hover:bg-[#ef4444]/10 transition-colors"></div><div class="relative z-10 flex flex-col md:flex-row items-center justify-between gap-8"><div><span class="inline-block px-3 py-1 rounded-full bg-[#ef4444]/10 border border-[#ef4444]/20 text-[#ef4444] text-[10px] font-black uppercase tracking-widest mb-4">Next Lesson</span><h2 class="text-4xl font-black text-white mb-2 tracking-tight group-hover:translate-x-2 transition-transform duration-500">HTML Input Types</h2><p class="text-[#a1a1aa] font-medium">Continue your journey and master the next concept.</p></div><div class="w-16 h-16 rounded-2xl bg-[#ef4444] flex items-center justify-center text-white shadow-[0_0_30px_rgba(239,68,68,0.4)] group-hover:scale-110 transition-transform duration-500"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right h-8 w-8 stroke-[3]" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg></div></div></a></div></div></main></div></div><script src="/_next/static/chunks/115dplafwys-z.js" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[2037,[\"/_next/static/chunks/16~_ytm9gm5io.js\",\"/_next/static/chunks/0sh.6aqimy6c9.js\"],\"default\"]\n3:I[39756,[\"/_next/static/chunks/16~_ytm9gm5io.js\",\"/_next/static/chunks/0sh.6aqimy6c9.js\"],\"default\"]\n4:I[37457,[\"/_next/static/chunks/16~_ytm9gm5io.js\",\"/_next/static/chunks/0sh.6aqimy6c9.js\"],\"default\"]\n5:I[79277,[\"/_next/static/chunks/16~_ytm9gm5io.js\",\"/_next/static/chunks/0sh.6aqimy6c9.js\",\"/_next/static/chunks/0ui7-yzzdco.0.js\"],\"default\"]\n6:I[92825,[\"/_next/static/chunks/16~_ytm9gm5io.js\",\"/_next/static/chunks/0sh.6aqimy6c9.js\"],\"ClientSegmentRoot\"]\n7:I[74761,[\"/_next/static/chunks/16~_ytm9gm5io.js\",\"/_next/static/chunks/0sh.6aqimy6c9.js\",\"/_next/static/chunks/0jhq63z5o_v0g.js\",\"/_next/static/chunks/07s2xn.iztaqr.js\",\"/_next/static/chunks/0zfcxht63442z.js\"],\"default\"]\na:I[97367,[\"/_next/static/chunks/16~_ytm9gm5io.js\",\"/_next/static/chunks/0sh.6aqimy6c9.js\"],\"OutletBoundary\"]\nb:\"$Sreact.suspense\"\ne:I[97367,[\"/_next/static/chunks/16~_ytm9gm5io.js\",\"/_next/static/chunks/0sh.6aqimy6c9.js\"],\"ViewportBoundary\"]\n10:I[97367,[\"/_next/static/chunks/16~_ytm9gm5io.js\",\"/_next/static/chunks/0sh.6aqimy6c9.js\"],\"MetadataBoundary\"]\n12:I[68027,[\"/_next/static/chunks/16~_ytm9gm5io.js\",\"/_next/static/chunks/0sh.6aqimy6c9.js\"],\"default\",1]\n:HL[\"/_next/static/chunks/15umoys708fg-.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"docs\",\"html\",\"form-elements\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"docs\",{\"children\":[[\"lang\",\"html\",\"d\",null],{\"children\":[[\"topic\",\"form-elements\",\"d\",null],{\"children\":[\"__PAGE__\",{}]}]}]}]},\"$undefined\",\"$undefined\",16],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/15umoys708fg-.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/16~_ytm9gm5io.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/0sh.6aqimy6c9.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"h-full antialiased\",\"children\":[[\"$\",\"head\",null,{\"children\":[\"$\",\"script\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"WebSite\\\",\\\"name\\\":\\\"Demon Tech Roadmap\\\",\\\"url\\\":\\\"https://demontech-roadmap.vercel.app\\\",\\\"description\\\":\\\"Community-driven roadmaps that help beginners learn technology through clear learning paths, curated resources, and project-focused growth.\\\"}\"},\"type\":\"application/ld+json\"}]}],[\"$\",\"body\",null,{\"className\":\"min-h-full flex flex-col\",\"children\":[[\"$\",\"$L2\",null,{}],[\"$\",\"a\",null,{\"href\":\"#main-content\",\"className\":\"sr-only focus:not-sr-only focus:absolute focus:z-[999] focus:p-4 focus:bg-black focus:text-white\",\"children\":\"Skip to main content\"}],[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"$L5\",null,{}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0jhq63z5o_v0g.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/07s2xn.iztaqr.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/0zfcxht63442z.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L6\",null,{\"Component\":\"$7\",\"slots\":{\"children\":[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]},\"serverProvidedParams\":{\"params\":{},\"promises\":[\"$@8\"]}}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[\"$L9\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/02rd9qlu~ys~o.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$La\",null,{\"children\":[\"$\",\"$b\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@c\"}]}]]}],{},null,false,null]},null,false,\"$@d\"]},null,false,\"$@d\"]},null,false,null]},null,false,null],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$Le\",null,{\"children\":\"$Lf\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L10\",null,{\"children\":[\"$\",\"$b\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L11\"}]}]}],null]}],false]],\"m\":\"$undefined\",\"G\":[\"$12\",[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/15umoys708fg-.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]]],\"S\":true,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"OugSXnjiFIXwrXSVJ0ddd\"}\n"])</script><script>self.__next_f.push([1,"13:[]\nd:\"$W13\"\n8:\"$0:f:0:1:1:children:0:props:children:1:props:serverProvidedParams:params\"\n"])</script><script>self.__next_f.push([1,"14:I[44734,[\"/_next/static/chunks/16~_ytm9gm5io.js\",\"/_next/static/chunks/0sh.6aqimy6c9.js\",\"/_next/static/chunks/0jhq63z5o_v0g.js\",\"/_next/static/chunks/07s2xn.iztaqr.js\",\"/_next/static/chunks/0zfcxht63442z.js\",\"/_next/static/chunks/02rd9qlu~ys~o.js\"],\"default\"]\n15:I[53809,[\"/_next/static/chunks/16~_ytm9gm5io.js\",\"/_next/static/chunks/0sh.6aqimy6c9.js\",\"/_next/static/chunks/0jhq63z5o_v0g.js\",\"/_next/static/chunks/07s2xn.iztaqr.js\",\"/_next/static/chunks/0zfcxht63442z.js\",\"/_next/static/chunks/02rd9qlu~ys~o.js\"],\"default\"]\n16:I[5014,[\"/_next/static/chunks/16~_ytm9gm5io.js\",\"/_next/static/chunks/0sh.6aqimy6c9.js\",\"/_next/static/chunks/0jhq63z5o_v0g.js\",\"/_next/static/chunks/07s2xn.iztaqr.js\",\"/_next/static/chunks/0zfcxht63442z.js\",\"/_next/static/chunks/02rd9qlu~ys~o.js\"],\"default\"]\n17:I[1095,[\"/_next/static/chunks/16~_ytm9gm5io.js\",\"/_next/static/chunks/0sh.6aqimy6c9.js\",\"/_next/static/chunks/0jhq63z5o_v0g.js\",\"/_next/static/chunks/07s2xn.iztaqr.js\",\"/_next/static/chunks/0zfcxht63442z.js\",\"/_next/static/chunks/02rd9qlu~ys~o.js\"],\"default\"]\n"])</script><script>self.__next_f.push([1,"9:[\"$\",\"div\",null,{\"children\":[[\"$\",\"$L14\",null,{\"title\":\"HTML Form Elements\",\"description\":\"HTML form elements create different types of user inputs.\",\"category\":\"HTML\",\"readingTime\":\"5 min read\"}],\"$undefined\",[\"$\",\"h2\",null,{\"id\":\"introduction\",\"children\":\"Introduction\"}],[\"$\",\"div\",null,{\"className\":\"prose prose-invert prose-red max-w-none text-zinc-300\",\"dangerouslySetInnerHTML\":{\"__html\":\"HTML forms house various elements to capture specific data types. The `\u003cselect\u003e` tag creates dropdown menus, while `\u003ctextarea\u003e` allows multi-line text. The `\u003clabel\u003e` tag attaches descriptive text to these inputs.\"}}],[[\"$\",\"h2\",null,{\"id\":\"syntax\",\"className\":\"text-2xl font-black text-white mt-12 mb-4\",\"children\":\"Syntax\"}],[\"$\",\"$L15\",null,{\"language\":\"html\",\"title\":\"Syntax\",\"code\":\"\u003c!-- form elements --\u003e\\n\u003cselect name=\\\"cars\\\"\u003e\\n \u003coption value=\\\"volvo\\\"\u003eVolvo\u003c/option\u003e\\n\u003c/select\u003e\"}]],[[\"$\",\"h2\",null,{\"id\":\"example\",\"className\":\"text-2xl font-black text-white mt-12 mb-4\",\"children\":\"Example\"}],[\"$\",\"$L15\",null,{\"language\":\"html\",\"title\":\"Example\",\"code\":\"\u003c!-- this uses form elements --\u003e\\n\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n \u003chead\u003e\\n \u003cmeta charset=\\\"UTF-8\\\"\u003e\\n \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e\\n \u003ctitle\u003eForm Elements\u003c/title\u003e\\n \u003c/head\u003e\\n \u003cbody\u003e\\n \u003cform\u003e\\n \u003clabel for=\\\"bio\\\"\u003eBio:\u003c/label\u003e\\n \u003ctextarea id=\\\"bio\\\" name=\\\"bio\\\"\u003e\u003c/textarea\u003e\\n \u003c/form\u003e\\n \u003c/body\u003e\\n\u003c/html\u003e\"}]],[[\"$\",\"h2\",null,{\"id\":\"try-it\",\"className\":\"text-2xl font-black text-white mt-12 mb-4\",\"children\":\"Try it Yourself\"}],[\"$\",\"div\",null,{\"className\":\"my-8 relative overflow-hidden rounded-xl border p-6 bg-blue-500/10 border-blue-500/20\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute left-0 top-0 bottom-0 w-1 bg-blue-500\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-4\",\"children\":[[\"$\",\"$L16\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"circle\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\",\"key\":\"1mglay\"}],[\"path\",{\"d\":\"M12 16v-4\",\"key\":\"1dtifu\"}],[\"path\",{\"d\":\"M12 8h.01\",\"key\":\"e9boi3\"}]],\"className\":\"lucide-info h-6 w-6 shrink-0 mt-0.5 text-blue-400\"}],[\"$\",\"div\",null,{\"className\":\"flex-1\",\"children\":[[\"$\",\"h5\",null,{\"className\":\"text-base font-bold mb-2 text-blue-400\",\"children\":\"Hands-on Practice\"}],[\"$\",\"div\",null,{\"className\":\"text-[15px] text-[#a1a1aa] leading-relaxed prose-code:text-[#ffffff] prose-code:bg-black/30 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md\",\"children\":\"Modify the code below to see how it affects the output. This is the best way to learn!\"}]]}]]}]]}],[\"$\",\"$L17\",null,{\"title\":\"Interactive Editor\",\"initialHtml\":\"\u003c!-- this uses form elements --\u003e\\n\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n \u003chead\u003e\\n \u003cmeta charset=\\\"UTF-8\\\"\u003e\\n \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e\\n \u003ctitle\u003eForm Elements\u003c/title\u003e\\n \u003c/head\u003e\\n \u003cbody\u003e\\n \u003cform\u003e\\n \u003clabel for=\\\"bio\\\"\u003eBio:\u003c/label\u003e\\n \u003ctextarea id=\\\"bio\\\" name=\\\"bio\\\"\u003e\u003c/textarea\u003e\\n \u003c/form\u003e\\n \u003c/body\u003e\\n\u003c/html\u003e\",\"initialCss\":\"\",\"initialJs\":\"\"}]],[[\"$\",\"h2\",null,{\"id\":\"key-points\",\"className\":\"text-2xl font-black text-white mt-12 mb-4\",\"children\":\"Key Points\"}],[\"$\",\"ul\",null,{\"className\":\"list-disc pl-6 space-y-2 text-zinc-300\",\"children\":[[\"$\",\"li\",\"0\",{\"dangerouslySetInnerHTML\":{\"__html\":\"The `\u003clabel\u003e` tag improves accessibility.\"}}],[\"$\",\"li\",\"1\",{\"dangerouslySetInnerHTML\":{\"__html\":\"The `\u003ctextarea\u003e` allows multi-line input.\"}}],[\"$\",\"li\",\"2\",{\"dangerouslySetInnerHTML\":{\"__html\":\"The `\u003cselect\u003e` creates dropdown menus.\"}}],[\"$\",\"li\",\"3\",{\"dangerouslySetInnerHTML\":{\"__html\":\"The `\u003coption\u003e` defines dropdown choices.\"}}]]}]],\"$undefined\",[\"$\",\"div\",null,{\"className\":\"mt-12 p-8 rounded-2xl bg-gradient-to-br from-[#0f0f0f] to-[#1a0a0a] border border-[#1f1f1f]\",\"children\":[[\"$\",\"h3\",null,{\"className\":\"text-xl font-bold mb-2 text-[#ffffff]\",\"children\":\"Up Next\"}],[\"$\",\"p\",null,{\"className\":\"text-[#a1a1aa] mb-6\",\"children\":\"Continue your journey with the next topic.\"}],[\"$\",\"a\",null,{\"href\":\"/docs/html/input-types\",\"className\":\"inline-flex items-center gap-2 text-[#ef4444] font-bold hover:underline transition-colors hover:text-[#dc2626]\",\"children\":[\"Go to \",\"HTML Input Types\",\" ❯\"]}]]}]]}]\n"])</script><script>self.__next_f.push([1,"f:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"18:I[27201,[\"/_next/static/chunks/16~_ytm9gm5io.js\",\"/_next/static/chunks/0sh.6aqimy6c9.js\"],\"IconMark\"]\nc:null\n"])</script><script>self.__next_f.push([1,"11:[[\"$\",\"title\",\"0\",{\"children\":\"Demon Tech Roadmap\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Community-driven roadmaps that help beginners learn technology through clear learning paths, curated resources, and project-focused growth.\"}],[\"$\",\"meta\",\"2\",{\"name\":\"application-name\",\"content\":\"Demon Tech Roadmap\"}],[\"$\",\"meta\",\"3\",{\"name\":\"keywords\",\"content\":\"Demon Tech Roadmap,developer roadmap,learning roadmap,web development roadmap,programming roadmap,technology learning path,beginner developers,software engineering\"}],[\"$\",\"meta\",\"4\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:title\",\"content\":\"Demon Tech Roadmap\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:description\",\"content\":\"Community-driven roadmaps that help beginners learn technology through clear learning paths, curated resources, and project-focused growth.\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:site_name\",\"content\":\"Demon Tech Roadmap\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:image\",\"content\":\"https://demontech-roadmap.vercel.app/og-image.svg\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:image:alt\",\"content\":\"DemonTech Roadmap preview\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"14\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"15\",{\"name\":\"twitter:title\",\"content\":\"Demon Tech Roadmap\"}],[\"$\",\"meta\",\"16\",{\"name\":\"twitter:description\",\"content\":\"Community-driven roadmaps that help beginners learn technology through clear learning paths, curated resources, and project-focused growth.\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:image\",\"content\":\"https://demontech-roadmap.vercel.app/og-image.svg\"}],[\"$\",\"link\",\"18\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.0x3dzn~oxb6tn.ico\",\"sizes\":\"256x256\",\"type\":\"image/x-icon\"}],[\"$\",\"$L18\",\"19\",{}]]\n"])</script></body></html><div data-netlify-deploy-id="6a318e97606a34000896832d" data-netlify-site-id="11c0aef1-4734-4d41-b722-d14d6272b82c" data-vcs="github" style="position:fixed"> <!-- This div is automatically inserted by Netlify for all Deploy Preview URLs. --> <script async src="/.netlify/scripts/cdp"></script> </div>