DOCTYPE and HTML Element
Every HTML document starts with a document type declaration and an HTML element that wraps all content.
The DOCTYPE Declaration
The DOCTYPE tells the browser which version of HTML the page uses:
Loading HTML Playground...
The <!DOCTYPE html> declaration:
- Must be the very first thing in your HTML file
- Tells the browser to use HTML5 (the current standard)
- Is not case-sensitive, but lowercase is conventional
- Is not an HTML tag - it's an instruction to the browser
The HTML Element
The <html> element is the root of your HTML document. Everything else goes inside it:
Loading HTML Playground...
Important attributes:
lang="en"- Specifies the language of the content (important for accessibility and SEO)
Document Structure Overview
A complete HTML document has this structure:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Metadata goes here -->
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<!-- Visible content goes here -->
</body>
</html>
The two main sections are:
<head>- Contains metadata (title, styles, scripts, etc.)<body>- Contains visible page content
Common DOCTYPE History
Before HTML5, DOCTYPE declarations were much longer:
<!-- HTML 4.01 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!-- XHTML 1.0 Strict -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- HTML5 (what we use today) -->
<!DOCTYPE html>
The HTML5 DOCTYPE is simple and easy to remember!
Exercise: Complete Document
Create a complete HTML document with proper structure:
Loading HTML Exercise...
Understanding document structure is the foundation for everything else in HTML!