HTML
Complete HTML reference: document structure, text tags, links, media, lists, tables, forms, inputs, and semantic HTML5 elements.
HTML (HyperText Markup Language) is the standard language for creating web pages. It uses tags to structure content into headings, paragraphs, links, images, lists, forms, tables, and more.
Document Structure
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page Title</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header>…</header> <main>…</main> <footer>…</footer> </body> </html>
Text & Content
| Tag | Description |
|---|---|
| <h1>–<h6> | Headings, h1 (most important) to h6 (least). Only one h1 per page for SEO. |
| <p> | Paragraph. Block-level, adds spacing before and after. |
| <strong> | Strong importance. Displays as bold. Use instead of <b> for semantic meaning. |
| <em> | Emphasis. Displays as italic. Use instead of <i> for semantic meaning. |
| <span> | Inline container for styling or grouping text. No semantic meaning on its own. |
| <div> | Generic block-level container. The most used tag for layout. |
| <br> | Line break within text. Self-closing. Use for poems/addresses, not for layout spacing. |
| <hr> | Thematic break (horizontal rule). Self-closing. Represents a section break. |
| <blockquote> | Quoted block from another source. Use <cite> for the source attribution. |
| <code> | Inline code snippet. Use <pre><code> for multi-line code blocks. |
Links & Media
| Tag | Attributes / Notes |
|---|---|
| <a> | Anchor / hyperlink. href="url" for destination, target="_blank" for new tab, rel="noopener" for security. |
| <img> | Image. src="path", alt="description" (required for accessibility), loading="lazy" for deferred loading. |
| <picture> | Responsive images with multiple <source> elements for different screen sizes or formats (WebP fallback). |
| <video> | Embed video. controls, autoplay, loop, muted, poster="thumbnail.jpg". Use <source> for multiple formats. |
| <audio> | Embed audio. controls, autoplay, loop. Use <source> for multiple formats (MP3, OGG). |
| <iframe> | Inline frame to embed another page. Use sparingly — security and performance concerns. sandbox attribute restricts capabilities. |
| <svg> | Inline SVG vector graphic. Can be styled with CSS and animated. Better than <img> for icons and logos. |
| <figure> | Self-contained content (image, diagram, code). Often paired with <figcaption> for the caption. |
Lists
Unordered
<ul> / <li><ul> <li>Item</li> <li>Item</li> </ul>
Bullet list. Use for navigation menus, feature lists, related items.
Ordered
<ol> / <li><ol> <li>First</li> <li>Second</li> </ol>
Numbered list. type="A / a / I / i" for different numbering styles.
Definition
<dl> / <dt> / <dd><dl> <dt>Term</dt> <dd>Definition</dd> </dl>
Key-value pairs. Great for metadata, glossaries, and FAQs.
Tables
| Tag | What it does |
|---|---|
| <table> | Table container. Use border-collapse in CSS for clean borders. |
| <thead> / <tbody> / <tfoot> | Semantic sections: header, body, footer. Helps with styling and accessibility. |
| <tr> | Table row. Contains <th> (header cell) or <td> (data cell). |
| <th> | Header cell. scope="col" or scope="row" for accessibility. |
| <td> | Data cell. colspan merges columns; rowspan merges rows. |
| <caption> | Table title/caption. Visible above the table. Good for accessibility. |
| <colgroup> | Defines column groups for styling. Pair with <col> elements. |
Forms & Inputs
| Tag / Attribute | Description |
|---|---|
| <form> | Form container. action="url", method="GET|POST", enctype="multipart/form-data" for file uploads. |
| <input> | Versatile input. type="text|email|password|number|date|file|checkbox|radio|range|color|hidden". |
| <textarea> | Multi-line text input. rows and cols attributes. Resizable by default (CSS resize property to control). |
| <select> / <option> | Dropdown menu. <optgroup> for grouped options, multiple for multi-select. |
| <label> | Label for an input. for="id" associates it. Clicking the label focuses the input — essential for UX. |
| <button> | Clickable button. type="submit|reset|button". <button> is more flexible than <input type="button">. |
| <fieldset> / <legend> | Groups related form fields with a visible border and legend title. Improves accessibility. |
| required / placeholder / pattern | Validation attributes. required = mandatory, placeholder = hint text, pattern = regex validation. |
| autocomplete / autofocus | autocomplete="on|off" for form autofill. autofocus focuses the input on page load (use sparingly). |
Semantic HTML5 Elements
<header>Introductory content or navigation
<nav>Navigation links (main site nav)
<main>Primary page content (one per page)
<article>Self-contained composition (blog post, news)
<section>Thematic grouping of content
<aside>Sidebar, related but separate content
<footer>Footer for its nearest section ancestor
<details> / <summary>Disclosure widget (collapsible section)
<dialog>Modal dialog box. showModal() for modals.
<mark>Highlighted/referenced text (like a highlighter)
<time>Machine-readable date/time. datetime attribute.
<address>Contact info for the nearest article/body
Format & prettify your HTML →
Use our HTML Prettifier to clean up and beautify your markup.