HTML - Tips & snippets

mail

Minimal HTML document

<!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>
mail

HTML : how to display images in a row ?

View the page source for details of each method

Nesting <figure> blocks

caption
caption

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

As a list (source ) :

mail

How to specify the character encoding of an HTML document ?

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

HTML5

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

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
this figure could as well be a video, a table, ...
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
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.

mail

HTML special characters

To display special characters / symbols / emojis / icons

  1. let's consider I want to display a cat (the Internetz are about catz, right? )
  2. find the corresponding character (here, here, here or on this HEAVY page) : U+1F63A
  3. 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 + ; = &#x1F63A; → 😺

Some characters

Character nameOutputNumeric codeSymbolic codeComment
quotation mark"&#34;&quot;
number sign#&#35;
dollar sign$&#36;
ampersand&&#38;&amp;
apostrophe'&#39;&apos;also used as single quote
less-than sign<&#60;&lt;
equal sign=&#61;&equals;
greater-than sign>&#62;&gt;
back slash\&#92;
non-breaking space&#160;&nbsp;
inverted exclamation¡&#161;&iexcl;
cent sign¢&#162;&cent;
pound sterling£&#163;&pound;
general currency sign¤&#164;&curren;
yen sign¥&#165;&yen;
broken vertical bar¦&#166;&brvbar;
copyright©&#169;&copy;
left angle quote, guillemotleft «&#171;&laquo;
not sign¬&#172;&not;
registered trademark®&#174;&reg;
degree sign °&#176;&deg;
plus or minus±&#177;&plusmn;"more or less" sign
superscript two²&#178;&sup2;
superscript three³&#179;&sup3;
acute accent´&#180;&acute;
micro signµ&#181;&micro;
paragraph sign&#182;&para;
middle dot·&#183;&middot;
cedilla¸&#184;&cedil;
superscript one¹&#185;&sup1;
masculine ordinalº&#186;&ordm;
right angle quote, guillemotright»&#187;&raquo;
fraction one-fourth¼&#188;&frac14;
fraction one-half½&#189;&frac12;
fraction three-fourths¾&#190;&frac34;
inverted question mark¿&#191;&iquest;
capital A, grave accentÀ&#192;&Agrave;
capital A, circumflex accentÂ&#194;&Acirc;
capital AE diphthong (ligature)Æ&#198;&AElig;
capital C, cedillaÇ&#199;&Ccedil;
capital E, grave accentÈ&#200;&Egrave;
capital E, acute accentÉ&#201;&Eacute;
capital E, circumflex accentÊ&#202;&Ecirc;
capital E, dieresis or umlaut markË&#203;&Euml;
capital I, circumflex accentÎ&#206;&Icirc;
capital O, circumflex accentÔ&#212;&Ocirc;
multiply sign×&#215;&times;
capital O, slashØ&#216;&Oslash;
capital U, grave accentÙ&#217;&Ugrave;
capital U, circumflex accentÛ&#219;&Ucirc;
small a, grave accent à&#224;&agrave;
small a, circumflex accentâ&#226;&acirc;
small ae diphthong (ligature)æ&#230;&aelig;
small c, cedillaç&#231;&ccedil;
small e, grave accentè&#232;&egrave;
small e, acute accenté&#233;&eacute;
small e, circumflex accentê&#234;&ecirc;
small e, dieresis or umlaut markë&#235;&euml;
small i, circumflex accentî&#238;&icirc;
small n, tildeñ&#241;&ntilde;
small o, circumflex accentô&#244;&ocirc;
division sign÷&#247;&divide;
small o, slashø&#248;&oslash;
small u, grave accentù&#249;&ugrave;
small u, circumflex accentû&#251;&ucirc;
Greek small letter betaβ&#946;&beta;
en dash&#8211;&ndash;used to represent a number range : the 20172018 season
zero-width non-joinernon-printable&#8204;&zwnj;used to have HTML content while nothing is displayed, which prevents empty lines from being minified.
em dash&#8212;&mdash;used by pair to emphasize on something without using parentheses
horizontal ellipsis&#8230;&hellip; (HTML4), &mldr; (HTML5)
euro sign&#8364;&euro;
superscript trademark&#8482;
left arrow&#8592;&larr;
up arrow&#8593;&uarr;
right arrow&#8594;&rarr;
down arrow&#8595;&darr;
south east arrow&#8600;&searr;
page up&#8670;
page down&#8671;
less-than or equal to&#8804;&le;
greater-than or equal to&#8805;&ge;
squared "+"&#8862;can mimic a Windows logo
triangle up&#9650;
triangle right&#9658;
triangle down&#9660;
triangle left&#9668;
Character nameOutputNumeric codeSymbolic codeComment
mail

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

  1. base64 -w 0 imageFile > image.b64
  2. cat image.b64
  3. 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 :

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

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

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 :

  1. a:link
  2. a:visited
  3. a:hover
  4. a:active
  5. a:focus
Tip: LoVe & HAte