HTML Cheat Sheet

Essential HTML5 tags and structure for web developers.

Document Basics

Concept / Tag Code Snippet Description
HTML5 Doctype
<!DOCTYPE html>
Declaration at the top of every page.
Base Element
<base href="url" target="_blank">
Specifies base URL for all relative URLs.

Meta Tags (SEO)

Concept / Tag Code Snippet Description
Description
<meta name="description" content="...">
Summary for search engines.
Charset
<meta charset="UTF-8">
Standard character encoding.
Viewport
<meta name="viewport" content="...">
Mobile optimization.

Text Formatting

Concept / Tag Code Snippet Description
Line Break
<br>
Simple line break.
Span
<span>...</span>
Generic inline container.
Abbreviation
<abbr title="Description">X</abbr>
Tooltip for abbreviations.

Media Elements

Concept / Tag Code Snippet Description
Audio
<audio controls><source src="..."></audio>
Embed audio files.
Picture
<picture><source srcset="..." media="..."></picture>
Responsive image wrapper.

Forms & Input

Concept / Tag Code Snippet Description
Select
<select><option>...</option></select>
Dropdown list.
Textarea
<textarea rows="4">...</textarea>
Multi-line text input.
Checkbox
<input type="checkbox">
Toggle selection.

Tables & Lists

Concept / Tag Code Snippet Description
Description List
<dl><dt>Term</dt><dd>Definition</dd></dl>
Glossary style list.
Table Group
<thead>/<tbody>/<tfoot>
Semantic table parts.

Semantic Tags

Concept / Tag Code Snippet Description
Main Content
<main>...</main>
The primary unique content.
Article
<article>...</article>
Self-contained content piece.

Frequently Asked Questions

The latest version is HTML5, which introduced semantic elements, audio/video support, and better form controls.

Semantic tags like <article> and <section> help search engines and screen readers understand the structure of your content, improving SEO and accessibility.

Explore More Cheat Sheets