Lesson 3: HTML Structure & Semantic Tags
A well-structured HTML page is more than just tags — it has a clear skeleton that browsers, search engines, and screen readers all rely on.
Key Concepts
The HTML Skeleton
Every page needs: <!DOCTYPE html> at the top, then <html>, then <head> (for invisible settings like title), then <body> (everything visible). This structure is the same on every website on earth.
Semantic Tags
HTML5 added tags that describe meaning: <header> for the top section, <nav> for navigation links, <main> for the main content, <article> for a self-contained post, <footer> for the bottom. These help search engines and accessibility tools.
Nesting
Tags can go inside other tags. A <ul> contains <li> tags. A <nav> contains <a> tags. Proper nesting means every opened tag is closed before its parent closes.
🆕 Live Editor
Edit the code — the preview updates live!