Loading...
Loading...
Learn the required structure of every HTML page and how to leave notes in your code
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.
<!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 |
<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.
<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.
<!-- 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> -->| ❌ 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 | `` |
Create a complete HTML page with:
` with a sentence about what you're learning
<!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> <!-- I've been coding for 2 weeks and love it! --> <h1>Infex</h1> <p>I'm learning HTML and CSS to build websites.</p> </body> </html>