Quick reference for HTML elements and attributes. Includes document structure, text formatting, links, media, lists, tables, forms, semantic elements, and essential meta tags for SEO and social sharing.
| Code / Syntax | Description |
|---|---|
<!DOCTYPE html> | HTML5 document type declaration |
<html lang="en"> | Root element with language attribute |
<head> | Container for metadata and links |
<body> | Container for visible page content |
<meta charset="UTF-8"> | Character encoding declaration |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | Responsive viewport meta tag |
<title>Page Title</title> | Page title shown in browser tab |
<link rel="stylesheet" href="style.css"> | Link an external stylesheet |
<script src="app.js" defer></script> | Load JS after HTML parsing |
| Code / Syntax | Description |
|---|---|
<h1> to <h6> | Heading levels 1 (largest) to 6 (smallest) |
<p> | Paragraph |
<strong> | Strong importance (bold) |
<em> | Emphasis (italic) |
<br> | Line break |
<hr> | Horizontal rule / thematic break |
<blockquote> | Block quotation |
<code> | Inline code fragment |
<pre> | Preformatted text (preserves whitespace) |
<abbr title="..."> | Abbreviation with full form |
<mark> | Highlighted / marked text |
<small> | Side comment or small print |
| Code / Syntax | Description |
|---|---|
<a href="url"> | Hyperlink |
<a href="url" target="_blank" rel="noopener"> | Link opening in new tab (secure) |
<a href="mailto:email"> | Email link |
<a href="tel:+1234567890"> | Phone link (mobile-friendly) |
<a href="#id"> | Anchor link to element with id |
<img src="url" alt="description"> | Image with alt text |
<img src="url" loading="lazy"> | Lazy-loaded image |
<video src="url" controls> | Video player with controls |
<audio src="url" controls> | Audio player with controls |
<picture> | Responsive image container with <source> children |
| Code / Syntax | Description |
|---|---|
<ul> | Unordered (bulleted) list |
<ol> | Ordered (numbered) list |
<li> | List item |
<dl> | Description list |
<dt> | Description term |
<dd> | Description detail |
<table> | Table container |
<thead> / <tbody> / <tfoot> | Table header, body, and footer groups |
<tr> | Table row |
<th> | Table header cell |
<td> | Table data cell |
<td colspan="2"> | Cell spanning 2 columns |
| Code / Syntax | Description |
|---|---|
<form action="url" method="POST"> | Form element with action and method |
<input type="text"> | Single-line text input |
<input type="email"> | Email input with validation |
<input type="password"> | Password input (masked) |
<input type="number" min="0" max="100"> | Number input with range |
<input type="checkbox"> | Checkbox |
<input type="radio" name="group"> | Radio button (grouped by name) |
<textarea rows="4"> | Multi-line text input |
<select> / <option> | Dropdown select menu |
<label for="id"> | Label linked to input by id |
<button type="submit"> | Submit button |
<input type="file" accept="image/*"> | File upload (images only) |
| Code / Syntax | Description |
|---|---|
<header> | Introductory content or navigation |
<nav> | Navigation links |
<main> | Main content of the page (one per page) |
<article> | Self-contained content (blog post, news story) |
<section> | Thematic grouping of content |
<aside> | Sidebar or tangentially related content |
<footer> | Footer for section or page |
<figure> / <figcaption> | Image or diagram with caption |
<details> / <summary> | Expandable/collapsible content |
<time datetime="2024-01-15"> | Machine-readable date/time |
Found this cheat sheet useful? Check out our other references and tools.