~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Comment0 / 300

en/tutorials/html/1html-structure

# HTML Document Structure

Every HTML page starts with the same basic skeleton. Understanding this structure is the first step to building web pages.

## The HTML5 Boilerplate

Here's the minimal structure every HTML document needs:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Page</title>
  </head>
  <body>
    
  </body>
</html>
```

## Breaking Down Each Part

### `<!DOCTYPE html>`
This declaration tells the browser to use **HTML5**. It must be the very first line — no blank lines before it.

### `<html lang="en">`
The root element wrapping everything. The `lang` attribute helps:
- Screen readers pronounce content correctly
- Search engines understand the language
- Translation tools work properly

### `<head>` Section
Contains **metadata** — information about the page that isn't displayed:

```html
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Page Title</title>
  <meta name="description" content="Brief page description" />
  <link rel="stylesheet" href="styles.css" />
</head>
```

Key meta tags:
- `charset` — character encoding (always use UTF-8)
- `viewport` — makes sites responsive on mobile
- `title` — appears in browser tabs and search results
- `description` — used by search engines

### `<body>` Section
Contains **everything visible** on the page — text, images, links, forms, etc.

```html
<body>
  <h1>Welcome to My Site</h1>
  <p>This is visible content.</p>
</body>
```

## Complete Example

Here's a real-world starter template:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Awesome Website</title>
    <meta name="description" content="A website I built learning HTML" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <header>
      <h1>My Site</h1>
    </header>
    <main>
      <h2>About Me</h2>
      <p>Hello! I'm learning web development.</p>
    </main>
    <footer>
      <p>&copy; 2026 My Site</p>
    </footer>
  </body>
</html>
```

## Common Mistakes

1. **Missing DOCTYPE** — Browser goes into quirks mode
2. **Putting content in `<head>`** — Only metadata belongs here
3. **Forgetting `lang` attribute** — Hurts accessibility
4. **No viewport meta** — Site won't work on mobile

## Pro Tip

Most code editors have a shortcut for this. In VS Code, type `!` and press **Tab** — it generates the full boilerplate instantly!

No changes yet

cancel