Skip to content

HTML A-Z Cheat Sheet

This HTML A-Z cheat sheet gives you a quick reference for important HTML tags, attributes, concepts, entities, forms, tables, media, semantic HTML, SEO, accessibility, and responsive web design. Use this page as a beginner-friendly revision guide while building web pages.

What Is an HTML A-Z Cheat Sheet?

An HTML A-Z cheat sheet is a quick reference guide that organizes important HTML topics alphabetically. It helps beginners remember common tags, attributes, page structure, SEO rules, accessibility practices, and real-world usage. 

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Cheat Sheet</title>
  </head>
  <body>
    <main>
      <h1>HTML A-Z Cheat Sheet</h1>
    </main>
  </body>
</html>

HTML A-Z Cheat Sheet Table

The following table explains important HTML terms from A to Z with examples and practical usage.

Letter HTML Topic Example Usage
A Anchor Links <a href="/about/">About</a> Creates links to pages, files, emails, phones, or sections.
B Body <body>Visible content</body> Contains all visible web page content.
C Class Attribute <div class="card"></div> Groups elements for CSS styling and JavaScript behavior.
D Doctype <!doctype html> Declares the document as modern HTML5.
E Entities &lt; &gt; &amp; Displays reserved characters safely in HTML.
F Forms <form action="/submit" method="post"></form> Collects user input such as login, contact, and signup data.
G Global Attributes id, class, title, lang, hidden Attributes that work on most HTML elements.
H Headings <h1>Main Title</h1> Creates content hierarchy from <h1> to <h6>.
I Images <img src="logo.png" alt="Logo" /> Displays images with accessibility-friendly alt text.
J JavaScript <script src="/app.js" defer></script> Adds behavior and interactivity to HTML pages.
K Keyboard Accessibility <button type="button">Menu</button> Ensures users can navigate and interact without a mouse.
L Lists <ul><li>HTML</li></ul> Organizes related items using ordered, unordered, or description lists.
M Meta Tags <meta name="description" content="HTML guide" /> Provides page metadata for SEO, browsers, and mobile devices.
N Navigation <nav><a href="/">Home</a></nav> Groups important site or page navigation links.
O Ordered List <ol><li>Step one</li></ol> Creates numbered steps or ranked items.
P Paragraph <p>This is paragraph text.</p> Creates readable text blocks.
Q Quotation <q>Short quote</q> Represents short inline quotations.
R Responsive Design <meta name="viewport" content="width=device-width, initial-scale=1.0" /> Makes pages mobile-friendly across screen sizes.
S Semantic HTML <main><article>Content</article></main> Uses meaningful tags for SEO, accessibility, and structure.
T Tables <table><tr><td>Data</td></tr></table> Displays structured data in rows and columns.
U Unordered List <ul><li>Item</li></ul> Creates bullet lists where order does not matter.
V Video <video controls><source src="video.mp4" /></video> Embeds video content directly in a page.
W Web Accessibility <label for="email">Email</label> Makes websites usable for more people and assistive technologies.
X XHTML-Style Syntax <img src="logo.png" alt="Logo" /> Uses self-closing style for void elements in cleaner markup.
Y YouTube Embed <iframe src="https://www.youtube.com/embed/VIDEO_ID"></iframe> Embeds YouTube videos using iframe.
Z Zero Layout Shift <img width="800" height="450" /> Reduces layout shift by reserving image space.

HTML Tags Quick Reference

Category Important Tags Purpose
Document <!doctype>, <html>, <head>, <body> Creates the base structure of an HTML document.
Text <h1> to <h6>, <p>, <span> Creates headings, paragraphs, and inline text wrappers.
Formatting <strong>, <em>, <mark>, <small> Adds meaning or visual emphasis to text.
Links and Media <a>, <img>, <audio>, <video>, <iframe> Creates links, images, audio, video, and embeds.
Lists <ul>, <ol>, <li>, <dl> Groups related items or descriptions.
Tables <table>, <tr>, <th>, <td>, <caption> Displays tabular data.
Forms <form>, <label>, <input>, <textarea>, <button> Collects user input.
Semantic <header>, <nav>, <main>, <section>, <article>, <footer> Defines meaningful page regions.

HTML Attributes Quick Reference

Attribute Used With Purpose
id Most elements Creates a unique identifier.
class Most elements Groups elements for CSS and JavaScript.
href <a>, <link> Defines link destination.
src <img>, <script>, <iframe> Defines source file path.
alt <img> Provides image alternative text.
name Form controls Identifies submitted form data.
type <input>, <button>, <script> Defines element behavior or input type.
title Most elements Adds extra tooltip information.
lang <html>, most elements Defines content language.
loading <img>, <iframe> Controls lazy loading.

Common HTML Entities

HTML entities are special character codes. They display reserved characters and symbols without breaking HTML structure.

Character Entity Usage
& &amp; Ampersand
< &lt; Less than
> &gt; Greater than
" &quot; Double quote
© &copy; Copyright symbol
® &reg; Registered trademark
™ &trade; Trademark symbol
€ &euro; Euro currency
• &bull; Bullet point
→ &rarr; Right arrow

HTML5 Form Input Types

HTML5 introduces many input types. Using the correct type improves user experience, validation, and mobile keyboard support.

Input Type Example Purpose
text <input type="text" /> Single-line text input.
email <input type="email" /> Email with validation.
password <input type="password" /> Hidden password input.
number <input type="number" min="1" max="100" /> Numeric input with spinner.
date <input type="date" /> Date picker.
time <input type="time" /> Time picker.
checkbox <input type="checkbox" /> Selectable option.
radio <input type="radio" /> Single choice from group.
range <input type="range" min="0" max="10" /> Slider input.
file <input type="file" /> File upload.
color <input type="color" /> Color picker.
search <input type="search" /> Search field.
tel <input type="tel" /> Phone number.
url <input type="url" /> URL with validation.
submit <input type="submit" value="Send" /> Submits form.
reset <input type="reset" /> Clears form fields.
hidden <input type="hidden" name="id" value="123" /> Hidden data.

HTML Meta Tags Examples

Meta tags provide page information for browsers, SEO, social media, and mobile devices. 

<head>
  <!-- Character encoding -->
  <meta charset="UTF-8" />

  <!-- Mobile responsiveness -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- SEO description -->
  <meta name="description" content="Learn HTML with examples and cheat sheets." />

  <!-- Search engines -->
  <meta name="robots" content="index, follow" />

  <!-- Open Graph (Social sharing) -->
  <meta property="og:title" content="HTML Cheat Sheet" />
  <meta property="og:description" content="Complete HTML reference guide." />
  <meta property="og:image" content="/images/html-og.png" />

  <!-- Browser theme color -->
  <meta name="theme-color" content="#0d6efd" />
</head>

HTML SEO Cheat Sheet

  • Use a unique <title> for every page.
  • Add a helpful meta description.
  • Use one clear <h1> for the main topic.
  • Use logical headings with <h2> and <h3>.
  • Use semantic HTML like <main>, <article>, and <section>.
  • Add descriptive alt text for important images.
  • Use descriptive internal links.
  • Make pages mobile-friendly with the viewport meta tag.
<head>
  <title>HTML A-Z Cheat Sheet for Beginners</title>
  <meta
    name="description"
    content="Complete HTML A-Z cheat sheet with tags, attributes, SEO, accessibility, and examples."
  />
</head>

HTML Accessibility Cheat Sheet

  • Use semantic HTML before adding ARIA.
  • Use visible labels for form fields.
  • Use real buttons for actions and real links for navigation.
  • Keep keyboard focus visible.
  • Use meaningful alt text for informative images.
  • Use empty alt="" for decorative images.
  • Add captions or transcripts for important media.
  • Add meaningful title attributes to iframes.
<label for="email">Email Address</label>
<input id="email" name="email" type="email" autocomplete="email" />

HTML, CSS, and JavaScript Cheat Sheet

Technology Role Example
HTML Structure and content <h1>Hello</h1>
CSS Design and layout h1 { color: blue; }
JavaScript Behavior and interaction button.addEventListener("click", handleClick); 
.card {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}

@media (min-width: 768px) {
  .card {
    grid-template-columns: 240px 1fr;
  }
}

HTML Best Practices Cheat Sheet

  • Use clean, valid, semantic HTML.
  • Keep HTML for structure, CSS for design, and JavaScript for behavior.
  • Use lowercase tag and attribute names.
  • Quote attribute values.
  • Avoid duplicate IDs.
  • Avoid obsolete tags like <font> and <center>.
  • Validate HTML before publishing.
  • Test pages on mobile, tablet, and desktop sizes.

Common HTML Mistakes to Avoid

  • Missing <!doctype html>.
  • Missing lang on the <html> element.
  • Skipping the viewport meta tag.
  • Using headings only for font size.
  • Using <div> for everything.
  • Forgetting image alt text.
  • Using vague link text like “click here”.
  • Using tables for page layout.
  • Using placeholder text as the only form label.
  • Publishing without testing keyboard navigation.

Key Takeaways

  • HTML is used to structure web page content.
  • An A-Z cheat sheet helps you quickly revise important HTML topics.
  • Use semantic tags for better SEO, accessibility, and maintainability.
  • Use attributes like id, class, href, src, and alt correctly.
  • Use responsive, accessible, and SEO-friendly HTML on every page.

Pro Tip

When revising HTML, remember this simple order: structure first, meaning second, accessibility third, SEO fourth, and visual design with CSS last.

You now have a complete HTML A-Z cheat sheet covering tags, attributes, SEO, accessibility, responsive design, forms, tables, media, and best practices.