HTML - Httqm's Docs

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>title</title>
		<link rel="stylesheet" type="text/css" href="style.css">	these do not belong to a strictly minimal document,
		<script src="script.js"></script>				but having them here saves search + copy + paste 
	</head>
	<body>
	body
	</body>
</html>

View the page source for details of each method

Nesting `<figure>` blocks

With several `<img>` in a single `<figure>` (source ) :

As a list (source ) :

This is required when using non-ASCII characters, while writing documents in french, for instance.

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8"/>

Don't forget to use the matching encoding while saving your HTML file.

Just playing with some HTML5 tags. For details and hacks (if any) have a look at the page source code .

Some of the elements below existed prior to HTML5. They are listed here because their semantics may have evolved since their creation.
Details about quotation elements <blockquote>, <cite> and <q>

abbr : abbreviation or acronym

This article is about HTML 5.

aside : for related content. Such sections are often represented as sidebars in printed typography.

normal content back to normal content

base : specify the document base URL for the purposes of resolving relative URLs

<head>
	<title>ACME Corp.</title>
	<base href="http://www.acme.corp/" />
</head>

code: a fragment of computer code

<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 :
- it has no "implied carriage return" before and after it (contrary to what block elements do)
- it doesn't paint the full background like <pre> does : login: enter login enter password if password is ok continue else goto login

del : contents removed from the document.

For an apple pie, take 5 ~~bananas~~ apples ...

figure

See also the <picture> element (1, 2).

footer : footer of a page or section, for metadata (author, links, copyright, ...)

header : header of a page or section. This is purely semantic. Details

ins : addition to the document

... and sugar and even cinnamon to your taste.

kbd : any kind of user input (see link for details on nesting this tag)

type your first name then enter...

mark : something we want to mark or highlight

this is about the <mark> tag.

meter : represents a scalar measurement within a known range, or a fractional value, and is displayed as a gauge (specification).

42 : <meter>42</meter>
0.42 : <meter value="0.42">0.42</meter>
42 : <meter value="42" min="0" max="100">42</meter>
whatever : <meter value="0.65">whatever</meter>
42 : <meter value="42" min="0" max="100" low="12" high="73" optimum="65">42</meter>
: <meter value="0.42" title="42%"></meter>

the value attribute must be specified. If missing, the gauge will stay blank.
the default range of value is [0; 1]. It must be specified with min and max otherwise.
the children of the <meter> element are ignored.
there are also low, high and optimum attributes. Purely semantic
a tooltip can be added with the title attribute

output : the result of a calculation (semantic only)

1 + 1 = 2

progress : a progress bar.

42% : <progress>42%</progress> undetermined end as max value is unknown
73% : <progress value="73" max="100">73%</progress> known end

s : strikeout, content that is no longer accurate or relevant

~~the world is flat~~

samp : output of a program

...and the computer will display Hello (your name) !.

summary : define a visible heading for the collapsible <details> element (more : 1, 2)

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The code :

<details>
	<summary>Lorem ipsum</summary>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</details>

time : encodes modern dates and times in a machine-readable way, so that, for example, user agents could offer to add an event to the user's calendar

August 29th, 2007 at 13:58

var : a variable

in order to find x, we have to...

Details about quotation elements `<blockquote>`, `<cite>` and `<q>` (source) :

blockquote

used for quoting contents from another source (but not author or work name, see below)
as a block element, it may contain other elements such as paragraphs or lists
when mentioned, the title of the source work (book, article, movie, ...) must be placed within <cite> tags.

cite

Used to mention the title of some work (book, article, movie, ...) being quoted with <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

So far, there seems to be no consensus as for how to name an author. The only suggestion I found was basically to use <span> elements (but no non-standard author="..." element attribute).

q

inline element for short quotes
automatically adds the quoting marks

When he saw Marcus Brutus, whom he considered like his son, Caesar said Tu quoque mi fili.

To display special characters / symbols / emojis / icons

