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 |
Put it to work with Seo meta tags, Open Graph Preview, Html to markdown converter, or Hreflang Tag Generator.
Found this cheat sheet useful? Check out our other references and tools.