HTML Document Structure
A closer look at how every HTML document is organized, and the rules for nesting elements correctly.
2 menit membaca
Every valid HTML page follows the same skeleton:
<!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>
<!-- visible content goes here -->
</body>
</html>The <html> element and lang
The lang="en" attribute tells browsers and screen readers what language the page is written in. It affects things like pronunciation in screen readers and spell-check behavior — always set it.
Inside <head>
The <head> never renders visible content directly, but it configures the page:
<meta charset="UTF-8" />— tells the browser how to decode the page's text (UTF-8 supports virtually every character and symbol, so it's the standard choice).<meta name="viewport" ...>— tells mobile browsers to render the page at the device's actual width instead of zooming out to fit a desktop-sized layout. Without it, your page will look tiny on phones.<title>— the browser tab text, and also what search engines usually show as the clickable headline in results.<link>and<script>tags for stylesheets and scripts often live here too (more on those in later lessons).
Nesting rules
HTML elements nest inside each other like sets of boxes — a closing tag must close the most recently opened tag first.
<!-- Correct -->
<p>This is <strong>bold</strong> text.</p>
<!-- Incorrect: tags overlap instead of nesting -->
<p>This is <strong>bold</p></strong>Browsers try to recover from broken nesting, but the result is unpredictable and can vary between browsers — always close tags in the reverse order you opened them.
Block vs. inline elements
Elements generally fall into two categories:
- Block-level elements (
<p>,<div>,<h1>–<h6>,<ul>) start on a new line and take up the full width available. - Inline elements (
<a>,<strong>,<span>,<img>) sit within a line of text, only as wide as their content.
<div>
<p>A block-level paragraph.</p>
<p>Another paragraph, on its own line.</p>
<p>This has <span>an inline span</span> inside it.</p>
</div>You'll see this distinction again once CSS enters the picture — it's the default behavior that CSS's display property can override.