HTML Cheat Sheet
Last updated
Document structure
Every HTML page starts with this skeleton.
| Element | What it does |
|---|---|
<!DOCTYPE html> | Declares the document as HTML5 (first line) |
<html lang="en"> | Root element; lang sets the language |
<head> | Metadata: title, links, scripts - not shown on the page |
<meta charset="UTF-8"> | Character encoding (always include) |
<meta name="viewport" content="width=device-width, initial-scale=1"> | Responsive scaling on mobile |
<title> | Page title shown in the browser tab and search results |
<body> | Everything visible on the page goes here |
Text & headings
| Element | What it does |
|---|---|
<h1> … <h6> | Headings, <h1> most important (one per page) |
<p> | Paragraph of text |
<br> | Line break (no closing tag) |
<hr> | Thematic break / horizontal rule |
<strong> | Important text (bold) |
<em> | Emphasized text (italic) |
<span> | Inline container for styling a slice of text |
<code> | Inline code |
<pre> | Preformatted text (keeps whitespace) |
<blockquote> | Quoted block of text |
Links & images
| Element | Syntax |
|---|---|
| Link | <a href="https://coddy.tech">Coddy</a> |
| Open in new tab | <a href="..." target="_blank" rel="noopener"> |
| Anchor (jump to id) | <a href="#section">Jump</a> |
| Image | <img src="cat.png" alt="A cat" width="200"> |
| Responsive image | <img src="..." srcset="..." sizes="..."> |
| Figure with caption | <figure><img ...><figcaption>…</figcaption></figure> |
Lists
| Element | What it does |
|---|---|
<ul> | Unordered (bulleted) list |
<ol> | Ordered (numbered) list |
<li> | List item (inside <ul> or <ol>) |
<dl> | Description list |
<dt> / <dd> | Description term / description detail |
Tables
| Element | What it does |
|---|---|
<table> | Table container |
<thead> / <tbody> / <tfoot> | Table head, body, and footer groups |
<tr> | Table row |
<th> | Header cell (bold, centered) |
<td> | Data cell |
colspan / rowspan | Merge cells across columns / rows |
Forms & inputs
The building blocks of any form that collects input.
| Element | Syntax / purpose |
|---|---|
| Form | <form action="/submit" method="post"> |
| Text input | <input type="text" name="q" placeholder="Search"> |
| Email / password | <input type="email">, <input type="password"> |
| Checkbox / radio | <input type="checkbox">, <input type="radio"> |
| Number / date | <input type="number">, <input type="date"> |
| Label | <label for="q">Search</label> |
| Multi-line | <textarea rows="4"></textarea> |
| Dropdown | <select><option>One</option></select> |
| Button | <button type="submit">Send</button> |
| Required field | <input required> |
Semantic & layout tags
Use these instead of generic <div>s so browsers, screen readers, and search engines understand your page.
| Element | What it marks up |
|---|---|
<header> | Top of a page or section (logo, nav) |
<nav> | Navigation links |
<main> | The dominant content (one per page) |
<section> | A thematic grouping of content |
<article> | Self-contained content (post, card) |
<aside> | Sidebar / tangential content |
<footer> | Bottom of a page or section |
<div> | Generic block container (no meaning) |
Common global attributes
| Attribute | What it does |
|---|---|
id | Unique identifier for an element |
class | One or more class names (for CSS / JS) |
style | Inline CSS (use sparingly) |
title | Tooltip text on hover |
data-* | Custom data attribute, e.g. data-id="42" |
hidden | Hides the element |
Every HTML tag and attribute you reach for, grouped by what it does. This HTML cheat sheet covers the page skeleton, text and links, images and media, lists, tables, forms, and the semantic tags that give your markup meaning.
All of it is standard HTML5 and works in every modern browser. Copy a tag, or open the HTML playground to edit it with a live preview - no setup needed.
HTML cheat sheet FAQ
Is this HTML cheat sheet free?
Yes. This HTML cheat sheet is free to use with no sign-up. Bookmark it and come back whenever you need to look up a tag or attribute.
What is the difference between <section> and <div>?
<section> is a semantic tag - it tells browsers and screen readers that its contents are a meaningful, thematic group, and it usually has a heading. <div> carries no meaning and is just a generic container for styling or scripting. Reach for a semantic tag (<section>, <article>, <nav>) when one fits, and fall back to <div> only when none does.Do all HTML tags need a closing tag?
Most do (
<p>...</p>), but a few "void" elements don't because they can't contain anything: <img>, <br>, <hr>, <input>, <meta>, and <link>. In HTML5 you can write them with or without a trailing slash.Can I practice HTML online?
Yes. Open the HTML playground to write HTML in your browser with a live preview - no install needed. When you want structure, Coddy's free interactive HTML course teaches tags, forms, and layout step by step.
Is this cheat sheet good for beginners?
Yes. It starts with the page skeleton and the everyday tags you'll use first, then moves to forms and semantic markup, so you can use the top sections on day one.
Related resources
More cheat sheets
