HTML: The Structure of a Page and Meaning of Its Content

HTML describes what content is and how pieces relate.

A heading is not merely large text. A button is not merely a styled rectangle. A navigation region has a purpose that browsers, search engines, assistive technologies, and developers can understand.

HTML uses elements and attributes to describe the structure and meaning of web content.

CSS controls presentation, while JavaScript adds programmable behavior.

Elements and tags

An element commonly has opening and closing tags:

<p>This is a paragraph.</p>

The complete element includes tags and content.

Some elements are void and do not wrap content:

<img src="photo.jpg" alt="A mountain at sunrise">

HTML syntax is forgiving, but valid clear markup is easier to maintain and more predictable.

Attributes

Attributes configure or describe an element:

<a href="/about" lang="en">About</a>

Here:

href identifies the link target.
lang describes language.

Attributes can control behavior, supply metadata, connect labels, or provide accessibility information.

Boolean attributes such as disabled are true by their presence.

Nesting creates a tree

Elements contain other elements:

<article>
  <h1>Network Basics</h1>
  <p>A network connects devices.</p>
</article>

The browser builds a DOM tree:

article
├── h1
│   └── text
└── p
    └── text

CSS selectors and JavaScript use this structure.

Incorrect nesting can cause the parser to rearrange nodes according to HTML error-recovery rules.

Document structure

A minimal document includes:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example</title>
  </head>
  <body>
    <h1>Hello</h1>
  </body>
</html>

The head contains metadata and resource references. The body contains page content.

The doctype requests standards-mode rendering.

The character encoding should be declared early so bytes are decoded correctly.

Semantic HTML

Semantic elements communicate purpose:

header
nav
main
article
section
aside
footer
button

A generic div has no particular meaning.

Semantic markup improves:

Accessibility
Search understanding
Maintainability
Browser behavior

Use the native element matching the interaction before recreating it with generic elements and scripts.

Headings

HTML provides heading levels h1 through h6.

They describe hierarchy, not font size.

<h1>Operating Systems</h1>
<h2>Memory Management</h2>
<h3>Page Tables</h3>

CSS can style any heading visually.

A logical outline helps screen-reader users navigate and helps everyone scan content.

Avoid choosing a heading level only because its default appearance looks convenient.

An anchor with href creates a link:

<a href="/lessons/48">Next lesson</a>

Links navigate to resources. Buttons perform actions.

Opening a link in a new tab should be a deliberate behavior. External links opened through target="_blank" may require rel protection in some contexts.

Descriptive link text such as "Read the CSS lesson" is more useful than repeated "click here."

Images and alternatives

An image element references a resource:

<img
  src="/images/router.jpg"
  alt="A home router connected to a fiber terminal"
>

The alt text provides an alternative when the image cannot be seen or loaded.

Decorative images can use empty alternative text so assistive technology skips them.

Useful alt text communicates the image's purpose in context, not every visual detail.

Forms

Forms collect input.

<form>
  <label for="email">Email</label>
  <input id="email" name="email" type="email">
  <button type="submit">Subscribe</button>
</form>

Labels connect visible text to controls.

Input types provide keyboard, validation, and accessibility behavior.

Client-side validation improves usability but servers must validate again because requests can bypass the browser.

A concrete article example

<main>
  <article>
    <header>
      <h1>What Is DNS?</h1>
      <p>Part 41 of Tech Explained Simply.</p>
    </header>
 
    <section aria-labelledby="records">
      <h2 id="records">Common DNS records</h2>
      <ul>
        <li>A maps to IPv4.</li>
        <li>AAAA maps to IPv6.</li>
      </ul>
    </section>
  </article>
</main>

The markup communicates page purpose, article boundary, heading hierarchy, and a related list.

CSS can completely change its appearance without changing those meanings.

Metadata

The document head can include:

Title
Description
Character encoding
Viewport configuration
Stylesheets
Icons
Social preview metadata
Canonical URL

Metadata affects browser tabs, search results, sharing, and rendering.

It does not replace visible accessible page content.

HTML and security

HTML inserted from untrusted input can create cross-site scripting vulnerabilities.

If an application treats user text as markup, attackers can inject scripts, event handlers, or dangerous URLs.

Use framework escaping by default and a well-maintained sanitizer when intentionally accepting limited HTML.

Content Security Policy provides another defense but does not excuse unsafe insertion.

Custom elements and ARIA

Web components can define custom elements, but they still need accessible behavior and styling.

ARIA attributes can add accessibility semantics when native HTML is insufficient.

The first rule of ARIA is to prefer native elements when they already express the needed role and behavior.

ARIA changes accessibility information; it does not automatically add keyboard interaction or visual behavior.

Common misunderstandings

"HTML controls the page's appearance"

HTML supplies structure and meaning. CSS is the primary presentation language.

"A div can replace every element"

It can be styled, but it lacks native semantics and behavior.

"The browser displays tags"

It parses markup into a DOM and renders the represented content.

"Client-side form validation protects the server"

Requests can bypass it. Server-side validation remains mandatory.

Knowledge check

1. What does semantic HTML communicate?

It communicates the purpose and relationships of content, such as navigation, headings, articles, and controls.

2. Why should an action use a button instead of a clickable div?

A button includes native keyboard, focus, state, and accessibility behavior.

3. What is the DOM?

It is the browser's tree representation of the parsed document.

4. Why must servers validate form data?

Clients can be modified or bypassed and can send arbitrary requests.

The one idea to remember

HTML describes the structure and meaning of web content.

Good markup uses the correct native elements, logical nesting, clear headings, accessible alternatives, and safe handling of untrusted input.

Next, we will apply CSS to control how that structured content is presented across devices and states.