Lecture 7: Inline Elements

Overview:

Inline Elements
Emphasizing Text
Increasing / Decreasing Text Size
Quotes and Citations
Code, Variables, and Sample Output
Spanning Text
Subscripts and Superscripts
Teletype Text
Inserted and Deleted Text
Acronyms and Abbreviations
Definitions
User Input
Deprecated Inline Elements

Inline Elements

Inline elements are tags that surround text content. This could range from a single character to a paragraph or more. These tags extend only as far as their content; they do not extend across the page like block-level elements.
Inline tags do not create extra vertical space on the lines above/below and do not force subsequent content to new lines.
Inline tags can be nested inside other inline tags, as long as the inner set of tags is closed before the outer set of tags.
Block-level tags cannot be nested inside inline tags (with the one exception of ) because that violates proper document structure. Inline tags can, of course, be nested inside block-level tags.
Important: If you are using XHTML 1.0 Strict as your doctype, all inline tags need to be inside a block-level container element, as well as all text content.

Emphasizing Text

There are four tags used for emphasis. Two are more presentationally focused, while the others leave it up to the client to determine appearance. None of these are deprecated.
The two presentationally-focused tags are (boldface) and (italic), which have the indicated visual effect in browsers. I recommend against the use of these tags because they are prescribing visual appearance and that effect may not be ideal for the device (for example, italicizing text may reduce readability of small text on a handheld device).
The tags that let the device choose how to render their content are (strong emphasis) and (emphasis). In desktop browsers renders as boldface and renders as italic, so we are not losing any visual effects.

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Emphasis in (X)HTML</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <p>Some text in this paragraph <strong>shows strong emphasis</strong>
    and other text is <em>just emphasized</em>.</p>
</body>
</html>

See how this example renders

Increasing / Decreasing Text Size

In (X)HTML text sizes range from 1 (small) to 7 (huge). By default, text is size 3. For a large number of websites the deprecated tag is used to set these sizes, but we will not be using that tag since it is entirely focused on presentation.
The <big> </big> tag is not deprecated and, in browsers, will increase text size to 4. In other user agents, the results could differ.
The tag is not deprecated and, in browsers, will decrease text size to 2. In other user agents, the results could differ.

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Modifying Text Size in (X)HTML</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <p>Some text in this paragraph <big>is a bit larger</big>
    and other text is <small>a bit smaller</small>.</p>
</body>
</html>

See how this example renders

Quotes and Citations

These inline tags are used to mark up quoted material, indicating the person who said it (surrounded by <cite> </cite>) and short quotations (surrounded by <q> </q>)
Browsers usually render <cite> </cite> content as italicized.
The difference between the block-level <blockquote> and the inline <q> is that the former is used for long passages that are a paragraph or multiple paragraphs; the latter is used for short quotes.
Content inside of <q> </q> has quotation marks added during rendering (in some browsers; IE does not add these); if you specify the lang or xml:lang attribute the quotation marks could be displayed differently (based on conventions in that language). For example, in English double quotes are used and if a quotation is nested inside another quotation the inner set uses single quotes (in Firefox).

Attribute	Usage and Effect	Values Accepted	Default	Deprecated?
cite	Only used for <q> and not for <cite>. Contains the URL of the cited text.	Text (usually a web address)		Not deprecated

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Inline citations and quotes in (X)HTML</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <p><cite>Jason Withrow</cite> has been known to say:
    <q>Separate structure and presentation in your code!</q></p>

    <p><cite>Jason</cite> also has quoted others:
    <q>My students usually say <q>Web design is fun!</q> and I agree.</q>
    </p>
</body>
</html>

See how this example renders

Code, Variables, and Sample Output

<code> </code> tags are used to mark up a piece of computer code that appears as part of your page content. Content is usually rendered in a monospace font (all character are equal width).
<var> </var> tags are used to mark up a variable that appears as part of your page content. Content is usually italicized.
<samp> </samp> tags are used to mark up sample output that appears as part of your page content. Content is usually rendered in a monospace font (all character are equal width).

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Code, variables, and sample output in (X)HTML</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <p>The variable <var>x</var> was defined in this Javascript:</p>

    <code>var x = 'Hello World!';</code>

    <p>And so the result was:</p>

    <samp>Hello World!</samp>
</body>
</html>

See how this example renders

Spanning Text

The tags are generic inline tags with no browser defaults for appearance.
They are used when no other tag is appropriate and some markup is needed for text. One example is a change in language for a word or words; the lang and/or xml:lang attribute can be used inside the .
Typically the is styled via CSS.

Subscripts and Superscripts

Some content, such as mathematical and scientific information, needs to have subscripts or superscripts applied to communicate meaning. Other times you might be specifying footnotes.
Subscripts are coded as
Superscripts are coded as
Note that these will alter the spacing between lines of text because of the space needed for the superscript or subscript; this cannot be avoided.

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Subscripts and Superscripts in (X)HTML</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <p>The chemical composition was O<sub>2</sub> and<br />
    H<sub>2</sub>, as referenced in the research<sup>3</sup></p>
