HTML › Getting Started › Basic Structure

HTML Basic Structure

Beginner ⏱ 8 min read

Every webpage you've ever visited is built on HTML — HyperText Markup Language. It's not a programming language; it's a markup language that tells your browser how to structure and display content.

The Anatomy of an HTML Document

A valid HTML document has a predictable skeleton. Think of it like the bones of a webpage — without the right structure, things fall apart.

💡 Tip Every HTML file you create should start with <!DOCTYPE html>. This tells the browser you're writing modern HTML5 — without it, browsers enter "quirks mode" and render things inconsistently.
HTML
<!-- Every HTML page starts with this -->
<!DOCTYPE html>

<html lang="en">

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

  <body>
    <h1>Hello, World!</h1>
    <p>Welcome to my first webpage.</p>
  </body>

</html>

What Each Tag Does

Tag Purpose Required?
<!DOCTYPE html> Declares the document type as HTML5 ✅ Yes
<html> The root element — wraps everything ✅ Yes
<head> Metadata container — not visible to users ✅ Yes
<meta charset> Sets character encoding (use UTF-8 always) Recommended
<title> Sets the browser tab title Recommended
<body> All visible page content goes here ✅ Yes

Opening vs. Closing Tags

Most HTML elements have an opening tag like <p> and a closing tag like </p>. The content goes between them. Some elements are self-closing — they don't wrap content, like <meta>, <img>, and <br>.

⚠️ Watch Out Forgetting to close tags is the most common beginner mistake. Always close what you open, in reverse order — like nested boxes.

Try It Yourself

Edit the HTML below and click Run to see your changes live in the preview panel.

Try It Yourself
HTML Editor
Preview

Key Takeaways

  • Always start with <!DOCTYPE html>
  • The <head> holds metadata; <body> holds visible content
  • Most tags need to be opened and closed
  • Nesting order matters — close inner tags before outer ones