HTML Summary through Examples

This is a paragraph (p). This page is designed to act as an aide-de-mémoire for the most frequently used constructs in HTML. To see how the following effects are achieved, you can select "Source file" from the "View" menu at the top of your window.

Subsection (level-2 heading, (h2))

  1. This is the first point (li) in an ordered list (ol)
  2. This is the second point
This is the first title (dt) in a definition list (dl)
This is the first item's definition (dd)
This is the second title in the definition list
This is the second item's definition

Above is a horizontal ruling (hr). This paragraph also demonstrates the use of bold (b), italic (i), underlined (u), and teletype (tt) text, and the default emphasis (em) and strong (strong).
This final sentence of this paragraph first has a break (br), to start it on a new line.

Images (img src="filename"), such as logic gate, can be embedded in with text and other objects. They display more cleanly by specifying their width and height (in pixels, as in width=309 height=197) in advance, as in the next example.

Brief textual description of the image
This paragraph is centered (center)
(it could equally have been a table, list, image, paragraph, etc.).
This is a block of text (blockquote), indented, and treated as a quote.
 This is a pre-formated block of text (pre),
                                 printed out as it stands.
Using a table to implement split columns. Content of left side. Content of right side.

Commentary

This is the northwest corner of a 3x3 table (table) with borders

north (without paragraph tags) the northeast corner is pink and advises the browser to set the width of this column to 33%
This rectangle straddles the west and southwest squares, and is yellow This rectangle straddles the centre and east squares, and is a colour resulting from 3F of red (out of FF for the full amount in hexadecimal), C7 of green, and AE of blue
The font colour and size can be changed southeast (normally (th) is used for header cells)

Special characters

The following are not complete lists, but just examples of codes that allow special characters to be printed, in addition to the traditional ASCII character set of: non-breaking space(nbsp) ! " # $ % &(amp) ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; <(lt) = >(gt) ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | }

First, some have special names in HTML, such as the accented letters (accute (xaccute), grave (xgrave), circumflex (xcirc), umlaut (xuml)) and a few other symbols: á à â ä é è ê ë í ì î ï ó ò ô ö ú ù û ü ç (ccedil) ø (oslash)
and certain special symbols: ± (plusmn) ≤ (le) ≠ (ne) ≥ (ge) ∝ (prop) ∠ (ang) ∂ (part) ∫ (int) ∑ (sum) ∏ (prod) ∞ (infin) ∃ (exist) ∅ (empty) ∪ (cup) ∩ (cap) ∧ (and) ∨ (or) ¬ (not) µ (micro) £ (pound) € (euro) ™ (trade) © (copy) ® (reg)

If any of these are unsupported by older browsers, they (plus a few others) can perhaps be obtained using their Unicode values. The following nested table, the outer one with no border, gives a few examples.

&#8211; En dash
&#8212; Em dash
&#8216; Single left quote
&#8217; Single right quote
&#8364; Euro (euro)
&#8463; Reduced Planck's constant
&#8482; Trade mark (trade)
&#8706; Partial diff (part)
&#8707; Existence (exist)
&#8709; Empty (empty)
&#8710; Div
&#8711; Grad
&#8712; Member
&#8713; Not member
&#8719; Product (prod)
&#8721; Sum (sum)
&#8729; Dot
&#8730; Square root
&#8733; Proportional (prop)
&#8734; Infinity (infin)
&#8736; Angle (ang)
&#8743; And (and)
&#8744; Or (or)
&#8745; Cap (cap)
&#8746; Cup (cup)
&#8747; Integral (int)
&#8756; Therefore
&#8773; Approx equal
&#8776; Approx
&#8800; Not equal (ne)
&#8801; Identically equal
&#8804; Less or equal (le)
&#8805; Greater or equal (ge)

On most browsers, the letters of the Greek alphabet are available via their mnemonics. Again, if this fails, they can be obtained using their Unicode values. The following gives the Unicodes for the upper and lower case letter in parenthesis, respectively.

Α α (Alpha &#913; alpha &#945;); Β β (Beta &#914; beta &#946;); Γ γ (Gamma &#915; gamma &#947;); Δ δ (Delta &#916; delta &#948;); Ε ε (Epsilon &#917; epsilon &#949;); Ζ ζ (Zeta &#918; zeta &#950;); Η η (Eta &#919; eta &#951;); Θ θ (Theta &#920; theta &#952;); Ι ι (Iota &#921; iota &#953;); Κ κ (Kappa &#922; kappa &#954;); Λ λ (Lambda &#923; lambda &#955;); Μ μ (Mu &#924; mu &#956;); Ν ν (Nu &#925; nu &#957;); Ξ ξ (Xi &#926; xi &#958;); Ο ο (Omicron &#927; omicron &#959;); Π π (Pi &#928; pi &#960;); Ρ ρ (Rho &#929; rho &#961;); Σ ς σ (Sigma &#931; &#962; sigma &#963;); Τ τ (Tau &#932; tau &#964;); Υ υ (Upsilon &#933; upsilon &#965;); Φ φ (Phi &#934; phi &#966;); Χ χ (Chi &#935; chi &#967;); Ψ ψ (Psi &#936; psi &#968;); Ω ω (Omega &#937; omega &#969;)

There are many types of arrow character, from 8592 to 8703. Some of these are special cases, and are also named, including: left (larr, 8592, ←), up (uarr, 8593, ↑), right (rarr, 8594, →), down (darr, 8595, ↓), left+right (harr, 8596, ↔), up+down (8597), nw (8598), ne (8599), se (8600), sw (8601); and the corresponding double-arrows: left (lArr, 8656, ⇐), right (rArr, 8658, ⇒), left+right (hArr, 8660, ⇔).

ΔE.Δt≥ℏ/2 (≡h/4.π)

This is a hyperlink to an anchor point (a) that leads back to the top of this current page. This is a hyperlink to another page, such as the home page, of the same web site, or to an anchor point part way down another page. This is a hyperlink to a page on a completely different web site.

© Malcolm Shute, Valley d'Aigues Research, 2006-2022