HTML Elements Reference (HTML Tutorial)

This page lists the HTML elements you will use most often, grouped by what they are for. Each row gives a one-line description and a link to the lesson that explains the element properly, with examples.

Use it as a lookup table while you build pages. Press Ctrl+F (Cmd+F on a Mac) and type an element name to find it quickly. Elements that are obsolete, such as <center> and <font>, are not listed; Best Practices & Validation shows what replaces them.

Document and metadata

These set up the page and describe it. Apart from <html>, they live in the <head>.

Element	What it does	Learn more
`<!DOCTYPE html>`	Not an element: the first line, which puts the browser in standards mode	Document Structure
`<html>`	The root element that wraps the whole page; carries `lang`	Document Structure
`<head>`	Holds information about the page, not shown in it	Document Structure
`<title>`	The page title on the browser tab and in search results	The Head
`<meta>`	Metadata such as `charset`, viewport and description	The Head
`<link>`	Connects stylesheets, icons and other resources	The Head
`<style>`	CSS written inside the page	CSS Introduction
`<script>`	JavaScript, written inline or loaded from a file	Loading & Performance Hints

Page structure and landmarks

Element	What it does	Learn more
`<body>`	Everything visible on the page	Document Structure
`<header>`	Introductory content for the page or a section	Semantic HTML
`<nav>`	A block of major navigation links	Semantic HTML
`<main>`	The main content of the page; use one	Semantic HTML
`<article>`	Self-contained content, such as a post or product card	Semantic HTML
`<section>`	A themed group of content with a heading	Semantic HTML
`<aside>`	Related content set apart, such as a sidebar	Semantic HTML
`<footer>`	Closing content for the page or a section	Semantic HTML
`<search>`	Wraps a search or filter form	Semantic HTML
`<address>`	Contact details for the page owner or article author	Semantic HTML
`<h1>` to `<h6>`	Headings, from most to least important	HTML Headings
`<hgroup>`	Groups a heading with a subtitle or tagline	HTML Headings

Text blocks and grouping

Element	What it does	Learn more
`<p>`	A paragraph	Paragraphs & Line Breaks
`<br>`	A line break inside text, such as in an address	Paragraphs & Line Breaks
`<hr>`	A change of topic between paragraphs	Paragraphs & Line Breaks
`<pre>`	Preformatted text that keeps its spaces and line breaks	Paragraphs & Line Breaks
`<blockquote>`	A long quotation from another source	Quotations & Citations
`<ul>`	A list where order does not matter	HTML Lists
`<ol>`	A list where order matters, such as steps	HTML Lists
`<li>`	One item in a `<ul>` or `<ol>`	HTML Lists
`<dl>`, `<dt>`, `<dd>`	A list of terms and their descriptions	HTML Lists
`<figure>`	Self-contained content such as an image or code sample	HTML Images
`<figcaption>`	The caption of a `<figure>`	HTML Images
`<div>`	A generic block box with no meaning, for styling	Block, Inline, div & span

Inline text

Element	What it does	Learn more
`<a>`	A link to another page, a file or a place on the page	HTML Links
`<strong>`	Important, serious or urgent text	Text Formatting
`<em>`	Stress emphasis that changes the meaning of a sentence	Text Formatting
`<b>`	Draws attention without extra importance, such as a product name	Text Formatting
`<i>`	A different voice: a foreign word, a technical term, a thought	Text Formatting
`<u>`	A non-textual annotation, such as a marked spelling mistake	Text Formatting
`<s>`	Text that is no longer accurate, such as an old price	Text Formatting
`<mark>`	Highlighted text, such as a matching search word	Text Formatting
`<small>`	Side comments and fine print	Text Formatting
`<sub>`, `<sup>`	Subscript and superscript, as in H₂O or 10²	Text Formatting
`<code>`	A fragment of computer code	Text Formatting
`<kbd>`	Keyboard input, such as Ctrl+S	Text Formatting
`<samp>`	Sample output from a program	Text Formatting
`<var>`	A variable in maths or programming	Text Formatting
`<abbr>`	An abbreviation, with its full form in `title`	Text Formatting
`<del>`, `<ins>`	Text removed from or added to a document	Text Formatting
`<q>`	A short inline quotation; the browser adds quote marks	Quotations & Citations
`<cite>`	The title of a book, film, song or other work	Quotations & Citations
`<time>`	A date or time, with a machine-readable `datetime`	Semantic HTML
`<wbr>`	A spot where a long word or URL may break	Paragraphs & Line Breaks
`<span>`	A generic inline box with no meaning, for styling	Block, Inline, div & span

