Document Structure

Every HTML page follows the same basic skeleton. Once you understand this structure, every HTML file you ever open will feel familiar.

The doctype tells the browser which version of HTML you are using. Today, almost everyone uses HTML5, and its doctype is short and simple.

The html tag wraps around everything on the page. Inside it, there are exactly two main sections.

The head holds information about the page that isn't shown directly on screen, like the title and links to stylesheets. The body holds everything the visitor actually sees, like text, images, and buttons.

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

Explanation:

• The lang attribute tells screen readers and search engines what language the page is written in.
• The meta charset line makes sure special characters, like accented letters or currency symbols, display correctly. Everything a visitor sees will live inside the body tag.
• meta name="viewport" tells the browser that this tag controls how the page displays on different screen sizes.
• width=device-width sets the page width to match the device screen, instead of a fixed desktop size.
• initial-scale=1.0 sets the starting zoom level to normal, so the page doesn't load zoomed in or out.