</body>
</html>

See how this example renders

Teletype Text

Teletype text is surrounded by <tt> </tt> tags.
This text is rendered in a monospace font (all characters are the same width).
While this tag is not deprecated, it is presentational in nature and the use of CSS with would be preferable.

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Teletype Text in (X)HTML</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <p>The code for you to enter is: <tt>00343</tt></p>
</body>
</html>

See how this example renders

Inserted and Deleted Text

When a document is changed over time (perhaps multiple authors are editing the document prior to publication), the <ins> </ins> tag can be used to denote inserted text and the <del> </del> tags to denote text to be deleted.
<ins> </ins> content is generally underlined.
<del> </del> content is generally rendered with a strike through the text (a horizontal line runs through the midline of the text).
In addition to the attributes noted for these tags, the title attribute can be used to provide an explanation of the changes. This usually will render in a tooltip.
Gecko-based browsers show the values for the cite and datetime attributes, if the inserted and/or deleted content is right-clicked and 'Properties' is chosen.

Attribute	Usage and Effect	Values Accepted	Default	Deprecated?
cite	Contains the URL where the reason for the change is explained.	Text (usually a web address)		Not deprecated
datetime	The date and time the change was made.	Date (such as YYYYMMDD)		Not deprecated

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Inserted and Deleted Text in (X)HTML</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <p>XHTML is used for
    <ins cite="http://www.w3.org/MarkUp/" datetime="20060515">structural</ins>
    <del datetime="20060515">presentational</del> markup.</p>
</body>
</html>

See how this example renders

Acronyms and Abbreviations

Acronyms are coded as <acronym> </acronym> and the title attribute is used for the full text. Browsers show the title value as a tooltip and adaptive technology would read/output that full text. Most modern browsers render the content inside the tags with a dotted underline; IE does not show this unless CSS is used to specify that appearance.
Abbreviations are coded as <abbr> </abbr> and the title attribute is used for the full text. Browsers show the title value as a tooltip and adaptive technology would read/output that full text. IE 6 and earlier are the only modern browsers that do not support abbreviations (IE 7 added support); IE 6 and below ignore the tag. Supportive modern browsers render the content inside the tags with a dotted underline, except for IE 7 which does not alter the text appearance.
After extended debate concerning how <acronym> </acronym> and <abbr> </abbr> differ (and whether both are needed), the W3C has embraced <abbr> </abbr> in the latest version of XHTML and deprecated <acronym> </acronym>, although both remain part of the standard in XHTML 1.0

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Acronyms and Abbreviations in (X)HTML</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <p><acronym title="Washtenaw Community College">WCC</acronym>'s
    address is: 4800 <abbr title="East">E.</abbr> Huron River
    <abbr title="Drive">Dr.</abbr> <abbr title="Post Office">P.O.</abbr>
    Box D-1 Ann Arbor, <abbr title="Michigan">MI</abbr> 48106</p>
</body>
</html>

See how this example renders

Definitions

Definitions are coded as <dfn> </dfn> and can be used for a term the first time it is used in a document.
These generally render as italicized text.
The title attribute is often used to hold the definition.

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Definitions in (X)HTML</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <p><dfn title="Cascading Style Sheets">CSS</dfn> stands
    for Cascading Style Sheets.</p>
</body>
</html>

See how this example renders

User Input

Coded as <kbd> </kbd>, this indicates text to be entered by the user (via the keyboard).
These generally render in a monospaced font (all characters are equal width).

Sample code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>User input in (X)HTML</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <p>To proceed, enter <kbd>knock-knock</kbd></p>
</body>
</html>

See how this example renders

Deprecated Inline Elements

These tags have been deprecated either because of their presentational nature (since XHTML is supposed to be about structure, not presentation) or because another tag exists that takes their place.
These are tags you should never use, but you will see them in a number of websites so you should recognize them. If asked to update a website using these deprecated tags you should also know how to replace them with more acceptable approaches.

Element	Usage and Effect	Preferred Approaches
<font> </font>	Still widely used to set the font in use (via the deprecated face attribute), text color (via the deprecated color attribute), and text size (via the deprecated size attribute).	CSS is the ideal approach, applied to a non-presentational tag.
<basefont />	Specified inside of <head> </head> and used to set the font appearance for the entire page. Accepts the same deprecated attributes as <font>.	CSS is the ideal approach.
<strike> </strike>	Renders text with a line through it, at the midline of the character.	CSS is the ideal approach; there is a property that handles this effect.
<s> </s>	Renders text with a line through it, at the midline of the character.	CSS is the ideal approach; there is a property that handles this effect.
<u> </u>	Renders text with an underline. This presents major usability issues, because users expect underlined text to be a link.	CSS is the ideal approach; there is a property that handles this effect.