<figure>
blocks<img>
in a single <figure>
(source ) :<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"/>
Just playing with some HTML5 tags. For details and hacks (if any) have a look at the page source code .
<blockquote>
, <cite>
and <q>
<head> <title>ACME Corp.</title> <base href="http://www.acme.corp/" /> </head>
<code>
ignores TABs and line breaks, unless it's instructed to mimic <pre>
with :code { white-space: pre; }
<code>
is an inline element, which means :
<pre>
does :
login:
enter login
enter password
if password is ok
continue
else
goto login
<meter>42</meter>
<meter value="0.42">0.42</meter>
<meter value="42" min="0" max="100">42</meter>
<meter value="0.65">whatever</meter>
<meter value="42" min="0" max="100" low="12" high="73" optimum="65">42</meter>
<meter value="0.42" title="42%"></meter>
<meter>
element are ignored.<progress>42%</progress>
undetermined end as max value is unknown<progress value="73" max="100">73%</progress>
known end
<blockquote>
, <cite>
and <q>
(source) : <blockquote>
:
Hâtez-vous lentement, et sans perdre courage,
Vingt fois sur le métier remettez votre ouvrage,
Polissez-le sans cesse, et le repolissez,
Ajoutez quelquefois, et souvent effacez.
L'Art poétique (1674), by Nicolas Boileau
<span>
elements (but no non-standard author="..."
element attribute).When he saw Marcus Brutus, whom he considered like his son, Caesar said Tu quoque mi fili
.
Character name | Output | Numeric code | Symbolic code | Comment |
---|---|---|---|---|
quotation mark | " | " | " | |
number sign | # | # | ||
dollar sign | $ | $ | ||
ampersand | & | & | & | |
apostrophe | ' | ' | ' | also used as single quote |
less-than sign | < | < | < | |
greater-than sign | > | > | > | |
back slash | \ | \ | ||
non-breaking space |   | | ||
inverted exclamation | ¡ | ¡ | ¡ | |
cent sign | ¢ | ¢ | ¢ | |
pound sterling | £ | £ | £ | |
general currency sign | ¤ | ¤ | ¤ | |
yen sign | ¥ | ¥ | ¥ | |
broken vertical bar | ¦ | ¦ | ¦ | |
left angle quote, guillemotleft | « | « | « | |
not sign | ¬ | ¬ | ¬ | |
registered trademark | ® | ® | ® | |
degree sign | ° | ° | ° | |
plus or minus | ± | ± | ± | |
superscript two | ² | ² | ² | |
superscript three | ³ | ³ | ³ | |
acute accent | ´ | ´ | ´ | |
micro sign | µ | µ | µ | |
paragraph sign | ¶ | ¶ | ¶ | |
middle dot | · | · | · | |
cedilla | ¸ | ¸ | ¸ | |
superscript one | ¹ | ¹ | ¹ | |
masculine ordinal | º | º | º | |
right angle quote, guillemotright | » | » | » | |
fraction one-fourth | ¼ | ¼ | ¼ | |
fraction one-half | ½ | ½ | ½ | |
fraction three-fourths | ¾ | ¾ | ¾ | |
inverted question mark | ¿ | ¿ | ¿ | |
capital A, grave accent | À | À | À | |
capital A, circumflex accent | Â | Â | Â | |
capital AE diphthong (ligature) | Æ | Æ | Æ | |
capital C, cedilla | Ç | Ç | Ç | |
capital E, grave accent | È | È | È | |
capital E, acute accent | É | É | É | |
capital E, circumflex accent | Ê | Ê | Ê | |
capital E, dieresis or umlaut mark | Ë | Ë | Ë | |
capital I, circumflex accent | Î | Î | Î | |
capital O, circumflex accent | Ô | Ô | Ô | |
multiply sign | × | × | × | |
capital O, slash | Ø | Ø | Ø | |
capital U, grave accent | Ù | Ù | Ù | |
capital U, circumflex accent | Û | Û | Û | |
small a, grave accent | à | à | à | |
small a, circumflex accent | â | â | â | |
small ae diphthong (ligature) | æ | æ | æ | |
small c, cedilla | ç | ç | ç | |
small e, grave accent | è | è | è | |
small e, acute accent | é | é | é | |
small e, circumflex accent | ê | ê | ê | |
small e, dieresis or umlaut mark | ë | ë | ë | |
small i, circumflex accent | î | î | î | |
small n, tilde | ñ | ñ | ñ | |
small o, circumflex accent | ô | ô | ô | |
division sign | ÷ | ÷ | ÷ | |
small o, slash | ø | ø | ø | |
small u, grave accent | ù | ù | ù | |
small u, circumflex accent | û | û | û | |
Greek small letter beta | β | β | β | |
en dash | – | – | – | used to represent a number range : the 2017–2018 season |
zero-width non-joiner | (non-printable) | ‌ | ‌ | used to have HTML content while nothing is displayed, which prevents empty lines from being minified. |
em dash | — | — | — | used —by pair— to emphasize on something without using parentheses |
horizontal ellipsis | … | … | … (HTML4) … (HTML5) | |
euro sign | € | € | € | |
superscript trademark | ™ | ™ | ||
left arrow | ← | ← | ← | |
up arrow | ↑ | ↑ | ↑ | |
right arrow | → | → | → | |
down arrow | ↓ | ↓ | ↓ | |
south east arrow | ↘ | ↘ | ↘ | |
page up | ⇞ | ⇞ | ||
page down | ⇟ | ⇟ | ||
less-than or equal to | ≤ | ≤ | ≤ | |
greater-than or equal to | ≥ | ≥ | ≥ | |
squared "+" | ⊞ | ⊞ | can mimic a Windows logo | |
triangle up | ▲ | ▲ |
| |
triangle right | ► | ► | ||
triangle down | ▼ | ▼ | ||
triangle left | ◄ | ◄ | ||
Character name | Output | Numeric code | Symbolic code | Comment |
<img src="data:image/jpeg;base64,[base64-encoded data]">
<head> <link rel="icon" type="image/png" href="data:image/png;base64,[base64-encoded data]" /> </head>
htmlTag:cssPseudoClass { content: url(data:image/png;base64,[base64-encoded data]); other CSS rules; }
This sounds fun, but actually prevents the favicon file to be cached since it's sent again and again with EVERY page. From a performance point of view, this is not a great idea, finally
Suggestion : use a standard favicon.ico (16*16px image, see supported file formats) and set caching headers accordingly (source, deeper thoughts).