The Doctype & HTML Root
What is the Doctype?
Think of a document declaration like the header of a formal contract. Before you read the terms, the header tells you exactly what kind of contract it is and which laws govern it.The <!DOCTYPE html> declaration is an instruction to the web browser. It tells the browser: "Hey, this is a modern HTML5 document. Please render it using the latest web standards."
Directly below the doctype, we have the <html> element. This is the root wrapper of your entire webpage. Every single line of HTML you write (except the doctype) must go inside the opening <html> and closing </html> tags. The lang="en" attribute tells search engines and screen readers that the page content is written in English.
Why does it matter?
If you forget the doctype declaration, browsers will fall back to "Quirks Mode". This is a backward-compatibility mode where the browser tries to emulate bugs from 1990s browsers (like Internet Explorer 5) to display old sites. It will break modern styles and make your layouts look completely broken.How to write it
The doctype declaration must always be the very first line of code at the top of your file. It doesn't have a closing tag.Here is the basic root setup:
<!DOCTYPE html>
<html lang="en">
<!-- Everything else goes here -->
</html>
Common Mistakes
<!DOCTYPE html>...</!DOCTYPE html> is wrong. It is a one-line declaration, not an element.<!DOCTYPE html>, the browser will ignore the doctype and switch to quirks mode.Quick Reference
<!DOCTYPE html> — Tells the browser to render the page in modern HTML5 standards.<html lang="en"> — The root wrapper element, declaring English as the primary language.Your Task
Declare the HTML5 doctype, then create an `<html>` root wrapper with the attribute `lang` set to 'en'. Make sure to close the tag.
index.html
Type code above to start the lesson.
Live Preview