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
102

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

[ Back | Home | Next ]