Images, media and embeds

Element	What it does	Learn more
`<img>`	An image; needs `alt`, `width` and `height`	HTML Images
`<picture>`	Offers different image files for different screens or formats	Responsive Images
`<source>`	One file option inside `<picture>`, `<audio>` or `<video>`	Responsive Images
`<audio>`	Sound with built-in player controls	Audio & Video
`<video>`	Video with built-in player controls	Audio & Video
`<track>`	Captions or subtitles for a video	Audio & Video
`<svg>`	Vector graphics drawn with shapes, sharp at any size	SVG & Canvas
`<canvas>`	A drawing surface that JavaScript paints on	SVG & Canvas
`<iframe>`	Another web page embedded in yours, such as a map	Iframes & Embeds
`<embed>`, `<object>`	External content such as a PDF; rarely needed today	Iframes & Embeds

Tables

Element	What it does	Learn more
`<table>`	Wraps a table of data	HTML Tables
`<caption>`	The title of a table; must come first	HTML Tables
`<thead>`, `<tbody>`, `<tfoot>`	Group the heading, body and summary rows	HTML Tables
`<tr>`	One table row	HTML Tables
`<th>`	A heading cell; use `scope="col"` or `scope="row"`	HTML Tables
`<td>`	An ordinary data cell	HTML Tables
`<colgroup>`, `<col>`	Describe columns so CSS can style them	HTML Tables

Forms

Element	What it does	Learn more
`<form>`	Collects input and sends it to the `action` URL	HTML Forms
`<label>`	The visible name of a form control	HTML Forms
`<input>`	A one-line control; its `type` decides what kind	Input Types
`<button>`	A clickable button; submits a form by default	HTML Forms
`<textarea>`	Multi-line text input	Form Elements
`<select>`, `<option>`	A drop-down list and its choices	Form Elements
`<optgroup>`	A labelled group of options inside `<select>`	Form Elements
`<datalist>`	Suggestions for an input; does not restrict	Form Elements
`<fieldset>`, `<legend>`	Groups related controls under a caption	Form Elements
`<output>`	The result of a calculation	Form Elements
`<progress>`	How much of a task is complete	Form Elements
`<meter>`	A measurement within a known range	Form Elements

Interactive elements and components

Element	What it does	Learn more
`<details>`	A section the user can open and close	Details, Summary & Dialog
`<summary>`	The visible label of a `<details>` element	Details, Summary & Dialog
`<dialog>`	A pop-up window, modal or non-modal	Details, Summary & Dialog
`<template>`	Inert HTML that JavaScript can copy	Templates & Web Components
`<slot>`	A placeholder for content inside a web component	Templates & Web Components

Popovers are not an element: any element becomes one with the popover attribute. See Popover API and Interactive Attributes.

Similar elements, different jobs

Several pairs of elements look alike in the browser but mean different things. Choose by meaning; CSS can change the look.

If you mean	Use	Not
This text is important	`<strong>`	`<b>`
Say this word with stress	`<em>`	`<i>`
Go to another page	`<a href>`	`<button>`
Do something on this page	`<button>`	`<a>` or `<div>`
Content that stands alone	`<article>`	`<section>`
A box only for styling	`<div>`	`<section>`
How much of a task is done	`<progress>`	`<meter>`
The price is no longer valid	`<s>`	`<del>`

HTML

