Reference library
HTML elements, attributes, and examples
Document structure, text, links, media, lists, tables, forms, and semantic elements.
HTML cheat sheet
Markup, result, and purpose
Click any markup example to copy it exactly. The result column shows a compact visual preview.
| Markup | Result | When to use | ||||
|---|---|---|---|---|---|---|
| Document structureHTML declaration, page language, metadata, and visible content. | ||||||
Standards mode | Document type declaration Tells the browser to process the page in standards mode. | |||||
Page language: en | Root element and language Wraps the document; lang helps speech, translation, and search tools. | |||||
▣ Page title | Metadata and tab title head contains non-visible page settings, while title names the browser tab. | |||||
UTF-8 Responsive width | Encoding and viewport Sets UTF-8 and a mobile-friendly viewport width. meta is a void element | |||||
body → main → content | Visible page content Contains everything the browser presents as page content. | |||||
| Text and meaningHeadings, paragraphs, semantic emphasis, quotations, and code. | ||||||
Section heading | Headings h1–h6 Create document hierarchy; choose a level by structure, not font size. | |||||
A short paragraph of text. | Paragraph Groups related sentences into a standalone text block. | |||||
Important | Strong importance Marks content of strong importance, usually rendered in bold. | |||||
Do it right now. | Stress emphasis Adds stress emphasis to a phrase, usually rendered in italics. | |||||
A short quotation. | Block quotation Represents a standalone quotation from another source. | |||||
| Inline and block code code marks computer code, while pre preserves spaces and line breaks. | |||||
| Links and mediaNavigation, captioned images, responsive graphics, and video. | ||||||
| Link Creates navigation to a page, file, email address, or fragment. | ||||||
IMG · Mountain landscape | Image Embeds an image; alt conveys meaning, while dimensions reduce layout shifts. img is a void element | |||||
| Figure with caption Associates a self-contained image, diagram, or code sample with its caption. | ||||||
wide.webp → small.webp | Responsive image Lets the browser choose an image source based on a condition. | |||||
▶ 00:00 / 01:24 | Video Embeds a video player; controls enables the browser's built-in controls. | |||||
| Lists and tablesPeer items, sequences, term pairs, and tabular data. | ||||||
| Unordered list Groups items whose order does not change their meaning. | |||||
| Ordered list Represents a sequence of steps or ranked items. | |||||
| Description list Associates terms, names, or questions with descriptions. | |||||
| Data table Represents related data in rows and columns; th defines headers. | |||||
| FormsData submission, field labels, multiline input, choices, and actions. | ||||||
form · POST → /send | Form Groups controls and defines where and how data is submitted. | |||||
| Labeled input label associates a meaningful caption with a field through for and id. input is a void element | ||||||
| Multiline input Creates a field for comments, descriptions, or other longer text. | ||||||
| Select menu Lets the user choose one option from a compact menu. | ||||||
| Button Triggers an action; an explicit type prevents accidental form submission behavior. | ||||||
| Semantics and interactionPage landmarks, standalone content, supporting material, and disclosures. | ||||||
header → nav | Header and navigation header introduces a section, while nav marks a major navigation block. | |||||
main · primary content | Main content Identifies the primary unique content of the page. | |||||
section → article | Section and standalone article section groups a topic, while article represents independently distributable content. | |||||
aside · related footer · information | Aside and footer aside contains supporting content, while footer holds information about a section or page. | |||||
More detailsAdditional text | Disclosure widget Creates an accessible disclosure widget without JavaScript. | |||||
Quick notes
Keep markup meaningful
- Start with semantics
- Use the element that describes the content before reaching for a generic div or span.
- Label every control
- Connect label and input with matching for and id values; describe meaningful images with alt.
- Quote attribute values
- Consistent double quotes make markup easier to scan and safer to edit.
- Check nesting
- Keep interactive elements separate, close paired elements, and validate the final document.
Element semantics checked against the WHATWG HTML Living Standard.
Encode HTML entitiesRelated tools
Continue working with text
Copy a symbol, convert markup, clean a fragment, or keep the result in the notebook.
- Encode HTML entities Turn special characters into safe HTML entities or decode them back.
- Convert Markdown to HTML Prepare HTML markup from a Markdown draft.
- Remove HTML tags Keep readable text and discard markup.
- Change text case Convert letters to upper or lower case.
- Open the online notebook Use copied symbols in a note stored locally in your browser.
FAQ
Questions about HTML
What is the difference between a tag, an element, and an attribute?
A tag is source syntax such as <p> or </p>. An element is the resulting node including its content. An attribute such as class or lang adds a setting to an element.
Which HTML elements have no closing tag?
Void elements such as img, input, meta, link, br, hr, and source cannot contain children and do not use an end tag in HTML syntax.
When should I use div and span?
Use them when no semantic element describes the content. div is a generic flow container; span is a generic inline container.
Why do alt, label, and semantic landmarks matter?
They expose meaning and relationships to assistive technology, while also making the document structure clearer to browsers, search tools, and maintainers.