Document & Metadata

This page includes <!doctype html>, lang/dir on html, common <meta> tags, <link rel="icon">, <title>, and a (commented) <base>.

Use DevTools → Elements to inspect the head.

Text & Semantics

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph with emphasis, strong, i, b, u, del, mark, small, sup and sub, a line
break, and an WHO abbreviation.

Inline semantics: API, x = Math.random(), press Ctrl + S, output {"ok":true}, verylongstringthatneedsbreaks.

Quoting: Short inline quote.

Blockquote with source URL in cite attribute.

Address: 123 Demo Street, Web City
Contact: teacher@example.edu

Time: Class starts .

Decorative SVG placeholder
Figure with <figcaption>.

Ruby annotation for East Asian text: 漢kan字ji(kanji)

contenteditable true   spellcheck false

Images & Media

Picture element

Small SVG fallback

Audio

Tiny silent WAV via data URI for offline demo.

Video + captions

Embeds, Inline SVG & Canvas

iframe (srcdoc)

object & embed

Fallback if unsupported

Inline SVG

Inline SVG

Canvas

Forms & Controls

Basic inputs
Select, datalist
Checks & radios

Textarea
Constraint validation

<output> + calculation

Sum: 5

Data, meter & progress

Dataset value: Forty‑two

Progress: 0%

Tables & Lists

Sample Table
ItemQtyPrice
Alpha2$3
Beta5$4
Gamma1$7
Total$25

Lists

  • Unordered list
  • Nested
    • Child
  1. Ordered reversed (value set)
  2. Manual value = 10
HTML
Markup language for documents on the web.
CSS
Style sheet language for presentation.

Horizontal rule above separates content.

Interactive Elements

<details>

Click to toggle details

Expandable content without JavaScript.

<dialog>

Hello! I am a native modal dialog.

Hidden & translate

Brand name (no translate): WebX

Internationalization (i18n) & Direction

Texte en français avec lang="fr".

This text is forced RTL with bdo.

Bi-directional isolate with bdi: مرحبا mixed with English.

Accessibility Hints

  • Use semantic elements (header, nav, main, section, article, aside, footer).
  • Associate labels with inputs (label for or wrapping).
  • Alt text for images, figure/figcaption for complex visuals.
  • Use aria-label where semantics aren’t sufficient.

Scripting, Template & Web Components

<template> cloning

Custom Element

Web Components slot content!

Dataset & data-* attributes

data‑ attributes live here

Open console: document.getElementById('ds').dataset

Download this Demo

You can save this page directly from the browser (File → Save), or download a generated copy.