The Doctype and the html Element
Every HTML file you write from now on starts with the same two lines. They are easy to forget because a page often seems to work without them, but leaving them out quietly changes how browsers, screen readers and search engines treat your page.
The rule
Declare the doctype, then wrap everything in one html with a lang.
The doctype is the very first line:
<!DOCTYPE html>It is not an element; it is a declaration. It tells the browser "this is modern HTML, use standards mode". Without it, browsers switch to quirks mode, which copies the odd behaviour of browsers from the late 1990s so that ancient pages keep working. In quirks mode, box sizes and layout rules can differ from what CSS references describe, which leads to confusing bugs. Older HTML versions had long, complicated doctypes; today this short one is all you need, and it is case-insensitive, though <!DOCTYPE html> is the usual spelling.
The html element comes next and wraps the entire document. It is called the root element: every other element is its descendant, and there is exactly one of it.
<!DOCTYPE html>
<html lang="en">
<!-- head and body go here -->
</html>The lang attribute names the main language of the page using a short code: en for English, hi for Hindi, ta for Tamil, fr for French, and so on. Screen readers use it to choose the right pronunciation, browsers use it to offer translation, and search engines use it to show the page to the right audience. You can also put lang on a smaller element, like a single quote in another language.
The shortcut
Whenever you open a blank file, type the opening pair first and the closing tag last, then fill the middle. You will never forget the frame.
Line one: the doctype
<!DOCTYPE html>switches the browser into standards mode.
The trap is thinking "it rendered, so the doctype does not matter". Quirks mode renders too; it just renders differently.
Drills
Answer fast — trust the rule.
What does <!DOCTYPE html> do?
Which line correctly opens the root of an English page?
How many html elements should a document contain?
A blind user's screen reader reads a French page with an English accent. What is the most likely cause?
Remember
- Line one is
<!DOCTYPE html>; the next is<html lang="…">, the single root element. - Shortcut: type the doctype, the opening root and the closing root first, then fill the middle.
- Trap: a page without a doctype still renders, but in quirks mode.