On this page

HTML Elements and Structure

Published July 4, 2026 Updated July 13, 2026

HTML elements are the tags you use to tell the browser what each piece of your page actually is. A heading is a heading, a list is a list, and a link goes somewhere. Get the structure right first and everything you layer on top, styling and behavior, has something solid to attach to. This category walks the elements you reach for on almost every page you build.

I used to think you could nest a pile of div tags, add some CSS, and call it a page. That works, technically, until you turn on a screen reader or check how the page shows up in a search result. The elements below carry real meaning, the vocabulary that browsers, crawlers, and assistive technology all read to figure out what your content actually is.

The Document Skeleton

Every HTML page starts with the same outer shape before the content varies. You declare the document type, wrap everything in html, and split the page into a head for metadata and a body for what people see.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My first page</title>
  </head>
  <body>
    <h1>Hello</h1>
  </body>
</html>

The head holds information about the page, like its title and character encoding. The body holds the headings, paragraphs, lists, and images a reader looks at.

Get this skeleton wrong, a missing closing tag, a body opened before the head closes, and browsers will still try to render something, because HTML parsing is famously forgiving. That forgiveness is not a reason to skip the structure. It just means mistakes fail quietly instead of throwing an error, so a validator or a careful read-through catches problems a browser will happily paper over.

Block and Inline Elements

Every element you meet in this category behaves one of two ways. Block-level elements, like headings, paragraphs, and list items, start on their own line and stretch to fill the width available to them. Inline elements, like links and the strong and em tags you will meet in Headings and Text, sit inside a line of text and take up only as much width as their content needs.

<p>A paragraph is <strong>block-level</strong> and starts its own line.</p>
<p>A <a href="/programming/css/">link</a> is inline and sits inside the sentence.</p>

Knowing an element's default behavior saves you from confused CSS later. You cannot hand a fixed pixel width to an inline element and expect it to respect that value the way a block element does, at least not without changing its display property first.

Content Elements

Inside the body, you mark up content with elements that carry meaning. Headings from h1 to h6 build the outline, paragraphs hold blocks of text, and lists group related items. Links and images bring in other pages and pictures.

<h1>Recipes</h1>
<p>A short collection of weeknight dinners.</p>

<ul>
  <li>Pasta</li>
  <li>Tacos</li>
</ul>

<a href="/recipes/">Browse all recipes</a>

Each element here does a specific job. The browser, a screen reader, and a search crawler all read these tags to understand the page, so picking the right one really does matter. Reach for the most specific element that matches your content's meaning, not the one that happens to look right by default. A set of navigation links belongs in a nav wrapping a ul, not a row of div elements spaced out with CSS, because the wrapping element itself tells assistive technology and search engines what the group actually is.

Topics

Topic	What it covers
Document Structure	The doctype, the `html`, `head`, and `body` skeleton, plus charset and viewport meta
Headings and Text	Headings `h1` through `h6`, paragraphs, `strong`, `em`, and line breaks
Lists	Unordered, ordered, and description lists
Links and Images	Anchors with `href` and images with `src` and `alt`

HTML guide for the full language overview
CSS guide for styling the structure you build here

Frequently Asked Questions

Are div and span the same kind of element?

No. A div is block-level and groups larger sections. A span is inline and wraps a small piece of text within a line, usually so CSS or JavaScript can target exactly that piece.

Do you need an id or class to style an element?

No. Any element can be styled by its tag name, such as every paragraph or image on a page. Ids and classes exist to target one specific element or a repeatable group, not as a precondition for styling.

Can text sit directly inside body without a paragraph?

Browsers render it, but it sits outside any semantic container, so a screen reader, a CSS selector, and a crawler all have nothing but a bare text node to work with. Wrap it.

What is the difference between section, article, and div?

A section groups a themed part of a page, usually with its own heading. An article is content that could stand alone and be republished elsewhere. A div carries no meaning and is what you reach for when nothing more specific fits.

Is it valid to use a heading purely for spacing?

Technically valid, and still wrong. A heading announces a section to assistive technology and search engines, so an empty one promises content that is not there. Use margin or padding for space and keep headings for real titles.

Sources

[1]
Content Structure
(w3.org)
[2]
The HTML Section Heading elements
(developer.mozilla.org)
[3]
Understanding Success Criterion 1.3.1: Info and Relationships
(w3.org)