What is HTML and Page Structure
Understand what every web page is made of
HTML — the skeleton of a building
Every web page has three layers: HTML (skeleton — structure), CSS (design — how it looks), JavaScript (behavior — what it does). HTML describes WHAT is on the page: a heading, a paragraph, a button, an image. Without CSS everything is grey and unstyled, but the structure is already there.
HTML Document Structure
Every HTML file starts with the same basic structure:
<!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>
<!-- All visible content goes here -->
<h1>Hello, world!</h1>
</body>
</html><!DOCTYPE html>— tells the browser this is HTML5<html lang="en">— root element,langspecifies the language<head>— meta information (not visible to the user)<body>— all visible content of the page
Tags — the building blocks of HTML
A tag is a command to the browser that looks like this: <name>content</name>
Almost all tags have an opening <p> and a closing </p> variant.
Core text tags:
| Tag | Purpose | Example |
|---|---|---|
<h1> to <h6> | Headings (h1 is biggest) | <h1>Main Heading</h1> |
<p> | Paragraph of text | <p>Regular text</p> |
<strong> | Bold text | <strong>Important!</strong> |
<em> | Italic | <em>Emphasis</em> |
<br> | Line break (no closing tag) | Line 1<br>Line 2 |
<hr> | Horizontal rule | <hr> |
A complete basic page. Note the indentation — it helps read the structure.
Open any page in the browser and right-click → 'View Page Source' (or F12). You'll see the HTML of that page. DevTools is your best tool for learning web layout.