TopolearnGetting the skeleton right switches browsers into standards mode and sets encoding and language for everything that follows.
An HTML file is plain text that a browser parses into a tree. Every page should start with the same few lines.
<!DOCTYPE html>comes first. It's not a tag but a switch: without it browsers fall back to quirks mode, emulating 1990s layout bugs.<html lang="en">is the root element. Thelangattribute tells screen readers how to pronounce text, and helps translation tools and search engines.<head>holds information about the page: the character encoding, the<title>shown in the browser tab, links to stylesheets, and meta tags.<body>holds everything the user sees.
Put <meta charset="utf-8"> as the first thing in the head. The browser must know the encoding before it reads any text, and UTF-8 covers every language and emoji.
The <title> is required for a valid document and matters more than it looks: it's the tab label, the default bookmark name, and usually the headline in search results.
Indentation and line breaks between tags don't affect the layout; HTML collapses runs of whitespace in text to a single space. Save the file as index.html, open it in a browser, and use the developer tools (right-click, Inspect) to see the tree the browser built.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My first page</title>
</head>
<body>
<h1>Hello, web</h1>
<p>This paragraph is the visible content.</p>
</body>
</html>Remember
- Start every page with <!DOCTYPE html> to get standards mode
- head = metadata about the page, body = visible content
- Declare <meta charset="utf-8"> first and set lang on <html>
Watch out for
- Leaving out the doctype and debugging layout bugs caused by quirks mode.