🌐 Cheatsheet

HTML5 Cheatsheet

Version 5.0 · Quick reference for developers
🔍

🏗️Document Structure
<!DOCTYPE html>HTML5 document declaration
<html lang='en'>Root element with language
<head>...</head>Metadata container
<meta charset='UTF-8'>Character encoding
<meta name='viewport'>Responsive viewport tag
<title>Browser tab title
<body>Visible page content
📝Text & Headings
<h1> – <h6>Headings (1=largest)
<p>Paragraph
<strong>Bold (semantic importance)
<em>Italic (emphasis)
<small>Fine print / secondary text
<mark>Highlighted text
<del> / <ins>Deleted / inserted text
<abbr title='...'>Abbreviation with tooltip
<code>Inline code snippet
<pre>Preformatted block
<blockquote>Long quotation
<cite>Reference/citation
🔗Links & Media
<a href='url'>Hyperlink
target='_blank'Open in new tab
rel='noopener noreferrer'Security for _blank links
<img src='' alt=''>Image (always use alt!)
<picture>Responsive image container
<source srcset=''>Multiple image sources
<video controls>Video player
<audio controls>Audio player
<iframe src=''>Embed external content
loading='lazy'Lazy-load images/iframes
📋Lists
<ul>Unordered (bullet) list
<ol>Ordered (numbered) list
<li>List item
<dl> / <dt> / <dd>Description list / term / detail
start='5'Start ordered list at 5
reversedReverse order numbering
type='A'Alphabetical list type
📝Forms
<form action='' method=''>Form container
<input type='text'>Text input
<input type='email'>Email input (validates)
<input type='password'>Password field
<input type='checkbox'>Checkbox
<input type='radio'>Radio button
<input type='file'>File upload
<textarea>Multi-line text
<select> / <option>Dropdown select
<button type='submit'>Submit button
required / disabledValidation attributes
placeholder='...'Input hint text
autocomplete='off'Disable autocomplete
🧱Semantic HTML5
<header>Page/section header
<nav>Navigation links
<main>Primary content (once per page)
<article>Self-contained content
<section>Thematic grouping
<aside>Sidebar / supplementary
<footer>Page/section footer
<figure> / <figcaption>Image with caption
<details> / <summary>Expandable disclosure
<dialog>Modal dialog element
<template>Inert content template
<slot>Web component slot
📊Tables
<table>Table container
<thead> / <tbody> / <tfoot>Table sections
<tr>Table row
<th scope='col'>Header cell (accessible)
<td>Data cell
colspan / rowspanMerge cells
<caption>Table caption/title
🔍Meta & SEO Tags
<meta name='description'>Page description (SEO)
<meta name='robots'>Crawler instructions
<link rel='canonical'>Canonical URL
og:title / og:imageOpen Graph meta tags
twitter:cardTwitter card type
<link rel='icon'>Favicon link
<link rel='preconnect'>Preconnect to domain
<script defer>Load JS after parsing
<script type='module'>ES module script

About This Cheatsheet

HTML5 is the latest version of the HyperText Markup Language. This cheatsheet covers the most commonly used tags, semantic elements, form controls, media elements, and meta tags for SEO and social sharing. Use the search box to filter by keyword, or download as PDF for offline reference.