HyperText Markup Language (HTML) Reference
Kip Landergren
(Updated: )
My cheat sheet for HyperText Markup Language (HTML) covering entities, authoring tips, and helpful resources.
Contents
Entities
Reserved Characters
| & | & |
| > | > |
| < | < |
| " | " |
Named Characters
| © | © |
WHATWG official Named Character Reference
Unicode Characters
| decimal form | &# + nnnn + ; |
| hexidecimal form | &#x + hhhh + ; |
Wikipedia’s List of Unicode characters.
Semantics and Structure of HTML Document Structure
Elements
An element’s content model describes the content inside the element. Each element also belongs to zero or more content categories that group together elements with similar characteristics.
Authoring
Element Overview
Text-Level Semantics
<b> (MDN, WHATWG) |
“bring attention to”, without additional implication; do not use for styling text |
<code> (MDN, WHATWG) |
use when representing a fragment of computer code |
<em> (MDN, WHATWG) |
connote stressed emphasis relative to the surrounding text (e.g. words / phrases that affect meaning of a sentence based on their interpretation |
<i> (MDN, WHATWG) |
set a range of text off from its surrounding text (e.g. technical terms, foreign language phrases, or words pronounced without additional emphasis) |
<kbd> (MDN, WHATWG) |
use when representing text input by the user |
<s> (MDN, WHATWG) |
use for text no longer relevant or no longer accurate; do not use for indicating edits (use <del> or <ins> |
<samp> (MDN, WHATWG) |
use when representing text output by a computer program, such as a message or menu |
<small> (MDN, WHATWG) |
side comment, small print; does not reduce, or connote, text emphasis |
<span> (MDN, WHATWG) |
does not mean anything on its own, but can be combined with attributes to convey wrapped text meaning |
<strong> (MDN, WHATWG) |
indicate importance, seriousness, or urgency |
<sub> (MDN, WHATWG) |
subscript |
<sup> (MDN, WHATWG) |
superscript |
<var> (MDN, WHATWG) |
a variable; can be used in prose, mathematical formulas, or programming content |
Forms
<input> (MDN, WHATWG) |
a typed data field, usually with a form control to allow the user to edit the data |
Frequently Confused
<b> vs. <strong> and <i> vs. <em>
- use
<b>when something needs attention without implying anything special about the text. - use
<strong>when something is serious or urgent. - use
<i>for technical terms or foreign language phrases. - use
<em>when a word’s interpretation and implication are critical to communication.
Generally: prefer <strong> and <em>, as they have semantic meaning.
<del> vs. <ins> vs. <strike> vs. <s>
- use
<del>or<ins>for text editing - use
<s>for no longer relevant or accurate text - do not use
<strike>; it is deprecated
<kbd> vs. <samp> vs. <code>
- use
<kbd>when the user should type something - use
<samp>for:- program or system output
- filenames or directory names
- menu text
- shell or REPL examples that include the prompt and/or output
- fragments of commands (e.g. go get)
- program names (e.g. launchctl)
- use
<code>for standalone (e.g. may be stored in a file or invoked within a shell or REPL)- computer code
- markup
- character entities / unicode points
Generally: use <code> when the containing text may be copied, pasted, and executed as-is
Tips
- indent two spaces
- use
<h1 />elements only for top-level headings - use dashes instead of underscores
- lowercase filename
Resources
- WHATWG HTML Spec (One-Page Version)
- MDN HTML Reference
- Character Entity Reference for characters like ∑ and ♠
MDN use cases:
- quick look ups
- browser compatibility
WHATWG use cases:
- unambiguous definitions
- need the authority
- great examples and descriptions