HTML tags are the building blocks of every web page. This cheat sheet groups the most common HTML elements by purpose — document structure, semantic layout, text content, forms, media, and tables — so you can find the right tag and use it correctly.
Each row shows the element and a short note on what it does. Using semantic tags (like header, nav, main, and article) instead of generic divs improves accessibility and SEO. Need to tidy up markup? Try the <a href="/tools/html-formatter">HTML Formatter</a>.
Document Structure
| Tag | What it does |
|---|
<!DOCTYPE html> | Declares the document as HTML5. |
<html> | Root element that wraps the whole page. |
<head> | Holds metadata, title, and links to CSS/scripts. |
<body> | Holds all visible page content. |
<meta> | Metadata such as charset, viewport, and description. |
<title> | The page title shown in the browser tab and search results. |
<link> | Links external resources, most often a stylesheet. |
<script> | Embeds or links JavaScript. |
Semantic Layout
| Tag | What it does |
|---|
<header> | Introductory content or navigation for a section. |
<nav> | A block of navigation links. |
<main> | The main, unique content of the page. |
<section> | A thematic grouping of content. |
<article> | Self-contained content that could stand alone. |
<aside> | Content tangential to the main content, like a sidebar. |
<footer> | Footer for a section or the page. |
Text Content
| Tag | What it does |
|---|
<h1>–<h6> | Section headings, h1 being the most important. |
<p> | A paragraph of text. |
<a href> | A hyperlink to another page or resource. |
<strong> / <em> | Strong importance (bold) / emphasis (italic). |
<ul> / <ol> / <li> | Unordered list, ordered list, and list items. |
<blockquote> | A quoted section from another source. |
<code> / <pre> | Inline code / preformatted block that preserves whitespace. |
<br> / <hr> | Line break / thematic horizontal divider. |
Forms
| Tag | What it does |
|---|
<form> | A container for interactive form controls. |
<input> | A single-line field; type sets its behavior (text, email, checkbox…). |
<label> | A caption tied to a form control for accessibility. |
<textarea> | A multi-line text field. |
<select> / <option> | A dropdown menu and its choices. |
<button> | A clickable button. |
Media
| Tag | What it does |
|---|
<img src alt> | An image; alt provides accessible text. |
<picture> | Serves different image sources for different conditions. |
<video> / <audio> | Embeds video / audio with playback controls. |
<source> | A media source inside picture, video, or audio. |
<iframe> | Embeds another HTML page inside the current one. |
Tables
| Tag | What it does |
|---|
<table> | A table container. |
<thead> / <tbody> / <tfoot> | Groups the header, body, and footer rows. |
<tr> | A table row. |
<th> / <td> | A header cell / a data cell. |
HTML Tags Cheat Sheet FAQs
What is semantic HTML and why does it matter?
Semantic HTML uses tags that describe their meaning — <header>, <nav>, <main>, <article>, <footer> — instead of generic <div>s. It helps screen readers, improves SEO, and makes your markup easier to read and maintain.
What is the difference between a section and a div?
<section> is a semantic element for a thematic grouping of content, usually with its own heading. <div> carries no meaning and is used purely for styling or grouping. Prefer a semantic element when one fits the content.
What is the difference between strong and b (or em and i)?
<strong> and <em> convey importance and emphasis, which assistive tech announces. <b> and <i> only change appearance with no added meaning. Use strong/em when the emphasis is meaningful.
Why is the alt attribute important on images?
The alt attribute describes an image for screen-reader users and is shown if the image fails to load. It also helps search engines understand the image. Every meaningful <img> should have a descriptive alt.
How do I link a label to a form input?
Give the input an id and point the label's for attribute at it, e.g. <label for="email"> with <input id="email">. This lets users click the label to focus the field and improves accessibility.
What is the difference between an ordered and unordered list?
<ol> creates an ordered (numbered) list where sequence matters, while <ul> creates an unordered (bulleted) list. Both hold <li> list items.
What does the head element contain?
The <head> holds metadata that is not displayed on the page: the <title>, <meta> tags (charset, viewport, description), and links to stylesheets and scripts. The visible content goes in <body>.
