HTML Basic Structure

Beginner ~10 min read

The Skeleton

Every HTML document follows a specific structure. Think of it as the skeleton of your webpage. Without this structure, the browser won't know how to display your content correctly.

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </body>
</html>

Component Breakdown

1. <!DOCTYPE html>

This declaration must be the very first thing in your HTML document. It tells the browser that this is an HTML5 document.

2. <html>

The root element. Everything else lives inside this tag.

3. <head>

Contains metadata about the document that isn't displayed on the page itself, such as the title, character set, and links to CSS files.

4. <body>

Contains the visible page content. Headings, paragraphs, images, links - they all go here.

Interactive Example

Try moving the <h1> tag inside the <head> section and see what happens (spoiler: it might disappear or behave strangely!).

HTML

CSS

<!DOCTYPE html>\n<html>\n<head>\n    <title>My Page</title>\n</head>\n<body>\n    <h1>I am in the Body!</h1>\n    <p>I am visible.</p>\n</body>\n</html>

Quick Quiz

Which tag contains the visible content of the webpage?

<head>

<body>

<html>

<title>

Previous Editors

Next HTML Elements