HTML Fundamentals

Beginner Level

Complete this lesson to unlock: HTML Structure

Document Structure

Essential

Basic Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document Title</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document Title</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>...</header>
  <main>...</main>
  <footer>...</footer>
</body>
</html>

Visual Representation

html

head

body

header

main

footer

This tree structure shows the proper nesting of HTML elements.

Quick Knowledge Check

1. Which tag is required for a valid HTML5 document?

Explanation: While all these tags are typically used, only <!DOCTYPE html> is absolutely required to declare the document as HTML5.

2. Where should the <title> tag be placed?

Explanation: The <title> tag belongs in the <head> section as it provides metadata about the document rather than visible content.

Frequently Asked Questions

Continue Your Learning Path

←

HTML Document Structure

HTML Attributes

Deep dive into semantic HTML and proper nesting

→

HTML Fundamentals

Document Structure

Basic Template

Visual Representation

Quick Knowledge Check

1. Which tag is required for a valid HTML5 document?

2. Where should the <title> tag be placed?

Frequently Asked Questions

Why is the DOCTYPE declaration important?

What's the difference between <div> and <section>?

How many heading levels should I use?

Continue Your Learning Path

HTML Document Structure

HTML Attributes