Lessons · HTML and CSS · the page skeleton
The page skeleton
A page is a doctype, then one html element holding a head (things about the page) and a body (what is drawn).
Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.
What it is for
Every page you will ever make starts from these five lines. Get them by heart and the browser is on your side: modern rules, a titled tab, a language for screen readers.
How to think about it
Type the skeleton first, then fill the body. If a page renders strangely, check the first line before anything else.
Worked example
<!doctype html>The first line: use the modern layout rules, not the quirks of 1999.
<html lang="en">The root. lang helps screen readers pronounce the page and browsers offer translation.
<head><title>My page</title></head>Things about the page. The title is the text in the tab and in search results; nothing in the head is drawn.
<body><h1>Hello</h1></body>What is drawn: everything visible lives in the body.
</html>Close the root.
Your turn
Write the first line of every page.
<! html>
Write a page and watch it render
The trap
Leaving out the doctype. The page still shows, but in quirks mode, where widths and heights follow old rules and CSS behaves differently from every tutorial.