HTML Cheat Sheet — Reference Guide to HTML Tags, Attributes, and Examples

HTML cheat sheet, HTML tags reference, HTML attributes list, HTML examples for beginners, semantic HTML guide, HTML forms tutorial, HTML accessibility checklist, HTML quick reference
This HTML Cheat Sheet is a compact, practical reference for writing and understanding HTML quickly. It covers essential tags, attributes, semantic elements, forms, multimedia, and accessibility — with short examples so you can copy and paste while building pages or learning HTML.

Table of Contents:

HTML Basics: Document Structure and Doctype

Use this minimal document skeleton to start every HTML page.

<!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="Short page description for SEO" />
</head>
<body>
  <!-- Page content goes here -->
</body>
</html>

Core HTML Tags Reference — quick table

Tag	Purpose	Example
`<!DOCTYPE html>`	Declares HTML5 document	`<!DOCTYPE html>`
`<html>`	Root element; `lang` attribute recommended	`<html lang="en">`
`<head>`	Metadata container	`<meta>`, `<title>`, `<link>`
`<meta charset>`	Character encoding	`<meta charset="utf-8">`
`<title>`	Document title (browser tab)	`<title>My Site</title>`
`<link rel="stylesheet">`	External CSS	`<link rel="stylesheet" href="styles.css">`
`<script>`	Inline or external JS	`<script src="app.js"></script>`
`<header>`	Page or section header (semantic)	`<header><h1>Site</h1></header>`
`<nav>`	Navigation links	`<nav><a href="/">Home</a></nav>`
`<main>`	Main document content	`<main>...</main>`
`<section>`	Thematic grouping	`<section id="about">...</section>`
`<article>`	Self-contained content	`<article>Blog post</article>`
`<aside>`	Sidebar content	`<aside>Related links</aside>`
`<footer>`	Footer content	`<footer>© 2025</footer>`
`<h1>`–`<h6>`	Headings (H1 highest)	`<h2>Subheading</h2>`
`<p>`	Paragraph	`<p>Text</p>`
`<a href="">`	Anchor (link)	`<a href="https://">Link</a>`
`<img src alt>`	Image, include `alt`	`<img src="img.jpg" alt="desc">`
`<ul>`, `<ol>`, `<li>`	Lists	`<ul><li>Item</li></ul>`
`<table>`, `<tr>`, `<td>`, `<th>`	Tabular data	`<table>...</table>`
`<form>`, `<input>`, `<label>`	Forms and inputs	`<form action="/submit">...</form>`
`<button>`	Clickable button	`<button type="submit">Send</button>`
`<video>`, `<audio>`	Multimedia players	`<video controls src="video.mp4"></video>`
`<iframe>`	Embedded content	`<iframe src="..."></iframe>`
`<strong>`, `<em>`	Semantic emphasis	`<strong>Important</strong>`
`<code>`, `<pre>`	Code snippets / preformatted	`<pre><code>...</code></pre>`

Semantic HTML Best Practices for SEO and Accessibility

Use one <h1> per page for the main topic; use <h2>–<h6> hierarchically for sections.
Prefer semantic containers (<main>, <article>, <section>, <nav>, <aside>) instead of generic <div> where meaningful.
Always include descriptive alt text on images for screen readers and SEO.
Add title attributes sparingly — they aren’t a replacement for accessible content.
Use <label for="id"> linked to form inputs to improve usability and screen-reader experience.

Common HTML Attributes You’ll Use Frequently

Attribute	Purpose	Example
`id`	Unique identifier	`<div id="header">`
`class`	Reusable styling/JS hook	`<p class="lead">`
`href`	Link URL	`<a href="/about">About</a>`
`src`	Source for media	`<img src="logo.png">`
`alt`	Image alternative text	`<img alt="logo">`
`title`	Advisory tooltip	`<span title="info">i</span>`
`target`	Open link in new tab/window	`<a target="_blank" rel="noopener">`
`rel`	Relationship for link (SEO/security)	`<a rel="nofollow">` or `<link rel="stylesheet">`
`type`	Input/button type or MIME	`<input type="email">`
`name`	Form field name	`<input name="email">`
`placeholder`	In-field hint text	`<input placeholder="Enter email">`
`required`	HTML5 validation	`<input required>`
`disabled`	Disable element	`<button disabled>`
`aria-*`	Accessibility attributes	`role`, `aria-label`, `aria-hidden`

Headings and Document Outline — SEO-friendly Structure

H1 — page title (one only)
H2 — main sections (multiple allowed)
H3 — subsections of H2
H4/H5/H6 — deep subsections when needed

Example outline:

<h1>HTML Cheat Sheet</h1>
<h2>Core Tags</h2>
<h3>Headings and Text</h3>
<h3>Media and Images</h3>
<h2>Forms</h2>
<h3>Input Types</h3>

Forms Quick Reference and Examples

Basic contact form with server-side friendly markup and accessibility:

<form action="/contact" method="post" novalidate>
  <label for="name">Full name</label>
  <input id="name" name="name" type="text" required>

  <label for="email">Email address</label>
  <input id="email" name="email" type="email" placeholder="you@example.com" required>

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="5" required></textarea>

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

Useful input type values: text, email, tel, number, url, password, search, date, time, file, checkbox, radio, range, hidden.

HTML Forms: Client-side vs Server-side Validation

