HTML Elements: Page Structure, Text, Links, and Images

HTML elements describe the parts of a web page, such as headings, paragraphs, links, and images. Most elements have an opening tag, content, and a closing tag. Choose the element that matches the content before styling it.

Start with the HTML guide if you want the bigger picture of how markup, CSS, and JavaScript fit together.

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 meaning, the vocabulary that browsers, crawlers, and assistive technology all read to figure out what your content actually is.

In <p class="intro">Hello</p>, the tags mark a paragraph, Hello is its content, and class="intro" is an attribute. Nest elements by closing the inner one first. Void elements such as img and br have no closing tag.

What Is the Basic Structure of an HTML Page?

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.

How Do Block and Inline Elements Differ?

Block and inline describe common CSS layout behavior. Headings and paragraphs normally start on a new line, while links and emphasis sit within a line of text. These are defaults, not permanent categories; CSS can change an element's display behavior.

<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>

A normal inline text element, such as span, ignores a set width unless you change its display behavior. Inline images are different and can have dimensions. The CSS guide explains how sizing and display work together.

Which HTML Elements Should You Use?

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>

Choose the element that describes your content. Use nav for a major group of navigation links; a list inside it is often helpful but is not required. Use div when you need a container and no more specific element fits.

Which HTML Topic Should You Learn Next?

Learn document structure first, then headings, lists, links, and images. Each guide below keeps the syntax beside a working example.

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

Frequently Asked Questions

How do HTML div and span elements differ?

An HTML div is a generic container that displays as a block by default. A span is a generic inline container, usually for part of a sentence. CSS can change either element's display behavior.

Do HTML elements need an id or class for styling?

HTML elements do not need an id or class for styling. CSS can select a tag such as p directly. Use classes for reusable groups and an id for a unique element.

Can text sit directly inside the HTML body?

Text can sit directly inside the HTML body, but a p element gives a paragraph a clear boundary for styling and navigation. Use the element that describes the text instead of leaving a whole article as bare text nodes.

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

An HTML 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.

Should HTML headings be used for spacing?

HTML headings should name sections, not create empty space. Use CSS margin or padding for spacing so readers do not encounter empty or misleading headings.