HTML Document Structure
DOCTYPE, the html/head/body skeleton, and essential meta tags every page needs
Explanation
Every HTML file follows the same skeleton. The browser parses this structure to know how to render the page.
The minimal valid HTML page:
html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>My Page</title> </head> <body> <h1>Hello, world!</h1> </body> </html>
What each part does:
| Part | Purpose | |---|---| | <!DOCTYPE html> | Tells the browser this is HTML5 (not HTML4 or XHTML). Always first. | | <html lang="en"> | Root element. lang helps screen readers and search engines. | | <head> | Invisible metadata — not displayed on the page. | | <meta charset="UTF-8"> | Enables accented characters, emoji, non-Latin scripts. Must be first in <head>. | | <meta name="viewport"> | Makes pages look correct on mobile — without it, phones render at desktop width and zoom out. | | <title> | Text shown in the browser tab and search results. | | <body> | Everything the user sees. |
Common `<head>` tags:
html <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="description" content="A short page summary for search results" /> <title>AtomLearn — Master Programming</title> <link rel="stylesheet" href="styles.css" /> <script src="app.js" defer></script> </head>
`<link>` vs `<script>`: Stylesheets go in <head>; scripts usually go at the end of <body> or use defer so they don't block page rendering.
Examples
Minimal page skeleton
Stylesheet in head, script at bottom with defer — both avoid blocking the page render
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="My first web page" />
<title>Hello World</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first web page.</p>
<script src="main.js" defer></script>
</body>
</html>What goes in head vs body
Head = metadata the browser needs but the user never sees; body = everything displayed on screen
<!-- HEAD: invisible metadata -->
<head>
<meta charset="UTF-8" />
<title>Portfolio — Jane Doe</title>
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="portfolio.css" />
</head>
<!-- BODY: visible content -->
<body>
<nav>...</nav>
<main>
<h1>Jane Doe — Full Stack Developer</h1>
</main>
<footer>...</footer>
</body>How well did you understand this?
Next in HTML
Semantic HTML Elements