HTML tags cheat sheet

HTML has over a hundred elements, but a working developer uses about forty of them every week. This cheat sheet groups those by what they are for, with the attributes that matter and a note on when to choose which. Use it as a quick lookup; the free HTML course explains each idea with a live editor. You can try any snippet safely in the HTML Viewer.

Document skeleton

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page title</title>
  <meta name="description" content="A summary for search results.">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- visible content -->
  <script src="app.js" defer></script>
</body>
</html>

Tag	Purpose
<!DOCTYPE html>	Standards mode (not a tag, a declaration)
<html lang="en">	Root element; lang helps screen readers and search
<head>	Information about the page; not displayed
<title>	Tab title and search result headline
<meta>	Metadata: charset, viewport, description, robots
<link>	Stylesheets (rel="stylesheet"), icons, canonical URL
<style>	Internal CSS
<script>	JavaScript; use defer for external scripts
<body>	Everything shown on the page

Page structure (semantic layout)

Tag	Use it for
<header>	Introductory content of the page or a section (logo, title)
<nav>	A block of navigation links
<main>	The main content; one per page
<section>	A thematic group, normally with a heading
<article>	Self-contained content (post, comment, product card)
<aside>	Related side content (sidebar, pull quote)
<footer>	Footer of the page or a section
<div>	Generic block container, when nothing semantic fits
<span>	Generic inline container
<figure> / <figcaption>	An illustration with its caption
<details> / <summary>	A show/hide disclosure widget

These landmarks let screen-reader users jump between parts of a page and help search engines understand it. Prefer them to a pile of <div>s.

Text

Tag	Meaning
<h1> to <h6>	Headings; one <h1>, no skipped levels
<p>	Paragraph
<br>	Line break inside text (not for spacing)
<hr>	Thematic break between sections
<strong>	Strong importance (usually bold)
<em>	Stress emphasis (usually italic)
<b>, <i>	Bold/italic style without extra meaning (alternate voice, terms)
<mark>	Highlighted relevant text
<small>	Small print, side comments
<sub>, <sup>	Subscript, superscript
<del>, <ins>	Removed and inserted text
<code>	Inline code
<pre>	Preformatted text, keeps spaces and line breaks
<kbd>, <samp>, <var>	Keyboard input, sample output, variable
<blockquote>	Long quotation (cite attribute for the source)
<q>	Short inline quotation
<abbr title="...">	Abbreviation with its expansion
<time datetime="2026-10-24">	A date/time in machine-readable form
<address>	Contact information for the page or article

Links

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Example</a>
<a href="#contact">Jump to contact</a>
<a href="mailto:hello@example.com">Email us</a>
<a href="tel:+911234567890">Call us</a>
<a href="report.pdf" download>Download</a>

Attribute	Meaning
href	Destination: absolute URL, relative path, #id, mailto:, tel:
target="_blank"	Opens a new tab (add rel="noopener")
rel	Relationship: nofollow, noopener, noreferrer, sponsored, ugc
download	Downloads instead of navigating

Link text should describe the destination ("Download the 2026 price list"), not "click here". Encode special characters in addresses with the URL Encoder.

Lists

Tag	Purpose
<ul>	Unordered (bulleted) list
<ol>	Ordered list; attributes start, reversed, type
<li>	A list item (inside ul/ol)
<dl> / <dt> / <dd>	Description list: term and description

Navigation menus are lists of links: <nav><ul><li><a>.

Images and media

<img src="loaf.jpg" alt="Sliced sourdough loaf" width="800" height="600" loading="lazy">

<picture>
  <source srcset="loaf.avif" type="image/avif">
  <source srcset="loaf.webp" type="image/webp">
  <img src="loaf.jpg" alt="Sliced sourdough loaf">
</picture>

<video controls width="640" poster="cover.jpg"><source src="clip.mp4" type="video/mp4"></video>
<audio controls src="song.mp3"></audio>
<iframe src="https://example.com/embed" title="Map" loading="lazy"></iframe>

