The Skeleton of Every Page
Every HTML document follows the same basic skeleton. Understanding each part is essential before writing any real content.
Basic Document Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Page Title</title>
</head>
<body>
<!-- Visible content goes here -->
</body>
</html>Structure Elements
| Element | Purpose |
|---|---|
| <!DOCTYPE html> | Tells the browser this is an HTML5 document |
| <html> | The root element that wraps the entire page |
| <head> | Contains metadata, not shown directly on the page |
| <title> | Sets the text shown in the browser tab |
| <body> | Contains all visible content of the page |
The Doctype
<!DOCTYPE html> must be the very first line of an HTML file. It tells the browser to render the page in standards mode using the HTML5 specification, avoiding inconsistent "quirks mode" rendering.
The html Element
The <html> element is the root of the document — every other element is nested inside it. The lang attribute (e.g. lang="en") declares the page language, which helps screen readers and search engines.
The head Element
The <head> holds information about the document that is not displayed directly: the title, character encoding, linked stylesheets, scripts, and meta tags for SEO.
The body Element
The <body> contains everything a visitor actually sees and interacts with: text, images, links, forms, and other elements.
Character Encoding
<meta charset="UTF-8" /> should be the first element inside <head>. It ensures special characters, emojis, and text in different languages display correctly.
Only One of Each
A valid HTML document has exactly one <html>, one <head>, and one <body> element — never more than one of each.
Best Practice
Always start new HTML files from this same skeleton. Most editors can generate it automatically — in VS Code, type an exclamation mark (!) and press Tab inside an empty .html file.