VisaSpark
Sign in
beginner18 min

HTML Document Structure & Basic Elements

Learn the anatomy of every HTML page — doctype, html, head, and body — plus everyday elements like headings, paragraphs, and comments.

What you'll learn

  • Explain the purpose of the doctype declaration and the html/head/body skeleton
  • Identify what belongs inside <head> versus <body>
  • Use common text elements: headings, paragraphs, div, span, and comments

Explanation

Every single web page you've ever visited — a search engine, a bank, a game — is built from the same handful of structural pieces arranged the same way. Once you can see that shape, HTML stops feeling like a giant list of tags to memorize and starts feeling like a small, predictable skeleton you dress up differently each time.

The Skeleton: doctype, html, head, body

At the very top of an HTML file sits <!doctype html>. It isn't really a "tag" so much as an instruction to the browser: render this using the modern HTML standard, rather than guessing based on quirky old rules from the 1990s. Skipping it can cause a browser to render your page in "quirks mode," where spacing and sizing behave unpredictably.

Right below it comes a single <html> element, which wraps everything else on the page. Inside <html>, there are exactly two children:

  • <head> holds information about the page that isn't drawn directly onto it — the browser tab title, the character encoding, links to stylesheets, and metadata search engines read. Nothing inside <head> shows up as visible page content.
  • <body> holds everything a visitor actually sees and interacts with: text, images, buttons, forms, all of it.

A common beginner instinct is to put a heading or a paragraph inside <head> by mistake — it simply won't appear on the page, because <head> isn't meant for visible content at all.

The Everyday Elements

Once you're inside <body>, a small set of elements covers most early pages:

  • Headings, <h1> through <h6>, create a title hierarchy — <h1> is the single most important heading on a page, and levels should generally step down one at a time rather than skip.
  • Paragraphs, <p>, wrap a block of running text.
  • <div> is a generic block-level container with no built-in meaning — useful for grouping things together for styling, but not descriptive on its own (you'll meet more descriptive containers in the next lesson).
  • <span> is the inline cousin of <div>: it wraps a small piece of text within a line, without starting a new line, useful for styling a single word differently.
  • <br> forces a single line break inside text, and <hr> draws a horizontal rule to visually separate sections.
  • Comments, written as <!-- like this -->, are completely ignored by the browser — handy for leaving yourself notes in the source code.

Tags, Elements, and Nesting

A "tag" is the bracketed marker itself, like <p> or </p>; an "element" is the tag pair plus everything between them. Most elements need both an opening and closing tag, and elements can nest inside one another — but nesting has to be tidy. If you open a <div> and then a <p> inside it, you must close the <p> before closing the <div>, like closing parentheses in the reverse order you opened them. Getting this wrong doesn't always crash anything visibly, but it can quietly scramble how the browser interprets your structure.

None of this requires memorizing dozens of tags today. Get comfortable with the doctype-html-head-body skeleton and this small handful of everyday elements, and every additional tag you learn afterward will simply slot into a shape you already understand.

Example

A minimal but complete HTML page showing the doctype, head metadata, and a few common body elements.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>About Me</title>
  </head>
  <body>
    <h1>Hi, I'm building my first page</h1>
    <p>This paragraph is regular <span>flowing</span> text.</p>
    <div>
      <p>This paragraph lives inside a div, a generic container.</p>
    </div>
    <!-- This is a comment; the browser ignores it entirely -->
    <hr />
    <p>A horizontal rule appeared above this line.</p>
  </body>
</html>

Try it yourself

Change the heading and paragraph text, then add a second <p> below it, and press Run.

Code editor. Press Escape then Tab to leave the editor if keyboard focus becomes trapped. Press Control+Shift+M inside the editor to toggle Tab-key focus trapping.

Loading editor…

Guided exercise

Guided exercise

The page below is missing its <title>. Add a <title>My First Page</title> element inside <head> so the browser tab shows a real title.

Checks: Adds a non-empty <title> inside <head> · Still has exactly one <h1> · plus 1 hidden check

Code editor. Press Escape then Tab to leave the editor if keyboard focus becomes trapped. Press Control+Shift+M inside the editor to toggle Tab-key focus trapping.

Loading editor…

Stuck? Get a hint.

Independent exercise

Independent exercise

Build a complete HTML page from scratch: keep the doctype, an <html lang="en"> element, a <head> with a <meta charset="utf-8"> and a non-empty <title>, and a <body> with exactly one <h1>, at least two <p> paragraphs, and a <div> that contains a <span>.

Checks: Keeps the doctype declaration · Has a non-empty <title> · Has exactly one <h1> · Has at least two <p> paragraphs · plus 1 hidden check

Code editor. Press Escape then Tab to leave the editor if keyboard focus becomes trapped. Press Control+Shift+M inside the editor to toggle Tab-key focus trapping.

Loading editor…

Stuck? Get a hint.

Common mistakes

  • Forgetting the doctype, which can push unusual browsers into a legacy rendering mode instead of the modern standards mode.
  • Putting visible text like headings or paragraphs inside <head> — nothing in <head> is rendered on the page itself.
  • Nesting tags incorrectly, such as closing a <div> before closing a <p> that's still open inside it, which scrambles the element tree.

Knowledge check

Knowledge check

1. What is the purpose of <!doctype html>?
2. Which section holds metadata like the title and character encoding, without displaying it directly on the page?
3. What does a <span> element do?
4. Which of these is a valid way to comment out text in HTML so the browser ignores it?

Takeaway

Every HTML page begins with the same doctype + html/head/body skeleton — master that shape and everything else is just filling it with the right tags.

Summary

HTML documents share a predictable skeleton: a doctype declaration, a single <html> element containing a <head> for metadata and a <body> for visible content. Common elements like headings, paragraphs, div, span, and comments cover most of what an early page needs, as long as tags are closed and nested correctly.

References

Your notes

Notes save automatically.

Finished this lesson?

Mark it complete to track your progress and schedule a future review.

Next: Semantic HTML: Links, Images, Lists & Tables →