<p><strong>Warning:</strong> the exam hall changes on Monday.</p>
<p>I said the <em>blue</em> folder, not the red one.</p>
<p>Price: <s>₹1,499</s> ₹1,199</p>
<p>Press <kbd>Ctrl</kbd> + <kbd>P</kbd> to print your <abbr title="Permanent Account Number">PAN</abbr> form.</p>

Many elements on one page

The example below uses elements from almost every group. Run it, then find each element in the tables above.

HTMLTry it yourself

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kochi Coding Club Meetup</title>
  <style>table { border-collapse: collapse; } th, td { border: 1px solid #999; padding: 4px 8px; }</style>
</head>
<body>
  <header>
    <p><strong>Kochi Coding Club</strong></p>
    <nav aria-label="Main"><a href="#agenda">Agenda</a> <a href="#join">Join</a></nav>
  </header>
  <main>
    <article>
      <h1>November meetup: your first website</h1>
      <p>On <time datetime="2026-11-21">Saturday, 21 November</time> at the public library. Entry is <mark>free</mark>.</p>
      <figure>
        <img src="https://course.ethicscomputer.in/assets/samples/landscape-400.svg" alt="Illustration of blue and green hills at sunrise, with an orange sun and a river" width="400" height="250">
        <figcaption>We meet at 10 am and finish by lunch.</figcaption>
      </figure>
      <section id="agenda">
        <h2>Agenda</h2>
        <table>
          <caption>Saturday schedule</caption>
          <tr><th scope="col">Time</th><th scope="col">Session</th></tr>
          <tr><td>10:00</td><td>Write your first <abbr title="HyperText Markup Language">HTML</abbr> page</td></tr>
          <tr><td>11:30</td><td>Put it online</td></tr>
        </table>
      </section>
      <details>
        <summary>What should I bring?</summary>
        <p>A laptop with a code editor. Save files with <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>
      </details>
      <section id="join">
        <h2>Join</h2>
        <form action="#">
          <label for="who">Your name</label>
          <input id="who" name="who" required>
          <button>Reserve a seat</button>
        </form>
      </section>
    </article>
  </main>
  <footer>
    <small>Organised by volunteers. Seats are limited.</small>
  </footer>
</body>
</html>

Key points

Elements fall into a few groups: metadata, page structure, text blocks, inline text, media, tables, forms and interactive elements.
Choose elements for what the content is; the browser's default look does not matter, because CSS can change it.
Landmark elements such as <header>, <nav>, <main> and <footer> describe the regions of a page.
<div> and <span> have no meaning; use them only when nothing more specific fits.
Several elements look alike but mean different things, such as <strong> and <b>, or <a> and <button>.
When in doubt, follow the link in the table to the lesson that teaches the element.

Exercise

Mark up this short shop notice using the most suitable element for each part: the heading "Festival offer"; the date 2 November 2026 (machine-readable); the old price ₹2,999 shown as no longer valid, followed by the new price ₹2,399; the word "today" stressed; the abbreviation GST with its full form; and the fine print "Prices include GST" at the end.

Show solution

HTML

<article>
  <h2>Festival offer</h2>
  <p>Valid until <time datetime="2026-11-02">2 November 2026</time>.</p>
  <p>Pressure cooker, 5 litre: <s>₹2,999</s> <strong>₹2,399</strong></p>
  <p>Order <em>today</em> for free delivery in Jaipur.</p>
  <p><small>Prices include <abbr title="Goods and Services Tax">GST</abbr>.</small></p>
</article>

<time> gives the date a machine-readable form, <s> marks the old price as no longer accurate, <em> adds spoken stress, <abbr> explains GST, and <small> marks the fine print.

Quick Quiz

1. Which element marks the main content of a page?

<main> holds the content that is unique to the page; <body> also includes headers, menus and footers.

2. You need a box only to apply a background colour. Which element?

A wrapper with no meaning of its own should be the generic <div>.

3. Which element gives a group of radio buttons a shared caption?

<legend> captions a <fieldset>; <caption> is for tables.

4. Which element should an "Add to cart" action use?

Web Development

Programming Languages

Databases

Data Science & AI

Cloud & DevOps

Security & Systems

Office & Productivity

HTML Elements Reference