Your First Web Page — HTML Structure
What Is HTML?
HTML (HyperText Markup Language) is the language of the web. Every website you've ever visited — from Google to YouTube to this page — is built with HTML. It's not a programming language like Python; it's a markup language that structures content using tags.
Think of HTML like the skeleton of a building. It defines where the walls go, where the rooms are, and what's a door vs. a window. CSS (later module) adds the paint and decorations.
� **Analogy:** HTML is like a blueprint. Tags tell the browser: "this is a heading," "this is a paragraph," "this is an image."
Syntax
html
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
| Tag | What it does |
|---|
| `` | Declares this is an HTML5 document (required) |
| `` | The root element — wraps everything |
| `` | Contains metadata, title, and links to CSS |
| ``</td><td class=" border-b border-zinc-100 px-4 py-2.5 text-zinc-700">Text shown in the browser tab</td></tr><tr><td class=" border-b border-zinc-100 px-4 py-2.5 text-zinc-700">`<body>`</td><td class=" border-b border-zinc-100 px-4 py-2.5 text-zinc-700">Everything the user sees goes here</td></tr><tr><td class=" border-b border-zinc-100 px-4 py-2.5 text-zinc-700">`<p>`</td><td class=" border-b border-zinc-100 px-4 py-2.5 text-zinc-700">A paragraph of text</td></tr></table></div>
<br/>
<h2 class="text-xl font-bold mt-7 mb-3 text-zinc-900">How It Works</h2>
<br/>
<p class="leading-relaxed text-zinc-700 mb-2">When you open an HTML file in a browser:</p>
<br/>
<li class="ml-5 list-decimal text-zinc-700 mb-1.5 leading-relaxed">The browser reads the HTML from top to bottom</li>
<li class="ml-5 list-decimal text-zinc-700 mb-1.5 leading-relaxed">It builds a **DOM tree** (Document Object Model) — the browser's internal representation of the page</li>
<li class="ml-5 list-decimal text-zinc-700 mb-1.5 leading-relaxed">It renders each element according to its tag type</li>
<li class="ml-5 list-decimal text-zinc-700 mb-1.5 leading-relaxed">`Hello, World!` appears as a paragraph on screen</li>
<br/>
<h3 class="text-lg font-semibold mt-6 mb-2 text-zinc-900">Tags: Open and Close</h3>
<br/>
<p class="leading-relaxed text-zinc-700 mb-2">Most HTML tags come in pairs:</p>
<li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">`<p>` — **opening tag** (turns the feature on)</li>
<li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">`content goes here` — the content between tags</li>
<li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">`</p>` — **closing tag** (turns it off, note the `/`)</li>
<br/>
<div class="border-l-4 border-amber-400 bg-amber-50 my-3 rounded-r-lg px-4 py-3 text-sm leading-relaxed text-zinc-700"><span class="font-medium">️ **Watch out!** Forgetting the closing tag is the most common HTML mistake. The browser might still render it, but it can mess up everything after it.</span></div>
<br/>
<h2 class="text-xl font-bold mt-7 mb-3 text-zinc-900">Why Use HTML?</h2>
<br/>
<p class="leading-relaxed text-zinc-700 mb-2">HTML is <strong class="font-semibold text-zinc-900">required</strong> for any web content:</p>
<li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">**Websites** — Every page on the internet starts with HTML</li>
<li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">**Email templates** — Newsletters and marketing emails use HTML</li>
<li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">**Documentation** — Tools like Notion, Confluence, and this platform use HTML</li>
<li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">**Web apps** — React, Vue, and Angular all generate HTML</li>
<br/>
<h2 class="text-xl font-bold mt-7 mb-3 text-zinc-900">Common Mistakes</h2>
<br/>
<div class="my-4 overflow-x-auto rounded-xl border border-zinc-200"><table class="w-full text-sm"><tr><th class="text-left border-b border-zinc-100 px-4 py-2.5 text-zinc-700">❌ Wrong</th><th class="text-left border-b border-zinc-100 px-4 py-2.5 text-zinc-700">Why</th><th class="text-left border-b border-zinc-100 px-4 py-2.5 text-zinc-700">✅ Right</th></tr><tr><td class=" border-b border-zinc-100 px-4 py-2.5 text-zinc-700">`<P>Hello</p>` (case mismatch)</td><td class=" border-b border-zinc-100 px-4 py-2.5 text-zinc-700">Tag names should be lowercase</td><td class=" border-b border-zinc-100 px-4 py-2.5 text-zinc-700">`<p>Hello</p>`</td></tr><tr><td class=" border-b border-zinc-100 px-4 py-2.5 text-zinc-700">`<p>Hello` (no closing tag)</td><td class=" border-b border-zinc-100 px-4 py-2.5 text-zinc-700">Everything after becomes part of this paragraph</td><td class=" border-b border-zinc-100 px-4 py-2.5 text-zinc-700">`<p>Hello</p>`</td></tr><tr><td class=" border-b border-zinc-100 px-4 py-2.5 text-zinc-700">`<html><head><body>...` missing doctype</td><td class=" border-b border-zinc-100 px-4 py-2.5 text-zinc-700">Browser may render in "quirks mode"</td><td class=" border-b border-zinc-100 px-4 py-2.5 text-zinc-700">Start with `<!DOCTYPE html>`</td></tr></table></div>
<br/>
<h2 class="text-xl font-bold mt-7 mb-3 text-zinc-900">Your Turn!</h2>
<br/>
<p class="leading-relaxed text-zinc-700 mb-2">Create a complete HTML page with:</p>
<li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">`<!DOCTYPE html>` declaration</li>
<li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">`<html>` root element</li>
<li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">`<head>` with a `<title>` of your choice</li>
<li class="ml-5 list-disc text-zinc-700 mb-1.5 leading-relaxed">`<body>` with a `<p>` paragraph containing your name</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>Every HTML page needs <!DOCTYPE html> at the top</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>Put the title inside <head>, content inside <body></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>Make sure every opening tag has a matching closing tag</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>
<head>
<title>Infex's Page</title>
</head>
<body>
<p>Infex</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>
<head>
<title>My First Page</title>
</head>
<body>
<p>Hello, World!</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 text-sm font-medium text-zinc-600 hover:text-indigo-600 transition-colors" href="/course/html-css">← Back to Lessons</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/build-landing-page">Next: <!-- -->Build a Landing Page<!-- --> →</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> |