ADVERT

🧱 HTML Cheatsheet

Semantic HTML reference covering document structure, text elements, media, forms, and SEO-ready metadata.

Semantic HTML patterns, forms, and metadata reminders you can scan in seconds. Improve accessibility, SEO, and rendering performance with clean markup.

Document Structure

Scaffold every page with semantic layout elements.

Tag	Purpose	Notes
`<!DOCTYPE html>`	HTML5 doctype	Always start your documents with the modern doctype.
`<html lang="en">`	Root element	Set lang for accessibility and SEO.
`<head>`	Metadata container	Includes title, meta tags, links, and preload hints.
`<body>`	Visible document content	All interactive markup lives here.
`<main>`	Primary page content	Use once per page for better screen reader navigation.
`<header>`	Introductory content	Great for navbars or hero sections.

Text & Semantics

Typography-friendly components for readable documents.

Headings

Use <h1>–<h6> to create a logical outline.

<h2>Section title</h2>

Paragraphs

Wrap prose with <p> and use <br> sparingly.

<p>Readable copy lives here.</p>

Strong & Emphasis

Use <strong> for importance and <em> for stress.

<strong>Key idea</strong>

Lists

Combine <ul>/<ol> with <li> for structured lists.

<ul>
  <li>Item</li>
</ul>

Code & Pre

Use <code> inline and <pre><code> for blocks.

<pre><code>npm run dev</code></pre>

Quotes

Wrap long quotations with <blockquote> and cite sources.

<blockquote>Wisdom</blockquote>

Media & Embeds

Serve performant, accessible visuals and embeds.

Tag	Purpose	Notes
`<img src="" alt="" loading="lazy">`	Images	Always include descriptive alt text.
`<picture>`	Responsive images	Provide multiple sources for different viewports.
`<video controls>`	Inline video	Add poster, tracks, and muted autoplay when needed.
`<audio controls>`	Audio playback	Use preload="none" to defer downloads.
`<iframe loading="lazy">`	Embedded content	Set title attributes for accessibility.

Forms

Compose accessible data capture experiences.

Tag	Purpose	Notes
`<form action="" method="post">`	Form wrapper	Use GET for search and POST for mutations.
`<label for="email">`	Accessible label	Always associate labels with inputs.
`<input type="email" required>`	Input	HTML validation handles common formats.
`<textarea rows="4">`	Multiline input	Use aria-describedby for helper text.
`<button type="submit">`	Submission control	Prefer button over input for richer content.

Metadata & SEO

High-impact tags that search engines and social cards respect.

SEO title
<title>Unique page titles under 60 characters.</title>
Meta description
<meta name="description" content="150-160 character summary" />
Open Graph
<meta property="og:title" content="Sharable title" />
Favicon
<link rel="icon" href="/favicon.ico" sizes="32x32" />
Preload
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />

ADVERT

More like this

Anchors, character classes, quantifiers, flags, and real-world regex patterns you can paste into your next search.

Copy-ready Markdown syntax for headings, emphasis, lists, tables, code blocks, and media embeds.

Quick CSS reference for selectors, box model utilities, flexbox, grid, and responsive typography patterns.

Modern JavaScript reference packed with syntax basics, array helpers, async patterns, modules, and DOM tips.

SQL command reference for SELECT queries, filtering, joins, aggregation, schema changes, and performance tips.

ADVERT