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
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
Posted inCheatSheet

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.

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

TagPurposeExample
<!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>&copy; 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

AttributePurposeExample
idUnique identifier<div id="header">
classReusable styling/JS hook<p class="lead">
hrefLink URL<a href="/about">About</a>
srcSource for media<img src="logo.png">
altImage alternative text<img alt="logo">
titleAdvisory tooltip<span title="info">i</span>
targetOpen link in new tab/window<a target="_blank" rel="noopener">
relRelationship for link (SEO/security)<a rel="nofollow"> or <link rel="stylesheet">
typeInput/button type or MIME<input type="email">
nameForm field name<input name="email">
placeholderIn-field hint text<input placeholder="Enter email">
requiredHTML5 validation<input required>
disabledDisable element<button disabled>
aria-*Accessibility attributesrole, 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

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

ElementCommon AttributesUse
<a>href, target, rel, titleLinks
<img>src, alt, width, height, loadingImages
<form>action, method, enctypeSubmit data
<input>type, name, value, placeholder, requiredForm controls
<button>type, disabled, aria-*Click actions
<script>src, async, deferJavaScript
<link>rel, hrefStylesheets, preconnect
<meta>charset, name, contentMetadata

Related Internal Resources

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.

Tags:
0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments