HTML Structure & Comments

Learn the required structure of every HTML page and how to leave notes in your code

HTML Structure & Comments — The Full Blueprint

What Is a Complete HTML Page?

Every HTML page follows a required structure. Beyond the basic tags, there are important elements in and that make your pages work properly on all devices and screen sizes.

� **Pro insight:** Professional developers set up their HTML skeleton the same way every time — it's muscle memory after a while.

The Complete Skeleton

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
</head>
<body>
  <!-- Your content goes here -->
</body>
</html>

Element	What it does
``	Declares the page language (helps search engines and screen readers)
``	Ensures all characters display correctly (including emoji!)
``	Makes pages responsive on mobile devices
``	Notes in the code that the browser ignores — for humans only

How It Works

The Meta Tags Explained

html

<meta charset="UTF-8">

This tells the browser which character encoding to use. UTF-8 covers every character from every language plus emoji. Without this, special characters like é, ñ, or 😀 might show as garbage.

html

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This is essential for mobile-friendly pages. Without it, a phone browser would show the page zoomed out like a tiny desktop view. This makes it match the actual screen width.

HTML Comments

html

<!-- This is a comment. The browser ignores it completely. -->
<!-- TODO: Add navigation links here -->
<p>This text is visible.</p>
<!-- <p>This line is "commented out" and won't show</p> -->

� **Use comments to:** Leave notes for yourself, temporarily hide code while debugging, explain complex sections, or mark TODOs.

Why Use Proper Structure?

**Consistency** — Works the same across Chrome, Firefox, Safari, Edge

**Accessibility** — Screen readers use language attributes and semantic structure

**SEO** — Search engines rely on proper structure for indexing

**Mobile** — Viewport meta tag is required for mobile-friendly pages

**Maintainability** — Comments help you (and others) understand the code later

Common Mistakes

❌ Wrong	Why	✅ Right
Missing ``	Browser enters "quirks mode" — inconsistent rendering	Always start with it
Missing `charset="UTF-8"`	Special characters may display incorrectly	Add the meta tag to ``
Missing viewport meta tag	Page won't be mobile-responsive	Add viewport meta to ``
``	Wrong syntax — comment won't close properly	``

Your Turn!

Create a complete HTML page with:

All required meta tags (charset UTF-8, viewport)

A `` of "My Profile"</li> <li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">An `<h1>` with your name</li> <li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">An HTML comment explaining something about yourself</li> <li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">A `<p>` with a sentence about what you're learning</li></div></div><details class="group mb-6 rounded-xl border border-zinc-200 bg-white"><summary class="flex cursor-pointer items-center gap-2 px-5 py-3 text-sm font-medium text-zinc-600 hover:text-zinc-900 transition-colors"><span class="text-lg">💡</span><span>Need a hint? (3 available)</span><svg class="ml-auto h-4 w-4 transition-transform group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path></svg></summary><div class="border-t border-zinc-100 px-5 py-4 space-y-2"><div class="flex items-start gap-2 text-sm text-zinc-600"><span class="font-mono text-xs text-indigo-500 mt-0.5">#1</span><span>Always include charset and viewport meta tags in <head></span></div><div class="flex items-start gap-2 text-sm text-zinc-600"><span class="font-mono text-xs text-indigo-500 mt-0.5">#2</span><span>Comments use  syntax — nothing inside is visible on the page</span></div><div class="flex items-start gap-2 text-sm text-zinc-600"><span class="font-mono text-xs text-indigo-500 mt-0.5">#3</span><span><title> content appears in the browser tab, not on the page</span></div></div></details><details class="group mb-6 rounded-xl border border-zinc-200 bg-white"><summary class="flex cursor-pointer items-center gap-2 px-5 py-3 text-sm font-medium text-zinc-600 hover:text-zinc-900 transition-colors"><span class="text-lg">🔑</span><span>Show solution (try it yourself first!)</span><svg class="ml-auto h-4 w-4 transition-transform group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path></svg></summary><div class="border-t border-zinc-100"><pre class="overflow-x-auto bg-zinc-900 px-5 py-4 text-sm leading-relaxed text-green-400 font-mono whitespace-pre-wrap"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Profile</title> </head> <body>  <h1>Infex</h1> <p>I'm learning HTML and CSS to build websites.</p> </body> </html></pre></div></details><div class="mb-8"><div><div class="mb-4 grid gap-4 lg:grid-cols-2"><div><div class="mb-2 flex items-center justify-between"><label class="text-sm font-semibold text-zinc-700">🌐 HTML Editor</label><div class="flex items-center gap-2"><button title="Reset to original code" class="rounded-lg border border-zinc-300 px-3 py-1.5 text-xs font-medium text-zinc-600 transition-all hover:bg-zinc-100">↺ Reset</button><button class="flex items-center gap-1.5 rounded-lg bg-indigo-600 px-4 py-1.5 text-sm font-medium text-white transition-all hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-50">👁️ Preview</button></div></div><textarea class="w-full rounded-xl border border-zinc-300 bg-zinc-900 p-4 font-mono text-sm leading-relaxed text-green-400 focus:outline-none focus:ring-2 focus:ring-indigo-500" style="min-height:250px;resize:vertical;tab-size:2" spellCheck="false"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Profile</title> </head> <body> <h1>Welcome!</h1>  <p>I'm learning web development.</p> </body> </html></textarea></div><div><div class="mb-2 flex items-center justify-between"><label class="text-sm font-semibold text-zinc-700">🖼️ Live Preview</label><div class="flex items-center gap-2"><button class="text-xs text-indigo-500 hover:text-indigo-700 transition-colors font-medium">🔑 Show solution</button></div></div><div class="w-full rounded-xl border border-zinc-200 bg-white overflow-hidden" style="min-height:250px"><iframe title="HTML Preview" class="w-full h-full min-h-[250px]" sandbox="allow-scripts allow-same-origin" style="border:none"></iframe></div></div></div></div></div><div class="flex items-center justify-between border-t border-zinc-200 pt-6"><a class="flex items-center gap-1.5 rounded-lg border border-zinc-300 px-4 py-2 text-sm font-medium text-zinc-600 transition-all hover:bg-zinc-50" href="/course/html-css/box-model">← The Box Model</a><a class="flex items-center gap-1.5 rounded-lg bg-indigo-600 px-5 py-2 text-sm font-medium text-white transition-all hover:bg-indigo-700" href="/course/html-css/css-selectors">Next: CSS Selectors →</a></div></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><script>$RC("B:2","S:2")</script></body></html>