Use HTML attributes (required, type="email", min, max, pattern) for basic client-side validation.
Always validate and sanitize on the server (never trust client input). See our form handling tutorials: PHP Form Handling Tutorial and PHP Form Validation Tutorial.

Multimedia Elements — Images, Audio, Video, and Embeds

Images

<img src="/images/team.jpg" alt="Team working together" width="800" height="450" loading="lazy">

Use loading="lazy" for performance on below-the-fold images.

Video

<video controls width="640" poster="thumb.jpg">
  <source src="video.mp4" type="video/mp4">
  <track kind="captions" src="captions_en.vtt" srclang="en" label="English">
  Your browser does not support the video tag.
</video>

Audio

<audio controls>
  <source src="podcast.mp3" type="audio/mpeg">
  Your browser does not support audio.
</audio>

Embeds / Iframe

Use title, sandboxing, and loading="lazy" for safer embedding:

<iframe src="https://www.example.com" title="Example embed" loading="lazy" sandbox></iframe>

Accessibility (A11y) Checklist — make pages usable for everyone

Provide textual alternatives (alt) for images.
Use semantic HTML (headings, lists, tables) not just CSS.
Ensure focusable elements are visible and keyboard-accessible.
Use ARIA only when native HTML semantics are insufficient.
Ensure color contrast meets WCAG guidelines.
Provide captions/transcripts for audio/video content.

HTML Tables — structure and best practices

<table>
  <caption>Quarterly revenue</caption>
  <thead>
    <tr><th>Quarter</th><th>Revenue</th></tr>
  </thead>
  <tbody>
    <tr><td>Q1</td><td>$12,000</td></tr>
    <tr><td>Q2</td><td>$15,000</td></tr>
  </tbody>
  <tfoot>
    <tr><td>Total</td><td>$27,000</td></tr>
  </tfoot>
</table>

Use <caption> and <th scope="col"> for accessible tabular data.

Microdata, Meta Tags, and SEO Tips

Use descriptive <title> and <meta name="description">.
Use Open Graph tags for social sharing:

<meta property="og:title" content="Article Title">
<meta property="og:description" content="Short summary">
<meta property="og:image" content="https://example.com/og.jpg">

Use structured data (JSON-LD) to mark up articles, products, FAQs for rich results.

Progressive Enhancement and Responsive HTML

Build content with semantic HTML first.
Layer CSS for presentation and JavaScript for enhanced interactions.
Use responsive design (meta viewport, fluid layouts, media queries) to support all devices.

<meta name="viewport" content="width=device-width, initial-scale=1">

Common HTML Snippets and Utilities

Responsive image with `srcset`

<img src="img-small.jpg" 
     srcset="img-small.jpg 480w, img-medium.jpg 768w, img-large.jpg 1200w"
     sizes="(max-width: 600px) 480px, (max-width: 1200px) 768px, 1200px"
     alt="Scenic view">

Accessible button that looks like a link

<button type="button" class="link-style" onclick="location.href='/learn'">Learn more</button>

Skip link for keyboard users

<a href="#maincontent" class="skip-link">Skip to content</a>
...
<main id="maincontent">...</main>

HTML Security Tips

Escape user-generated content before inserting into the DOM to prevent XSS.
Use rel="noopener noreferrer" on links with target="_blank".
Avoid inline JavaScript where possible; keep JS in external files.
Validate type="file" uploads server-side and restrict allowed MIME types.

HTML cheat sheet, HTML tags reference, HTML attributes list, HTML examples for beginners, semantic HTML guide, HTML forms tutorial, HTML accessibility checklist, HTML quick reference

Quick Cheatsheet Table — Most Used Tags & Attributes

Element	Common Attributes	Use
`<a>`	`href`, `target`, `rel`, `title`	Links
`<img>`	`src`, `alt`, `width`, `height`, `loading`	Images
`<form>`	`action`, `method`, `enctype`	Submit data
`<input>`	`type`, `name`, `value`, `placeholder`, `required`	Form controls
`<button>`	`type`, `disabled`, `aria-*`	Click actions
`<script>`	`src`, `async`, `defer`	JavaScript
`<link>`	`rel`, `href`	Stylesheets, preconnect
`<meta>`	`charset`, `name`, `content`	Metadata

Related Internal Resources

HTML Basics Tutorial — beginner-friendly walkthrough
Online HTML Edito r — code and preview live
PHP HTML Integration — mix PHP and HTML effectively
Accessibility Checklist for Web Developers

Frequently Asked Questions (FAQ)

Q1. What is the difference between block and inline elements?

Answer: Block elements (like <div>, <p>, <h1>) create line breaks and occupy full width; inline elements (like <span>, <a>, <img>) do not start on a new line and occupy only necessary width.

Q2. How many `<h1>` tags should I use?

Answer: Use a single <h1> per page for the primary topic; use <h2>–<h6> for subheadings to maintain a clear document structure.

Q3. How do I make my site mobile-friendly?

Answer: Use meta viewport, responsive CSS (flexbox/grid), relative units (%, rem), and media queries. Test on multiple viewport sizes.

Q4. Why are `alt` attributes important for images?

Answer: alt provides accessible descriptions for screen readers and displays when images fail to load; it also helps SEO.

Q5. Is it OK to use `<div>` for everything?

Answer: While possible, prefer semantic elements for better accessibility and SEO. Use <div> only when no semantic tag fits.