📜 HTML

Elements¶

`blockquote` `figure` `figcaption`¶

<figure>
    <blockquote cite="https://example.org/">
        <p>This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.</p>
    </blockquote>
    <figcaption>—Example Domain, <cite>@example.org</cite></figcaption>
</figure>

This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.

—Example Domain, @example.org

`del` `ins`¶

<blockquote>
    There is <del>nothing</del> <ins>no code</ins> either good or bad, but <del>thinking</del> <ins>running it</ins> makes it so.
</blockquote>

There is ~~nothing~~ no code either good or bad, but ~~thinking~~ running it makes it so.

`details` `summary`¶

<details open>
    <summary>Details</summary>
    <p>Something small enough to escape casual notice.</p>
</details>

Details

Something small enough to escape casual notice.

`input`¶

`button`¶

<input type="button" value="Button">

`color`¶

<input type="color" value="#000000">

`date`¶

<input type="date" value="2038-01-19" min="2000-01-01" max="2100-12-31">

`datetime-local`¶

<input type="datetime-local" value="2038-01-19T03:14:08" min="2000-01-01T00:00" max="2100-12-31T23:59:59">

`email`¶

<input type="email" placeholder="user@example.org">

`file`¶

<input type="file" accept="image/png, image/jpeg">

`image`¶

<input type="image" src="../assets/images/favicon.png">

`month`¶

<input type="month" value="2050-06" min="2000-01" max="2100-12">

`number`¶

<input type="number" value="50" min="0" max="100">

`password`¶

<input type="password" placeholder="…">

`range`¶

<input type="range" value="5" min="0" max="10">

`reset`¶

<form>
    <input type="text" placeholder="…">
    <input type="reset" value="Reset">
</form>

`tel`¶

<input type="tel" placeholder="…">

`text`¶

<input type="text" placeholder="…">

`time`¶

<input type="time" min="08:00" max="18:00">

`url`¶

<input type="url" placeholder="…">

`week`¶

<input type="week" min="2000-W10" max="2100-W40">

`mark`¶

Most <mark>salamander</mark>s are nocturnal, and hunt for insects, worms, and other small creatures.

Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.

The theme-color value for the name attribute of the <meta> element indicates a suggested color that user agents should use to customize the display of the page or of the surrounding user interface. If specified, the content attribute must contain a valid CSS <color>.

<meta name="theme-color" media="(prefers-color-scheme: light)" content="cyan" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />

`meter`¶

<meter min="0" max="100" low="33" high="66" optimum="80" value="25"></meter>
<meter min="0" max="100" low="33" high="66" optimum="80" value="50"></meter>
<meter min="0" max="100" low="33" high="66" optimum="80" value="75"></meter>

`progress`¶

<progress max="100" value="75"></progress>

`select` `optgroup` `option`¶

<select>
    <optgroup label="Theropods">
        <option>Tyrannosaurus</option>
        <option>Velociraptor</option>
        <option>Deinonychus</option>
    </optgroup>
    <optgroup label="Sauropods">
        <option>Diplodocus</option>
        <option>Saltasaurus</option>
        <option>Apatosaurus</option>
    </optgroup>
</select>

Emoji favicon¶

<head>
  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22256%22 height=%22256%22 viewBox=%220 0 100 100%22><text x=%2250%%22 y=%2250%%22 dominant-baseline=%22central%22 text-anchor=%22middle%22 font-size=%2290%22>🗓️</text></svg>"/>
</head>

And here is the decoded SVG content:

<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 100 100">
    <text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" font-size="90">🗓️</text>
</svg>

Test

🔗