🔍 Search the Cheat Sheet

Tip: Use Ctrl+F (Cmd+F on Mac) to search this entire page

📄 Document Structure

TagPurpose
<!DOCTYPE html>Declares HTML5 document
<html>Root element of the page
<head>Metadata container (not visible)
<body>Visible content container
<title>Browser tab title
<meta>Metadata (charset, viewport, etc.)
<link>Links external resources (CSS, favicon)
<script>Embeds JavaScript
<style>Internal CSS

📝 Text Formatting

TagPurpose
<h1> to <h6>Headings (h1 = most important)
<p>Paragraph
<br>Line break (within same paragraph)
<hr>Thematic break / horizontal line
<strong>Strong importance (bold)
<em>Emphasis (italic)
<mark>Highlighted/marked text
<small>Fine print / legal text
<del>Deleted text (strikethrough)
<ins>Inserted text (underline)
<sub>Subscript
<sup>Superscript
<blockquote>Long quotation
<q>Short inline quotation
<cite>Citation / title of work
<abbr>Abbreviation (use title attr)
<code>Inline code
<pre>Preformatted text (preserves spaces)

🔗 Links & Navigation

Tag / AttributePurpose
<a>Anchor / hyperlink
hrefLink destination URL
target="_blank"Open in new tab
rel="noopener noreferrer"Security for external links
downloadPrompt file download
titleTooltip text
<nav>Navigation block
URL Types:
Absolute: https://site.com/page
Relative: page.html or folder/page.html
Parent: ../page.html
Root: /page.html
Anchor: #section-id
Email: mailto:email@site.com

🖼️ Images & Media

Tag / AttributePurpose
<img>Image (self-closing)
srcImage source path/URL
altAlternative text (required for accessibility)
width / heightDimensions in pixels
loading="lazy"Defer loading until visible
<figure>Self-contained content
<figcaption>Caption for figure
<video>Video player
controlsShow play/pause buttons
autoplayAuto-play (often blocked)
loopRepeat video
mutedStart muted
posterThumbnail image
<audio>Audio player
<source>Media source (inside video/audio)

📋 Lists

Tag / AttributePurpose
<ul>Unordered list (bullets)
<ol>Ordered list (numbers)
start="n"Start numbering from n
reversedReverse numbering
type="A/a/I/i/1"Numbering style
<li>List item
<dl>Definition list
<dt>Definition term
<dd>Definition description

📊 Tables

Tag / AttributePurpose
<table>Table container
<caption>Table title
<thead>Header rows group
<tbody>Body rows group
<tfoot>Footer rows group
<tr>Table row
<th>Header cell
scope="col/row"Header direction (accessibility)
<td>Data cell
colspan="n"Span across n columns
rowspan="n"Span across n rows

📝 Forms & Input

Tag / AttributePurpose
<form>Form container
actionURL to send data
method="GET/POST"HTTP method
<input>Input field (self-closing)
type="text"Single-line text
type="email"Email with validation
type="password"Hidden characters
type="tel"Telephone number
type="number"Numeric input
type="date"Date picker
type="time"Time picker
type="checkbox"Multiple selections
type="radio"Single selection (grouped by name)
type="file"File upload
type="hidden"Invisible data field
type="submit"Submit button
type="reset"Reset button
<label>Label for input (use for + id)
<textarea>Multi-line text input
<select>Dropdown menu
<option>Option in select
<fieldset>Group related fields
<legend>Caption for fieldset
<button>Clickable button
Validation Attributes:
required — Must be filled
minlength="n" — Minimum characters
maxlength="n" — Maximum characters
min="n" / max="n" — Number range
pattern="regex" — Regex pattern
placeholder="text" — Hint text
disabled — Non-editable
readonly — Read-only

🏗️ Semantic HTML5

TagPurpose
<header>Introductory content / site header
<nav>Major navigation links
<main>Main content (one per page)
<article>Self-contained content (blog post, card)
<section>Thematic grouping (with heading)
<aside>Tangential content (sidebar)
<footer>Footer for section or page
<address>Contact information
<time>Date/time (use datetime attr)
<details>Disclosure widget (expandable)
<summary>Summary for details
<mark>Highlighted text

🔍 Meta Tags & SEO

Tag / AttributePurpose
<meta charset="UTF-8">Character encoding
<meta name="viewport">Mobile responsiveness
<meta name="description">Search result description
<meta name="keywords">Keywords (less important now)
<meta name="author">Page author
<meta name="robots">Search engine instructions
<link rel="canonical">Preferred URL (prevents duplicates)
<link rel="icon">Favicon
Open Graph (Facebook/LinkedIn):
og:title, og:description, og:image, og:url, og:type

Twitter Cards:
twitter:card, twitter:title, twitter:description, twitter:image

© HTML Entities

CharacterEntityDescription
<&lt;Less than
>&gt;Greater than
&&amp;Ampersand
"&quot;Double quote
'&apos;Single quote
&nbsp;Non-breaking space
©&copy;Copyright
®&reg;Registered
™&trade;Trademark
€&euro;Euro
£&pound;Pound
×&times;Multiply
÷&divide;Divide
—&mdash;Em dash
–&ndash;En dash

🌍 Global Attributes

AttributePurpose
classCSS class name(s)
idUnique identifier (one per page)
styleInline CSS (avoid when possible)
titleTooltip text
langLanguage code (e.g., "en", "am")
dirText direction (ltr/rtl/auto)
hiddenHide element from display
data-*Custom data attributes
tabindexTab navigation order
contenteditableMake element editable

⚡ Quick Start Template

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Page description for SEO"> <title>Page Title | Site Name</title> <link rel="stylesheet" href="style.css"> <link rel="icon" href="favicon.ico"> </head> <body> <header> <nav>...</nav> </header> <main> <h1>Main Title</h1> <section>...</section> </main> <footer>...</footer> </body> </html>

📖 Keyboard Shortcuts

ActionWindows/LinuxMac
Save fileCtrl + SCmd + S
Find in pageCtrl + FCmd + F
UndoCtrl + ZCmd + Z
RedoCtrl + Y / Ctrl + Shift + ZCmd + Shift + Z
Comment/uncomment lineCtrl + /Cmd + /
Duplicate lineShift + Alt + ↓Shift + Option + ↓
Move line up/downAlt + ↑/↓Option + ↑/↓
Format documentShift + Alt + FShift + Option + F
Open DevToolsF12 / Ctrl + Shift + ICmd + Option + I
Inspect elementCtrl + Shift + CCmd + Shift + C

🔗 Useful Resources