FastCompiler
Open Compiler

HTML reference

Rare & unique HTML tags

Standards-valid HTML elements that most people never touch. Each one shows the input and the real rendered output — so you can see exactly what happens before you ever write it yourself.

Text semantics

Tags that shape meaning, emphasis, and pronunciation — powerful for readability and accessibility, and almost never seen in everyday markup.

<abbr>

Semantic

Places the full title of an abbreviation on the text. The browser shows the expansion on hover and adds a dotted underline.

Input
<p>Built with <abbr title="Cascading Style Sheets">CSS</abbr>.</p>
Output

Built with CSS.

Hover the dotted text to see the tooltip. Try it in the compiler

<s>

Semantic

Renders a strikethrough for content that is no longer accurate or relevant. Unlike <del>, it does not imply a deletion in a document's edit history.

Input
<p><s>$19.99</s>  Now $9.99</p>
Output

$19.99  Now $9.99

Perfect for "was / now" pricing. Try it in the compiler

<address>

Semantic

Wraps contact information for the nearest <article> or <body>. Browsers render it in italic — but its job is informational, not visual.

Input
<address>
  Written by <a href="mailto:[email protected]">FastCompiler</a>.
  Berlin, Germany
</address>
Output
Written by FastCompiler.
Berlin, Germany
Also valid inside <article> for bylines. Try it in the compiler

Ruby annotations

The <ruby> family adds phonetic or translation guides above base text — standard for languages like Japanese, Japanese-era kanji, and Chinese pinyin.

<ruby> · <rt>

International

<ruby> groups base text with its annotation; <rt> holds the annotation that renders in tiny text above (or beside) the base.

Input
<ruby>
  æ¼¢ <rt>kan</rt>
  å­— <rt>ji</rt>
</ruby>
Output

æ¼¢ kanå­— ji

The tiny reading sits directly above each character. Try it in the compiler

<rp>

Fallback

Provides parentheses only in browsers that do not support ruby — so the annotation appears readable as plain inline text.

Input
<ruby>
  漢字 <rp>(</rp><rt>kanji</rt><rp>)</rp>
</ruby>
Output

漢字 (kanji)

Current browsers show the reading above; old ones fall back to (kanji). Try it in the compiler

Data & forms

Structure that machines can read reliably — a machine-readable value riding on top of human-readable text.

<data>

Machine-readable

Links a piece of written content to a value that scripts and parsers can use — without changing how the text looks.

Input
<p>Battery lasts <data value="6">six hours</data>.</p>
Output

Battery lasts six hours.

A script can read value and never touch the label. Try it in the compiler

<output>

Form

A container that scripts fill with results — classically the live answer of a <form> calculation.

Input
<form oninput="r.value = a.valueAsNumber + b.valueAsNumber">
  <input type="range" id="a" value="10">
  <input type="range" id="b" value="20">
  <output id="r">30</output>
</form>
Output
30
Drag the sliders — the result recalculates live. (Simple inline oninput for the preview; the compiler lets you attach listeners properly.) Try it in the compiler

<meter>

Reactive

A horizontal gauge with min, max, low, high, and optimum. Color shifts by how the current value relates to those bands.

Input
<meter min="0" max="100" low="25"
       high="75" optimum="90"
       value="82">82%</meter>
Output

82%

Same markup, three different colors, three achievements. Try it in the compiler

Embedded content

Elements that bring other documents and figures into a page, with meaning the plain <img> and <iframe> never convey.

<figure> · <figcaption>

Embedded

Associates a caption container with any kind of figure — an image, code block, table, or quotation — so the label stays bound to the content.

Input
<figure>
  <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='90'><polygon points='100,10 40,80 160,80' fill='%234f46e5' style='stroke:%23f99c0;stroke-width:2'/></svg>" alt="A triangle">
  <figcaption>An inline SVG triangle</figcaption>
</figure>
Output
A triangle
An inline SVG triangle
The caption can move as a unit with its figure — great for responsive reflow. Try it in the compiler

Hidden & misc

Small, safe power moves — hidden menu commands, old semantics, and a clean newline that no inline element else provides.

<menu>

Interaction

A semantic list meant for interactive commands and toolbars. Combined with <li>, it's the structural home for context menus and grouped actions.

Input
<menu>
  <li><button>Cut</button></li>
  <li><button>Copy</button></li>
</menu>
Output
    •
    Clearer intent than a bare <ul> for a row of tools. Try it in the compiler

    <wbr>

    Utility

    A word-break opportunity — the browser may wrap the line at this point when space runs out, but won't force a break. A hidden escape hatch for long tokens.

    Input
    <p>This is a really long url:<wbr>
  https://example.com/very<wbr>
  /long/path/that/wraps</p>
    Output

    This is a really long url:https://example.com/very/long/path/that/wraps

    Narrow the preview and the URL wraps only at the marked points. Try it in the compiler