Tag / attribute	Notes
<img src alt>	alt is required; use alt="" for decoration
width, height	Reserve space, preventing layout shift
srcset, sizes	Let the browser pick the best file for the screen
loading="lazy"	Defer off-screen images (not the top one)
<picture> / <source>	Different formats or crops for different conditions
<video>, <audio>	controls, autoplay (usually muted), loop, preload
<track>	Captions/subtitles for media
<iframe>	Embeds another page; always add a title
<svg>	Inline vector graphics
<canvas>	Scriptable bitmap drawing surface

Shrink images before upload with the Image Compressor.

Tables

<table>
  <caption>Opening hours</caption>
  <thead><tr><th scope="col">Day</th><th scope="col">Hours</th></tr></thead>
  <tbody>
    <tr><th scope="row">Mon–Fri</th><td>7am–6pm</td></tr>
    <tr><th scope="row">Sat</th><td>8am–2pm</td></tr>
  </tbody>
</table>

Tag	Purpose
<table>	The table
<caption>	Title of the table
<thead>, <tbody>, <tfoot>	Header, body and footer groups
<tr>	A row
<th scope>	Header cell (col or row)
<td>	Data cell; colspan and rowspan merge cells

Use tables for data only, never for page layout.

Forms

<form action="/subscribe" method="post">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" required autocomplete="name">

  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>

  <label for="topic">Topic</label>
  <select id="topic" name="topic"><option value="">Choose…</option><option>HTML</option></select>

  <label for="msg">Message</label>
  <textarea id="msg" name="msg" rows="4"></textarea>

  <fieldset><legend>Plan</legend>
    <label><input type="radio" name="plan" value="free" checked> Free</label>
    <label><input type="radio" name="plan" value="pro"> Pro</label>
  </fieldset>

  <button type="submit">Send</button>
</form>

Tag	Purpose
<form>	Container; action, method (get/post), enctype for uploads
<label for>	Names a control; connect with for/id or wrap the input
<input type>	text, email, password, number, tel, url, search, date, time, color, range, checkbox, radio, file, hidden, submit
<textarea>	Multi-line text
<select> / <option> / <optgroup>	Drop-down list
<button>	Button; type="submit", "button" or "reset"
<fieldset> / <legend>	Groups related controls with a caption
<datalist>	Suggestions for an input
<output>, <progress>, <meter>	Result, task progress, gauge

Useful attributes: name (required to submit), value, placeholder, required, disabled, readonly, min, max, step, minlength, maxlength, pattern, autocomplete, autofocus, multiple. Browser validation is a convenience; always validate again on the server, as the PHP course shows.

Global attributes (work on every element)

Attribute	Use
id	Unique identifier (links, labels, scripts, CSS)
class	One or more class names for styling
style	Inline CSS (avoid)
title	Advisory text (tooltip; not reliable for accessibility)
hidden	Hides the element
lang, dir	Language and text direction
tabindex	Keyboard focus order (0 or -1; avoid positive numbers)
data-*	Custom data for scripts
aria-*, role	Accessibility hints when no native element fits
contenteditable	Makes content editable

Entities for special characters

Write	Shows
&lt; &gt;	< >
&amp;	&
&quot;	"
&nbsp;	non-breaking space
&copy; &reg; &trade;	© ® ™

Block or inline?

Block elements start on a new line: div, p, h1–h6, ul, ol, li, table, form, section, article, header, footer, nav, main. Inline elements flow in text: span, a, strong, em, code, img, button, input, label. CSS display can change either.

Quick rules

1. One <h1> and one <main> per page.
2. Every image has alt; every input has a <label>.
3. Use the element that means what you want (<button> for actions, <a> for navigation).
4. Do not use headings for size or tables for layout.
5. Close and nest tags properly; validate with a checker.
6. Add lang, a title and a viewport tag to every page.

Keep going

Test yourself with the HTML interview questions, follow the 30-day HTML and CSS plan, and prepare for the course exam with HTML certificate: how the final exam works. When the markup is done, style it with the Flexbox and Grid cheat sheets.