What is HTML Structure?

Every web page follows a basic pattern that helps browsers understand what to display and how to organize it. The structure of an HTML document acts like the skeleton of a website - it gives shape and order to your content.

When you open a new HTML file, you're defining two main things:

  1. What kind of document it is (<!doctype html> tells the browser it's modern HTML5)
  2. What content it contains (the <html> element wraps everything inside)

The Basic HTML Layout

Here's the essential template used by almost every web page:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My First Structured Page</title>
  </head>
  <body>
    <header>
      <h1>Welcome to My Page</h1>
    </header>

    <main>
      <section>
        <h2>About This Site</h2>
        <p>This page shows how HTML gives structure to web content.</p>
      </section>
    </main>
    <footer>
      <p>© 2025 My Website</p>
    </footer>
  </body>
</html>

Breaking it Down

HTML structural elements and their purpose
Element Purpose
<!doctype html> Tells the browser to use HTML5 rules
<html lang="en"> Wraps everything on the page and declares the language
<head> Contains information about the page (title, metadata, linked files like CSS or scripts)
<title> Appears in the browser tab and search results
<meta> Provides extra page data (character set, viewport settings, description, etc.)
<body> Holds everything visible to users
<header> Top section for page or site title, logo, or navigation
<main> The main content area (unique to each page)
<section> Groups related content within the main area
<footer> Bottom section for credits, copyright, or contact links

Table with two columns, Element and Purpose, listing ten HTML structural elements including doctype, html, head, title, meta, body, header, main, section, and footer, along with the purpose of each.

Attributes - Adding Extra Information

Attributes are name-value pairs that modify how elements behave or appear. They always go inside the opening tag, like so:

<a href="https://example.com" target="_blank">Visit Example</a>
Common HTML attributes and their meaning
Attribute Meaning
href Specifies the link destination
target="_blank" Opens the link in a new tab
lang="en" Declares the page language for accessibility
alt="..." Describes images for screen readers
id / class Label elements for styling or scripts

Table with two columns, Attribute and Meaning, listing five common HTML attributes including href, target, lang, alt, and id or class, along with what each one does.

Putting it All Together

A well-structured HTML page:

  • Starts with a doctype and root <html> element.
  • Has a <head> for meta information and a <body> for content.
  • Uses semantic tags (header, main, section, footer) to organize content clearly.
  • Applies attributes to add details and accessibility.

When your HTML follows this structure, browsers and assistive technologies can interpret your content accurately- and your CSS will work the way you expect.

Optional Reading

For a more detailed look at page structure, see: https://developer.mozilla.org/en-US/docs/Learn/HTML

Source: Khalil Abdullah and Saylor University
Creative Commons License This work is licensed under a Creative Commons Attribution 4.0 License.