Every HTML page — from a tiny note to a huge web app — starts from the same basic skeleton. Once you know it, you can begin any page with confidence. Let us break it down piece by piece.
The basic skeleton
Here is the standard structure every HTML document follows. Read it once, then we will go through each part.
The doctype
The very first line, <code><!DOCTYPE html></code>, tells the browser this is a modern HTML5 document. It is not really a tag and has no closing tag — just always put it first. Without it, browsers can behave in odd, old-fashioned ways.
The html, head and body elements
The <code><html></code> element wraps everything. Inside it are two children: the head and the body. They have very different jobs.
The <code><head></code> holds information about the page that visitors do not see directly — the title shown in the browser tab, the character set, links to stylesheets, and metadata for search engines. The <code><body></code> holds everything visitors actually see — headings, text, images, links and more.
| Goes in the <head> | Goes in the <body> |
|---|---|
| Page title (browser tab) | Headings and paragraphs |
| Character set (charset) | Images and media |
| Links to CSS files | Links and buttons |
| SEO meta description | Forms and tables |
The lang attribute
Notice <code><html lang="en"></code>. The <code>lang</code> attribute tells browsers and screen readers what language the page is in. It is a small detail that matters for accessibility and SEO, so always include it.
In the editable skeleton above, change the title to "About Me", change the heading, and add a second paragraph inside the body. Notice the title does not appear on the page itself — it would show in the browser tab.
1. What should be the very first line of an HTML document?
2. Where does the page title (shown in the browser tab) go?
3. What goes in the <body>?
4. What does lang="en" do?
- Every page starts with <!DOCTYPE html> then the html element.
- The head holds non-visible info: title, charset, meta, CSS links.
- The body holds everything visitors see.
- Always set the lang attribute on the html element.