<!DOCTYPE html> | HTML5 doctype declaration |
<html lang="en"> | Root element with language |
<head> | Document metadata container |
<body> | Document body content |
<meta charset="UTF-8"> | Character encoding |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | Responsive viewport |
<title>Page Title</title> | Page title |
<link rel="stylesheet" href="style.css"> | Link stylesheet |
<script src="script.js"></script> | Link JavaScript |
<script defer src="script.js"></script> | Defer script loading |
<meta name="description" content="..."> | Page description (SEO) |
<meta name="keywords" content="..."> | Keywords (SEO) |
<meta name="author" content="..."> | Author name |
<meta name="robots" content="index,follow"> | Search engine directives |
<meta property="og:title" content="..."> | Open Graph title |
<meta property="og:description" content="..."> | Open Graph description |
<meta property="og:image" content="..."> | Open Graph image |
<link rel="icon" href="favicon.ico"> | Favicon |
<link rel="canonical" href="..."> | Canonical URL |
<header> | Header section |
<nav> | Navigation section |
<main> | Main content (unique) |
<article> | Self-contained content |
<section> | Thematic grouping |
<aside> | Sidebar content |
<footer> | Footer section |
<figure> | Figure with caption |
<figcaption> | Figure caption |
<address> | Contact information |
<time datetime="2024-01-01"> | Date/time with machine-readable format |
<mark> | Highlighted text |
<details> | Expandable details |
<summary> | Details summary |
<dialog> | Dialog box |
<progress value="50" max="100"> | Progress bar |
<meter value="0.7"> | Gauge/meter |
<h1> to <h6> | Headings (h1 = most important) |
<p> | Paragraph |
<br> | Line break |
<hr> | Horizontal rule |
<pre> | Preformatted text |
<blockquote> | Block quotation |
<strong> | Strong importance (bold) |
<em> | Emphasis (italic) |
<b> | Bold (no importance) |
<i> | Italic (no emphasis) |
<u> | Underline |
<s> | Strikethrough |
<small> | Smaller text |
<sub> | Subscript |
<sup> | Superscript |
<code> | Inline code |
<kbd> | Keyboard input |
<var> | Variable |
<samp> | Sample output |
<abbr title="..."> | Abbreviation with tooltip |
<cite> | Citation |
<q> | Inline quotation |
<ul> | Unordered list |
<ol> | Ordered list |
<li> | List item |
<ol start="5"> | Start from number |
<ol reversed> | Reverse order |
<dl> | Description list |
<dt> | Description term |
<dd> | Description details |
<a href="url">Link</a> | Hyperlink |
<a href="#id">Anchor</a> | Anchor link |
<a href="mailto:email"> | Email link |
<a href="tel:+1234567890"> | Phone link |
<a target="_blank"> | Open in new tab |
<a rel="noopener noreferrer"> | Security for new tab |
<a download="filename"> | Download link |
<img src="url" alt="description"> | Image with alt text |
<img loading="lazy"> | Lazy loading |
<img width="100" height="100"> | Set dimensions |
<picture> | Responsive images |
<source srcset="img.webp" type="image/webp"> | Image source |
<img srcset="small.jpg 300w, large.jpg 800w"> | Responsive srcset |
<img sizes="(max-width: 600px) 100vw, 50vw"> | Image sizes |
<video src="video.mp4" controls> | Video with controls |
<video autoplay muted loop> | Autoplay video |
<video poster="thumbnail.jpg"> | Video poster |
<audio src="audio.mp3" controls> | Audio with controls |
<source src="video.mp4" type="video/mp4"> | Media source |
<track kind="subtitles" src="subs.vtt"> | Subtitles/captions |
<iframe src="url"> | Embed external page |
<iframe sandbox> | Sandboxed iframe |
<iframe allow="fullscreen"> | Allow fullscreen |
<embed src="file.pdf"> | Embed content |
<object data="file.pdf"> | Object embed |
<canvas id="canvas"> | Canvas for graphics |
<svg> | SVG graphics |
<table> | Table container |
<thead> | Table header group |
<tbody> | Table body group |
<tfoot> | Table footer group |
<tr> | Table row |
<th> | Header cell |
<td> | Data cell |
<caption> | Table caption |
colspan="2" | Span multiple columns |
rowspan="2" | Span multiple rows |
<th scope="col"> | Column header scope |
<th scope="row"> | Row header scope |
<colgroup> | Column group |
<col span="2"> | Column definition |
<form action="url" method="post"> | Form with action |
<form enctype="multipart/form-data"> | File upload form |
<fieldset> | Group form controls |
<legend> | Fieldset caption |
<label for="id"> | Input label |
<input type="text"> | Text input |
<input type="password"> | Password input |
<input type="email"> | Email input |
<input type="number"> | Number input |
<input type="tel"> | Phone input |
<input type="url"> | URL input |
<input type="search"> | Search input |
<input type="date"> | Date picker |
<input type="time"> | Time picker |
<input type="datetime-local"> | Date and time |
<input type="color"> | Color picker |
<input type="range"> | Slider |
<input type="file"> | File upload |
<input type="hidden"> | Hidden input |
<input type="checkbox"> | Checkbox |
<input type="radio" name="group"> | Radio button |
<select> | Dropdown select |
<option value="val"> | Select option |
<optgroup label="Group"> | Option group |
<select multiple> | Multi-select |
<datalist id="list"> | Input suggestions |
placeholder="..." | Placeholder text |
required | Required field |
disabled | Disabled input |
readonly | Read-only input |
autofocus | Auto focus on load |
autocomplete="off" | Disable autocomplete |
min="0" max="100" | Min/max values |
step="1" | Step increment |
pattern="[A-Za-z]+" | Regex pattern |
minlength="5" maxlength="10" | Length limits |
accept="image/*" | Accepted file types |
<button type="submit"> | Submit button |
<button type="button"> | Generic button |
<button type="reset"> | Reset button |
<input type="submit" value="Submit"> | Submit input |
<textarea rows="4" cols="50"> | Multi-line text |
<output> | Calculation result |
id="unique" | Unique identifier |
class="name" | CSS class(es) |
style="color: red" | Inline styles |
title="tooltip" | Tooltip text |
hidden | Hide element |
data-*="value" | Custom data attribute |
lang="en" | Language code |
dir="rtl" | Text direction |
alt="description" | Image alt text |
aria-label="label" | Accessible label |
aria-hidden="true" | Hide from screen readers |
aria-describedby="id" | Description reference |
role="button" | ARIA role |
tabindex="0" | Tab order |
tabindex="-1" | Remove from tab order |
onclick="..." | Click event |
onsubmit="..." | Form submit event |
onchange="..." | Change event |
oninput="..." | Input event |
onload="..." | Load event |
onerror="..." | Error event |