If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

HTML provides elements for styling text, which fall into two main categories: logical styles and physical styles. These elements give you basic control over text appearance. For more advanced styling, use CSS; see “Font Control”.

Logical Styles

Logical style elements convey meaning about the text, not just how it looks. For example, the em element indicates emphasis. Some commonly used logical style elements include:

em

Emphasizes text, usually italic by default.

Please do <em>not</em> feed the monkeys.

strong

Strongly emphasizes text, usually bold by default.

<strong>WARNING:</strong> Never feed the monkeys under any circumstances.

cite

Indicates a citation or reference, usually italic.

Refer to <cite>The Dangers of Monkey Feeding, Vol. 2</cite> for more details.

dfn

Defines a term, typically when it appears for the first time, usually italic.

Monkeys have sharp <dfn>canines</dfn> for biting.

code

Represents computer code. Rendered in a monospaced font.

<code>10 PRINT "I LOVE MONKEY CHOW"<br>
20 GOTO 10</code>

Logical style elements convey meaning, not presentation. For instance, em, dfn, and cite might all default to italic, but the italics are just a browser convention. You can override this styling using CSS, e.g., making all em text red and bold (see Font Control).

Using distinct elements for different purposes allows semantic markup, which can improve accessibility, search engine optimization, and programmatic data extraction. The key takeaway: cite represents a citation, not just italic text.

Inline vs. Block Elements

Logical and physical style elements are inline elements; they don’t create line breaks on their own:

<p>
1. This is a paragraph with a section of <em>emphasized text</em> inside of it.
</p>

<em>
2. This is a section of emphasized text with
<p>a paragraph</p> inside of it.
</em>

The first example creates a single block with some emphasized text. In the second, the p element creates separate blocks within the em element.

Physical Styles

Physical style elements directly affect appearance without implying meaning. Examples include:

b

Makes text bold. Use for stylistic emphasis, like product names.

Our new product, <b>Neutrinozon</b>, is now available!

i

Makes text italic. Use for ship names, thoughts, or terms in foreign languages.

The warship <i>I.S.S. Hood</i> was deployed last month.

sub

Creates subscript text. Common in chemical or mathematical notation.

H<sub>2</sub>O represents water.

sup

Creates superscript text. Useful for footnotes, exponents, and scientific notation.

2x<sup>3</sup> equals 8x³.

Physical Styles vs. Semantic Markup

Physical styles affect appearance directly, while logical styles convey meaning. For example, strong means "important," whereas b just means "bold." Both have their place. Use i, b, sub, and sup appropriately when meaning isn’t necessary, such as ship names or mathematical notation.

For instance:

1. My grandfather served on the <i>U.S.S. Maine</i>.

2. My grandfather served on the <em>U.S.S. Maine</em>.

Here, i is correct for the ship name, while em would imply emphasis in speech - not what we intend.

Superscripts also carry semantic meaning in math: 2<sup>x</sup> is mathematically distinct from 2x. The physical styling conveys important information, not just appearance.