HTML Basics

Document Structure

⏱ 6 min read📖 Beginner

An HTML document has a specific structure that every browser expects. Understanding this structure is essential before you write a single line of content.

When you open an HTML file in a browser, the browser parses it from top to bottom. It looks for specific elements to understand what the page is about, how to display it, and what content to show. Every HTML page follows the same skeleton.

The DOCTYPE Declaration

The very first line of every HTML file should be the doctype declaration:

<!DOCTYPE html>

This tells the browser that the document uses modern HTML (HTML5). Without it, some browsers fall into "quirks mode" and may render your page differently than expected.

The HTML Element

Everything in your page lives inside the <html> element. The lang attribute tells the browser (and screen readers) what language the page is written in:

<html lang="en">
  ...
</html>

The Head Section

The <head> contains information about the page — metadata that the browser needs but the user doesn't directly see.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
</head>

Key elements in the head:

<meta charset="UTF-8"> — sets character encoding so special characters display correctly
<meta name="viewport"> — ensures the page scales properly on mobile devices
<title> — the text shown in the browser tab

The Body Section

The <body> contains everything the user actually sees — text, images, links, buttons, and more.

<body>
  <h1>Welcome to My Site</h1>
  <p>This is a paragraph of text.</p>
</body>

Putting It All Together

<!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>
    <h1>Hello, World!</h1>
    <p>This is the body of my page.</p>
  </body>
</html>

💡

Every HTML page you write should include the full structure above — DOCTYPE, html, head, and body. Think of it as the required template before you add any real content.

Semantic Elements

HTML5 introduced semantic elements that describe the role of content, not just its appearance. Instead of using generic <div> elements everywhere, you can use:

<header> — top of the page or section
<nav> — navigation links
<main> — the primary content of the page
<footer> — bottom of the page
<article> — a self-contained piece of content
<section> — a thematic grouping of content

Semantic HTML makes your pages more accessible to screen readers and easier for search engines to understand.

Have anything to say about this lesson?

Your feedback helps improve these tutorials. If something was confusing or missing, let us know.