What Is HTML? How Web Page Structure Works

Key takeaways

• HTML describes the structure and meaning of web content using elements and attributes.
• Semantic elements give browsers and assistive technology information that visual styling alone cannot provide.
• Links, forms, and disclosure widgets have native behavior without custom JavaScript.
• CSS controls presentation, while JavaScript can change the page and add application behavior.

HTML stands for HyperText Markup Language. It describes the structure and meaning of a web page: which text is a heading, which content is a paragraph, and which destination a link opens.

Imagine publishing a page for a weekend coding workshop. Before choosing colors or animations, you need a title, a description, a schedule, and a registration link. HTML gives those pieces a structure that a browser can display and people can navigate.

A complete HTML page

Save this example as workshop.html and open it in a browser. The registration address is an illustrative URL.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Weekend coding workshop</title>
  </head>
  <body>
    <header>
      <p>Community learning</p>
    </header>

    <main>
      <h1>Weekend coding workshop</h1>
      <p>Build your first web page with a small group.</p>

      <section>
        <h2>What you will learn</h2>
        <ul>
          <li>Structure a page with HTML</li>
          <li>Style the page with CSS</li>
          <li>Publish your work</li>
        </ul>
      </section>

      <a href="https://example.com/workshops/register">
        Register for the coding workshop
      </a>

      <details>
        <summary>Do I need experience?</summary>
        <p>No. Bring a laptop and a willingness to experiment.</p>
      </details>
    </main>

    <footer>
      <p>Organized by the community learning team.</p>
    </footer>
  </body>
</html>

The doctype selects standards mode. The head contains document metadata, including the browser-tab title. The body contains page content. Setting lang="en" identifies its language; the viewport setting supports layouts designed for mobile screens.

The browser supplies default styling, so this page works before a stylesheet exists. The disclosure opens and closes through native HTML behavior.

Elements, tags, and attributes

In <p>Bring a laptop.</p>, the tags mark the beginning and end of a paragraph element. Elements can contain other elements: the list above contains three list items.

Attributes add information to a start tag. The link’s href supplies its destination. A class provides a hook for styling or scripting; an id identifies an element and should be unique within the document.

Some elements, such as img and meta, are void elements: they do not contain child content or have closing tags. Proper nesting matters even though browsers recover from many markup mistakes. Recovery can produce a document structure different from the one you intended. MDN explains HTML syntax and document structure.

Choose elements by meaning

A heading communicates a section’s place in the document. Choose its level for that hierarchy, then use CSS to change its size.

Content or action	Suitable HTML
Main page heading	h1
Subsection heading	h2, then deeper levels as needed
Navigation to another page	a with href
An action such as opening a dialog	button
A group of navigation links	nav
A labeled input	label associated with an input

Generic div and span containers are useful when no more meaningful element fits. Turning a div into a clickable control creates extra work for keyboard behavior, focus, and accessibility.

For images, write alternative text that communicates the image’s purpose in context. A purely decorative image can use alt="". An image used as the only content of a link needs text describing the link’s purpose. The W3C alternative-text decision tree helps distinguish these cases.

Where CSS and JavaScript fit

CSS can give the workshop page a centered layout, readable spacing, and responsive typography. It changes presentation without changing a heading into a different kind of content.

JavaScript can add custom interactions, fetch availability, or update a registration message. It is not required for ordinary links or the disclosure in this example.

The browser parses HTML into a document object model, or DOM. Scripts interact with that live structure, which can differ from the original source after parsing or later changes.

What to check on your first page

Read the page without its visual styling. Do the headings still describe a sensible outline? Do link labels explain their destinations? Can you reach interactive elements with the keyboard?

Then inspect the page in browser developer tools. If something appears in the wrong place, examine the DOM for accidental nesting before trying to fix it with CSS. A parser follows syntax rules; a page looking acceptable does not prove its markup says what you intended.

A useful HTML page starts with content whose meaning survives a change in appearance.