Document Structure: DOCTYPE html head body
Write a valid HTML5 document from scratch: the DOCTYPE declaration, the html root, the head for metadata, and the body for content.
Document Structure: DOCTYPE html head body is a free Frontend Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Every HTML Document Has the Same Skeleton
A valid HTML5 document always starts with a DOCTYPE declaration, contains an html root element, and inside it a head section for metadata and a body section for visible content. Understanding this structure is step zero.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Page</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>The DOCTYPE Declaration
<!DOCTYPE html> is not an HTML tag — it's an instruction to the browser to render the page in standards mode. Without it, browsers fall back to "quirks mode", which renders pages inconsistently. Always put it on line 1.
The <html> Element and lang Attribute
The <html> element is the root of the document. Add a lang attribute to declare the page's language. Screen readers use it to choose the correct pronunciation engine, and search engines use it for localised results.
<html lang="en">
<!-- or -->
<html lang="fr">
<html lang="de">The <head> Element
The <head> contains metadata — information about the page rather than the page content itself. Nothing inside head is directly visible to users, but it affects how the browser and search engines treat the page.
charset and viewport Meta Tags
<meta charset="UTF-8"> tells the browser to decode the file as UTF-8, supporting all international characters. <meta name="viewport"> makes responsive design work on mobile.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">The <title> Element
The <title> text appears in the browser tab, bookmarks, and search engine results. Keep it concise (50–60 chars), descriptive, and include the brand name at the end.
<title>Getting Started with HTML | CoddyKit</title>Linking CSS and Fonts
Link external stylesheets with <link> inside the head. Use rel="stylesheet" and the correct href. Google Fonts and other font services are also linked this way.
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">The <body> Element
Everything visible on the page lives inside <body>: headings, paragraphs, images, buttons, forms, and scripts. The body is what the user sees and interacts with.
Script Tags: Where to Place Them
Place <script src="app.js" defer></script> in the <head>. The defer attribute downloads the script in parallel and executes it after the HTML is fully parsed, the safest default choice.
<head>
<script src="app.js" defer></script>
</head>Comments in HTML
Use <!-- comment --> to add notes to your HTML. Comments are not displayed to users but are visible in source view. Use them to explain intent, mark sections, or temporarily disable code during debugging.
<!-- Navigation section -->
<nav>
...
</nav>
<!-- End navigation -->Validation: The W3C Validator
Paste your HTML into validator.w3.org to check for errors. Valid HTML reduces cross-browser inconsistencies, helps screen readers parse the page correctly, and is a sign of professional craftsmanship.
Quick Check
Where should the <meta charset="UTF-8"> tag be placed?
Recap: The HTML Document Skeleton
Every HTML file needs: → →
(charset, viewport, title, CSS links) → (all visible content). This skeleton ensures cross-browser consistency, accessibility, and proper SEO indexing.Frequently asked questions
Is the “Document Structure: DOCTYPE html head body” lesson free?
Yes — the full text of “Document Structure: DOCTYPE html head body” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.
What will I learn in “Document Structure: DOCTYPE html head body”?
Write a valid HTML5 document from scratch: the DOCTYPE declaration, the html root, the head for metadata, and the body for content. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Document Structure: DOCTYPE html head body” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Frontend Academy lesson?
Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Document Structure: DOCTYPE html head body
- Semantic Tags: header nav main article footer
- Text Images Links and Lists
- Forms: input label button