Inline Elements

Inline Elements are elements that only contain other inline elements. Ther do not typically begin with a new line. Other names for inline elements are 'text-level elements' or 'phrase elements'. Because they cannot contain Block Level Elements, inline elements are considered to define smaller structures than block-level elements.

In general, there are two types of inline elements, Presentational and Structural. Presentational Elements define the method of presentation of the marked-up section of text. They are used to define how the text is meant to look.

Structual Elements, on the other hand, are used to define the structural importance of the marked up text. They are used to define when the text is.

The Web Design Group has a great style guide which goes into more detail about the importance of proper usage of these elements.

Presentational Elements

<i>...</i>

Displays text in italics.

Example Code

<i>Veni, vidi, vici.</i>

Example Output

Veni, vidi, vici.

<b>...</b>

Displays text in bold font.

Example Code

<b>Arma virumque cano,</b>

Example Output

Arma virumque cano,

<u>...</u>

Underlines the surrounded text.

Example Code

<u>Alea iacta est.</u>

Example Output

Alea iacta est.

<sup>...</sup>

Displays text in superscript.

Example Code

10<sup>2</sup>

Example Output

10²

Structural Elements

<em>...</em>

Emphasis - tells the browser to emphasise the selected text. Usually displays in italics.

Example Code

<em>Si vis pacem, para bellum.</em>

Example Output

Si vis pacem, para bellum.

<strong>...</strong>

Stronger Emphasis - tells the browser to strongly emphasise the selected text. Usually displays in bold.

Example Code

<strong>Qui vult dare parva non debet magna rogare.</strong>

Example Output

Qui vult dare parva non debet magna rogare.

<code>...</code>

Tells the browser that the selected text is lines of computer code.

Example Code

<code>for (int y = 0; str[y] != '\0'; y++)</code>

Example Output

for (int y = 0; str[y] != '\0'; y++)

<acronym>...</acronym>

Denotes the text string as an acronym and provides the expanded form as well.

Example Code

<acronym title="senatus populusque Romanus">SPQR</acronym>

Example Output

SPQR