Demon Tech Roadmap

HTML

HTML Page Title

HTML page titles name the browser tab and search result.

Read Time

5 min read

Difficulty

Beginner

Last Updated

Jun 15, 2026

Version

v1.0.0

Introduction

HTML uses the `` tag to name the document. Browsers display this title in the tab bar and history logs. Search engines use the title to name search results.</div><h2 id="syntax" class="text-2xl font-black text-white mt-12 mb-4">Syntax</h2><div class="my-8 rounded-xl overflow-hidden bg-[#0f0f0f] border border-[#1f1f1f] shadow-2xl"><div class="flex items-center justify-between px-4 py-3 bg-[#050505] border-b border-[#1f1f1f]"><div class="flex items-center gap-3"><div class="flex items-center gap-1.5"><div class="w-3 h-3 rounded-full bg-red-500/20 border border-red-500/50"></div><div class="w-3 h-3 rounded-full bg-yellow-500/20 border border-yellow-500/50"></div><div class="w-3 h-3 rounded-full bg-green-500/20 border border-green-500/50"></div></div><span class="text-xs font-mono text-[#a1a1aa] ml-2">Syntax</span></div><button class="flex items-center gap-1.5 text-xs font-medium text-[#a1a1aa] hover:text-[#ffffff] transition-colors bg-[#1f1f1f] hover:bg-[#333] px-2.5 py-1.5 rounded-md"><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-copy h-3 w-3" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg><span>Copy</span></button></div><div class="relative text-sm max-h-[500px] overflow-auto no-scrollbar"><pre style="color:#d4d4d4;font-size:14px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.6;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1.5rem;margin:0;overflow:auto;background:transparent"><code class="language-html" style="white-space:pre;color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.5em;padding-right:1em;text-align:right;user-select:none;color:#6a9955">1</span><span class="token" style="color:#6a9955"></span><span> </span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.5em;padding-right:1em;text-align:right;user-select:none;color:#6a9955">2</span><span></span><span class="token" style="color:#808080"><</span><span class="token" style="color:#569cd6">title</span><span class="token" style="color:#808080">></span><span>Page Title | Site Name</span><span class="token" style="color:#808080"></</span><span class="token" style="color:#569cd6">title</span><span class="token" style="color:#808080">></span></code></pre></div></div><h2 id="example" class="text-2xl font-black text-white mt-12 mb-4">Example</h2><div class="my-8 rounded-xl overflow-hidden bg-[#0f0f0f] border border-[#1f1f1f] shadow-2xl"><div class="flex items-center justify-between px-4 py-3 bg-[#050505] border-b border-[#1f1f1f]"><div class="flex items-center gap-3"><div class="flex items-center gap-1.5"><div class="w-3 h-3 rounded-full bg-red-500/20 border border-red-500/50"></div><div class="w-3 h-3 rounded-full bg-yellow-500/20 border border-yellow-500/50"></div><div class="w-3 h-3 rounded-full bg-green-500/20 border border-green-500/50"></div></div><span class="text-xs font-mono text-[#a1a1aa] ml-2">Example</span></div><button class="flex items-center gap-1.5 text-xs font-medium text-[#a1a1aa] hover:text-[#ffffff] transition-colors bg-[#1f1f1f] hover:bg-[#333] px-2.5 py-1.5 rounded-md"><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-copy h-3 w-3" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg><span>Copy</span></button></div><div class="relative text-sm max-h-[500px] overflow-auto no-scrollbar"><pre style="color:#d4d4d4;font-size:14px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.6;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;padding:1.5rem;margin:0;overflow:auto;background:transparent"><code class="language-html" style="white-space:pre;color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none"><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.5em;padding-right:1em;text-align:right;user-select:none;color:#6a9955">1</span><span class="token" style="color:#6a9955"></span><span> </span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.5em;padding-right:1em;text-align:right;user-select:none;color:#6a9955">2</span><span></span><span class="token" style="color:#d4d4d4"><!</span><span class="token" style="color:#569CD6">DOCTYPE</span><span class="token"> </span><span class="token" style="color:#9cdcfe">html</span><span class="token" style="color:#d4d4d4">></span><span> </span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.5em;padding-right:1em;text-align:right;user-select:none;color:#6a9955">3</span><span></span><span class="token" style="color:#808080"><</span><span class="token" style="color:#569cd6">html</span><span class="token" style="color:#569cd6"> </span><span class="token" style="color:#9cdcfe">lang</span><span class="token" style="color:#d4d4d4">=</span><span class="token" style="color:#ce9178">"</span><span class="token" style="color:#ce9178">en</span><span class="token" style="color:#ce9178">"</span><span class="token" style="color:#808080">></span><span> </span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.5em;padding-right:1em;text-align:right;user-select:none;color:#6a9955">4</span><span> </span><span class="token" style="color:#808080"><</span><span class="token" style="color:#569cd6">head</span><span class="token" style="color:#808080">></span><span> </span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.5em;padding-right:1em;text-align:right;user-select:none;color:#6a9955">5</span><span> </span><span class="token" style="color:#808080"><</span><span class="token" style="color:#569cd6">meta</span><span class="token" style="color:#569cd6"> </span><span class="token" style="color:#9cdcfe">charset</span><span class="token" style="color:#d4d4d4">=</span><span class="token" style="color:#ce9178">"</span><span class="token" style="color:#ce9178">UTF-8</span><span class="token" style="color:#ce9178">"</span><span class="token" style="color:#808080">></span><span> </span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.5em;padding-right:1em;text-align:right;user-select:none;color:#6a9955">6</span><span> </span><span class="token" style="color:#808080"><</span><span class="token" style="color:#569cd6">meta</span><span class="token" style="color:#569cd6"> </span><span class="token" style="color:#9cdcfe">name</span><span class="token" style="color:#d4d4d4">=</span><span class="token" style="color:#ce9178">"</span><span class="token" style="color:#ce9178">viewport</span><span class="token" style="color:#ce9178">"</span><span class="token" style="color:#569cd6"> </span><span class="token" style="color:#9cdcfe">content</span><span class="token" style="color:#d4d4d4">=</span><span class="token" style="color:#ce9178">"</span><span class="token" style="color:#ce9178">width=device-width, initial-scale=1.0</span><span class="token" style="color:#ce9178">"</span><span class="token" style="color:#808080">></span><span> </span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.5em;padding-right:1em;text-align:right;user-select:none;color:#6a9955">7</span><span> </span><span class="token" style="color:#808080"><</span><span class="token" style="color:#569cd6">title</span><span class="token" style="color:#808080">></span><span>HTML5 Roadmap | DemonTech</span><span class="token" style="color:#808080"></</span><span class="token" style="color:#569cd6">title</span><span class="token" style="color:#808080">></span><span> </span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.5em;padding-right:1em;text-align:right;user-select:none;color:#6a9955">8</span><span> </span><span class="token" style="color:#808080"></</span><span class="token" style="color:#569cd6">head</span><span class="token" style="color:#808080">></span><span> </span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.5em;padding-right:1em;text-align:right;user-select:none;color:#6a9955">9</span><span> </span><span class="token" style="color:#808080"><</span><span class="token" style="color:#569cd6">body</span><span class="token" style="color:#808080">></span><span> </span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.5em;padding-right:1em;text-align:right;user-select:none;color:#6a9955">10</span><span> </span><span class="token" style="color:#808080"><</span><span class="token" style="color:#569cd6">h1</span><span class="token" style="color:#808080">></span><span>Main Content</span><span class="token" style="color:#808080"></</span><span class="token" style="color:#569cd6">h1</span><span class="token" style="color:#808080">></span><span> </span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.5em;padding-right:1em;text-align:right;user-select:none;color:#6a9955">11</span><span> </span><span class="token" style="color:#808080"></</span><span class="token" style="color:#569cd6">body</span><span class="token" style="color:#808080">></span><span> </span><span class="linenumber react-syntax-highlighter-line-number" style="display:inline-block;min-width:2.5em;padding-right:1em;text-align:right;user-select:none;color:#6a9955">12</span><span></span><span class="token" style="color:#808080"></</span><span class="token" style="color:#569cd6">html</span><span class="token" style="color:#808080">></span></code></pre></div></div><h2 id="try-it" class="text-2xl font-black text-white mt-12 mb-4">Try it Yourself</h2><div class="my-8 relative overflow-hidden rounded-xl border p-6 bg-blue-500/10 border-blue-500/20"><div class="absolute left-0 top-0 bottom-0 w-1 bg-blue-500"></div><div class="flex gap-4"><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-info h-6 w-6 shrink-0 mt-0.5 text-blue-400" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg><div class="flex-1"><h5 class="text-base font-bold mb-2 text-blue-400">Hands-on Practice</h5><div class="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">Modify the code below to see how it affects the output. This is the best way to learn!</div></div></div></div><div class="my-16 rounded-[2rem] overflow-hidden border border-[#1f1f1f] bg-[#050505] shadow-[0_30px_60px_-15px_rgba(0,0,0,0.7)] flex flex-col transition-all duration-500 relative"><div class="flex items-center justify-between px-6 py-4 bg-[#0a0a0a] border-b border-[#1f1f1f]"><div class="flex items-center gap-6"><div class="flex items-center gap-1.5"><div class="w-3 h-3 rounded-full bg-[#ef4444]/20 border border-[#ef4444]/40"></div><div class="w-3 h-3 rounded-full bg-yellow-500/20 border border-yellow-500/40"></div><div class="w-3 h-3 rounded-full bg-green-500/20 border border-green-500/40"></div></div><div class="flex items-center gap-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-terminal h-4 w-4 text-[#ef4444]" aria-hidden="true"><path d="M12 19h8"></path><path d="m4 17 6-6-6-6"></path></svg><span class="text-[10px] font-black uppercase tracking-[0.2em] text-white">Interactive Editor</span></div></div><div class="flex items-center gap-3"><button class="p-2 text-[#555] hover:text-white transition-colors" title="Reset Code"><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-refresh-cw h-4 w-4" aria-hidden="true"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path><path d="M8 16H3v5"></path></svg></button><button class="p-2 text-[#555] hover:text-white transition-colors"><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-maximize2 lucide-maximize-2 h-4 w-4" aria-hidden="true"><path d="M15 3h6v6"></path><path d="m21 3-7 7"></path><path d="m3 21 7-7"></path><path d="M9 21H3v-6"></path></svg></button><button class="flex items-center gap-2 px-5 py-2 bg-[#ef4444] hover:bg-[#dc2626] text-white text-[11px] font-black uppercase tracking-widest rounded-xl transition-all shadow-[0_0_20px_rgba(239,68,68,0.3)] hover:scale-105 active:scale-95"><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-play h-3.5 w-3.5 fill-white" aria-hidden="true"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg>Run Preview</button></div></div><div class="flex flex-col lg:flex-row h-[600px] bg-[#050505]"><div class="flex flex-col flex-1 border-b lg:border-b-0 lg:border-r border-[#1f1f1f] bg-[#050505]"><div class="flex px-4 bg-[#0a0a0a] border-b border-[#1f1f1f]"><button class="px-6 py-3 text-[10px] font-black uppercase tracking-widest transition-all relative text-[#ef4444]">index.html<div class="absolute bottom-0 left-0 right-0 h-[2px] bg-[#ef4444]"></div></button><button class="px-6 py-3 text-[10px] font-black uppercase tracking-widest transition-all relative text-[#444] hover:text-[#a1a1aa]">style.css</button><button class="px-6 py-3 text-[10px] font-black uppercase tracking-widest transition-all relative text-[#444] hover:text-[#a1a1aa]">script.js</button></div><div class="flex-1 relative group"><textarea class="w-full h-full bg-[#050505] p-6 text-[#a1a1aa] font-mono text-[14px] leading-relaxed resize-none focus:outline-none focus:text-white selection:bg-[#ef4444]/30" spellCheck="false" autoCapitalize="off" autoComplete="off"> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML5 Roadmap | DemonTech</title> </head> <body> <h1>Main Content</h1> </body> </html></textarea><div class="absolute left-0 top-0 bottom-0 w-8 bg-[#080808] border-r border-[#151515] flex flex-col pt-6 pointer-events-none items-center"><span class="text-[10px] font-mono text-[#333] leading-[21px]">1</span><span class="text-[10px] font-mono text-[#333] leading-[21px]">2</span><span class="text-[10px] font-mono text-[#333] leading-[21px]">3</span><span class="text-[10px] font-mono text-[#333] leading-[21px]">4</span><span class="text-[10px] font-mono text-[#333] leading-[21px]">5</span><span class="text-[10px] font-mono text-[#333] leading-[21px]">6</span><span class="text-[10px] font-mono text-[#333] leading-[21px]">7</span><span class="text-[10px] font-mono text-[#333] leading-[21px]">8</span><span class="text-[10px] font-mono text-[#333] leading-[21px]">9</span><span class="text-[10px] font-mono text-[#333] leading-[21px]">10</span><span class="text-[10px] font-mono text-[#333] leading-[21px]">11</span><span class="text-[10px] font-mono text-[#333] leading-[21px]">12</span><span class="text-[10px] font-mono text-[#333] leading-[21px]">13</span><span class="text-[10px] font-mono text-[#333] leading-[21px]">14</span><span class="text-[10px] font-mono text-[#333] leading-[21px]">15</span><span class="text-[10px] font-mono text-[#333] leading-[21px]">16</span><span class="text-[10px] font-mono text-[#333] leading-[21px]">17</span><span class="text-[10px] font-mono text-[#333] leading-[21px]">18</span><span class="text-[10px] font-mono text-[#333] leading-[21px]">19</span><span class="text-[10px] font-mono text-[#333] leading-[21px]">20</span></div></div></div><div class="flex-1 flex flex-col bg-black"><div class="px-6 py-3 bg-[#0a0a0a] border-b border-[#1f1f1f] flex items-center justify-between"><div class="flex items-center gap-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-zap h-3 w-3 text-yellow-500 fill-yellow-500" aria-hidden="true"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg><span class="text-[9px] font-black uppercase tracking-[0.2em] text-[#555]">Live Preview</span></div><div class="flex items-center gap-1.5"><div class="w-2 h-2 rounded-full bg-[#111]"></div><div class="w-12 h-1 bg-[#111] rounded-full"></div></div></div><div class="flex-1 relative p-4 lg:p-8 overflow-hidden"><div class="w-full h-full border border-[#1f1f1f] rounded-2xl overflow-hidden bg-black shadow-2xl relative"><iframe srcDoc="" title="Live Preview" sandbox="allow-scripts" class="w-full h-full border-none bg-black"></iframe></div></div></div></div></div><h2 id="key-points" class="text-2xl font-black text-white mt-12 mb-4">Key Points</h2><ul class="list-disc pl-6 space-y-2 text-zinc-300"><li>The `<title>` tag names the document.</li><li>Browsers show titles in tabs.</li><li>Search engines display titles in results.</li><li>Each page requires one unique title.</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/tables" class="inline-flex items-center gap-2 text-[#ef4444] font-bold hover:underline transition-colors hover:text-[#dc2626]">Go to HTML Tables ❯</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/favicon"><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 Favicon</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/tables"><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 Tables</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/tables"><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 Tables</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\",\"page-title\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"docs\",{\"children\":[[\"lang\",\"html\",\"d\",null],{\"children\":[[\"topic\",\"page-title\",\"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 Page Title\",\"description\":\"HTML page titles name the browser tab and search result.\",\"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 uses the `\u003ctitle\u003e` tag to name the document. Browsers display this title in the tab bar and history logs. Search engines use the title to name search results.\"}}],[[\"$\",\"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!-- title syntax --\u003e\\n\u003ctitle\u003ePage Title | Site Name\u003c/title\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 defines a title --\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\u003eHTML5 Roadmap | DemonTech\u003c/title\u003e\\n \u003c/head\u003e\\n \u003cbody\u003e\\n \u003ch1\u003eMain Content\u003c/h1\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 defines a title --\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\u003eHTML5 Roadmap | DemonTech\u003c/title\u003e\\n \u003c/head\u003e\\n \u003cbody\u003e\\n \u003ch1\u003eMain Content\u003c/h1\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 `\u003ctitle\u003e` tag names the document.\"}}],[\"$\",\"li\",\"1\",{\"dangerouslySetInnerHTML\":{\"__html\":\"Browsers show titles in tabs.\"}}],[\"$\",\"li\",\"2\",{\"dangerouslySetInnerHTML\":{\"__html\":\"Search engines display titles in results.\"}}],[\"$\",\"li\",\"3\",{\"dangerouslySetInnerHTML\":{\"__html\":\"Each page requires one unique title.\"}}]]}]],\"$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/tables\",\"className\":\"inline-flex items-center gap-2 text-[#ef4444] font-bold hover:underline transition-colors hover:text-[#dc2626]\",\"children\":[\"Go to \",\"HTML Tables\",\" ❯\"]}]]}]]}]\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">  <script async src="/.netlify/scripts/cdp"></script> </div>