let's consider I want to display a cat (the Internetz are about catz, right? )
find the corresponding character (here, here, here or here) : U+1F63A
to insert this in your HTML code :
1. simply copy-paste the character : 😺
2. OR use its code : U+1F63A → &#x (prefix for hexadecimal code) + 1F63A + ; = 😺 → 😺

Some characters

Character name	Output	Numeric code	Symbolic code	Comment
quotation mark	"	`"`	`"`
number sign	#	`#`
dollar sign	$	`$`
ampersand	&	`&`	`&`
apostrophe	'	`'`	`'`	also used as single quote
less-than sign	<	`<`	`<`
equal 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	`‌`	`&zwnj;`	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), `&mldr;` (HTML5)
euro sign	€	`€`	`€`
superscript trademark	™	`™`
left arrow	←	`←`	`←`
up arrow	↑	`↑`	`↑`
right arrow	→	`→`	`→`
down arrow	↓	`↓`	`↓`
south east arrow	↘	`↘`	`&searr;`
page up	⇞	`⇞`
page down	⇟	`⇟`
less-than or equal to	≤	`≤`	`≤`
greater-than or equal to	≥	`≥`	`≥`
squared "+"	⊞	`⊞`		can mimic a Windows logo
triangle up	▲	`▲`		you can also display triangles or arrows with CSS there are plenty of Unicode characters to display triangles : long, short, pointing to any direction, black / white, ...
triangle right	►	`►`
triangle down	▼	`▼`
triangle left	◄	`◄`
Character name	Output	Numeric code	Symbolic code	Comment

base64 -w 0 imageFile > image.b64
base64-encoded images are approximately 33% larger than the original images
cat image.b64

embed the base64 data :

into HTML, for a standard image :

<img src="data:image/jpeg;base64,[base64-encoded data]">

into HTML, for a favicon :

<head>
	<link rel="icon" type="image/png" href="data:image/png;base64,[base64-encoded data]" />
</head>

into CSS, for a pseudo-class icon :

htmlTag:cssPseudoClass	{ content: url(data:image/png;base64,[base64-encoded data]); other CSS rules; }

Don't forget to set the media type accordingly.

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).

If you've lost the original image file, you can still retrieve it :

save the base64-encoded data into image.b64
base64 -d image.b64 > imageFile
append the right extension to imageFile : .png, .gif, .jpg, ...
if you can't remember the original file type, find out with :
- file imageFile
- or : identify imageFile

Properties mean :

a:link : not visited links
a:visited : visited links
a:hover : when the mouse pointer flies over the link
a:active : when the user activates the link
a:focus : when the link gets the focus via non-mouse control such as the TAB key.

Properties MUST be declared in this order :

a:link
a:visited
a:hover
a:active
a:focus

Tip: LoVe & HAte

HTML - Tips & snippets

Minimal HTML document

HTML : how to display images in a row ?

Nesting `<figure>` blocks

With several `<img>` in a single `<figure>` (source ) :

As a list (source ) :

How to specify the character encoding of an HTML document ?

HTML5

Details about quotation elements `<blockquote>`, `<cite>` and `<q>` (source) :

HTML special characters

To display special characters / symbols / emojis / icons

Some characters

How to embed base64-encoded images in HTML or CSS ?

If you've lost the original image file, you can still retrieve it :

HTML anchors and a:link, a:visited, a:hover, a:active and a:focus CSS pseudo-classes

Properties mean :

Properties MUST be declared in this order :

Minimal HTML document

HTML : how to display images in a row ?

Nesting <figure> blocks

With several <img> in a single <figure> (source ) :

As a list (source ) :

How to specify the character encoding of an HTML document ?

HTML5

Details about quotation elements <blockquote>, <cite> and <q> (source) :

HTML special characters

To display special characters / symbols / emojis / icons

Some characters

How to embed base64-encoded images in HTML or CSS ?

If you've lost the original image file, you can still retrieve it :

HTML anchors and a:link, a:visited, a:hover, a:active and a:focus CSS pseudo-classes

Properties mean :

Properties MUST be declared in this order :

Nesting `<figure>` blocks

With several `<img>` in a single `<figure>` (source ) :

Details about quotation elements `<blockquote>`, `<cite>` and `<q>` (source) :