HTML Document Structure

The skeleton of every page

Every HTML page follows the same structure. Understanding it helps you read any website's code.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="A short summary of this page.">
  <title>Page Title</title>
</head>
<body>
  <!-- Everything visible goes here -->
</body>
</html>

Each part explained

• <!DOCTYPE html> tells the browser to use modern HTML.
• <html lang="en"> is the root element. The lang attribute helps screen readers and search engines.
• <head> holds information about the page that is not shown on it.
• <meta charset="UTF-8"> lets the page show all languages and symbols correctly.
• The viewport meta tag makes the page work properly on phones.
• <title> is the text shown in the browser tab and in search results.
• <meta name="description"> is often used as the snippet in search results.
• <body> contains everything visitors see.

Comments

Comments are notes for humans. The browser ignores them.

<!-- This is a comment -->

Common mistakes

• Forgetting to close a tag
• Writing content outside <body>
• Leaving out the viewport tag, which makes pages look tiny on phones

Practice

Create a page with a title, a description meta tag and a heading. Open it and check that the title appears in the browser tab.