40 Mins beginner
2. Your First HTML Page
HTML
Your First HTML Page
HTML (HyperText Markup Language) is not a programming language — it's a markup language. It uses tags wrapped in angle brackets to tell the browser what type of content each piece of text is.
🦴 The Boilerplate — Every Page Needs This
Every single HTML file on the internet starts with this exact structure. It's called the boilerplate. Try clicking "Try it" to see it render live:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my very first webpage.</p>
</body>
</html>
<!DOCTYPE html>— Tells the browser this is modern HTML5 (always first line)<html lang="en">— Root element;langhelps screen readers and search engines<head>— Invisible metadata: page title, linked stylesheets, charset settings<body>— Everything visible goes here
🏷️ Anatomy of an HTML Tag
Most tags come in pairs: an opening tag and a closing tag. The content lives between them.
<!-- Opening tag, Content, Closing tag -->
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
<strong>This text is bold.</strong>
📝 HTML Comments
Comments are notes in your code that the browser completely ignores. They're for you and your team.
<!-- This is a comment. The browser won't display this. -->
<p>This paragraph IS visible.</p>
<!-- TODO: Add navigation here later -->
Knowledge Check
Ready to test your understanding of 2. Your First HTML Page?