Inline Elements

About The Attributes

The following elements have several attributes in common, but some have attributes of their own.

Common Attributes

As I said in Attributes, there are several attributes common to almost all elements known as the core and language attributes. These attributes are all implied (optional) in the following elements, unless it is stated that they are required or forbidden.

Specialized Attributes

To avoid a lot of repetition, I will not mention attributes at all for the majority of the elements. In certain cases, however, I will list attributes under the following headings:

Required: These attributes must be included with the start tag. If they are not present, the validator will raise an error.
Implied: These optional attributes are specific to their respective elements.
Forbidden: These will be used to note when the core or language attributes (which are otherwise universal) are not allowed.

I will not list all implied attributes associated with each element because a) several of them are rarely used, b) are difficult to explain, and c) you can build a perfectly fine webpage without them.

The Text Span Element

Element Name: span

A good introductory element is the span element. A completely generic inline element with absolutely no semantic meaning or effect on the text, it simply contains a span of text. Thus, it is an ideal element to use when no other element will semantically do. Semantics can then be added via the class, id, and other attributes.

The span Element

What other element is good for denoting a foreign word or phrase like non sequitor or schadenfreud?

Notice what I said about attributes giving the span element its meaning: their respective class attributes both mark them as being foreign phrases or words, while their lang attributes tells you which languages they come from (Latin and German, respectively.)

The Phrase Elements

The phrase elements are elements that set apart certain phrases and either give them special meaning or make their nature clear. The phrase elements are:

abbr
acronym
cite
code
dfn
em
kbd
samp
strong
var

The Abbreviation Element

Element Name: abbr

Question:: What do HTML, Doctype, Ave, and USA all have in common?
Answer:: They're all abbreviations.

Denoting abbreviations is the task of this element, and the title attribute is used quite often to show the full name of the abbreviations in a tooltip when a mouse is hovered over the abbreviation.

The abbr Element

<abbr title="HyperText Markup Language">HTML</abbr> stands for <q>HyperText Markup Language</q>

The Acronym Element

Element Name: acronym

As the abbr element is to HTML, Doctype, Ave, and USA, so is the acronym element to NATO, URI, RADAR, and SONAR. Essentially, an acronym is a word made up of the initial letters of a name.

Technically, you could replace acronym elements with abbr elements and still be semantically correct, since an acronym is a type of abbreviation.

The acronym Element

Canada is part of <acronym title="North Atlantic Treaty Organization">NATO</acronym>

The Citation Element

Element Name: cite

The cite element is used when you want to name a source. For example, if you wanted to properly cite the source of the saying I think, therefore I am, you would put René Descartes' name within a cite element, since that is to whom the saying is attributed.

Cogito, ergo sum (Original French: Je pense donc je suis): I think, therefore I am (René Descartes).

The cite Element

<q cite="http://en.wikipedia.org/wiki/Cogito_ergo_sum">I think, therefore I am.</q> <cite>(René Descartes).</cite>

The Code Fragment Element

Element Name: code

The code element is used to contain fragments of computer codes. For example, if you wanted to include an example of HTML on your webpage, you would use the code element, since it is HTML code

The code Element
<p>An example of the <code class="el_name">cite</code> element:  <code>&lt;cite&gt;(Ren&eacute; Descartes).&lt;/cite&gt;</code></p>

The Definition Element

Element Name: dfn

The dfn element is used when including the definition of a term used in a block of text.

The dfn Element

<q cite="http://tvtropes.org/pmwiki/pmwiki.php/Main/GrumpyBear">A cynic is <dfn>a man who, when he smells flowers, looks around for a coffin</dfn>.</q> <cite>(H.L. Menken)</cite>.

The Emphasis Element

Element Name: em

Again, this element is used to add emphasis to a word or phrase.

The em Element

Do not steal library books.

The Keyboard Input Element

Element Name: kbd

This element is used to denote input that the user should enter.

The kbd Element

Please type your primary input method: <kbd>keyboard</kbd> or <kbd>mouse</kbd>.

The Sample Output Element

Element Name: samp

Unlike the code element, which denotes the actual code of a program, the samp element denotes sample output from a program.

The samp Element

The traditional output of many first programs are the words <samp>Hello World</samp>.

The Strong Text Element

Element Name: strong

The strong element is used to give words or phrases highlighting for a specific purpose. For example, a keyword for a programming language may be highlighted.

Keywords are often highlighted using the strong element.

The strong Element

Keywords are often highlighted using the <code class="el_name">strong</code> element.

The Variable Element

Element Name: var

In a lot of computer languages, you have something known as a variable which is just a storage spot for some information. Since HTML was used to describe computer languages a lot, there is an element to denote variables: the var element.

The var Element

A common name for dummy variables is <var>foo</var>. Don't ask me why.

The Presentational Elements

The presentational elements have no meaning, but exist solely to affect the appearance of text. These elements are presented to you only because they still are a part of HTML 4.01 Strict. They are:

b
big
i
small
tt

Replacing Presentational Elements.

The b, i, and tt elements all have more semantic replacements (which I'll mention when I talk about those elements).

To resize text without using the big and small elements, use a non-presentational element with a style attribute. The property that controls the size of the text is font-size. You can use any of the following measurements:

px: This stands for pixels
pt: This stands for points, which is the default measurement in many word processors such as Microsoft Word. It is equal to ¹/₇₂ of an inch.
pc: This stands for points, which is the default measurement in many word processors such as Microsoft Word. It is equal to ¹/₆ of an inch.
in: This stands for inches
cm: This stands for centimeters
em
ex: These are font-based measurements, which you can experiment with.
%: This stands for a percentage of the current size.

The advantage with the style attribute is that its use requires fewer tags (the big or small end tag is no longer necessary) and you can be more precise about the text size. With the big and small elements, you get three choices: big, small and the default.

The Bold Element

Element Name: b

The b element is used only to make text bold. A better choice is the strong element, which has the meaning of a certain type of emphasis.

The b Element

The word <q>bold</q> is in bold.

The Big Text Element

Element Name: big

This is used to make text look larger.

The big Element

You can either use the <code class="el_name">big</code> element to <big>make text big</big>, or you can use the <code class="el_name">style</code> attribute to get the same effect. One argument against the <code class="el_name">big</code> element: do you want <big>this</big> or this (which uses fewer tags)?

Using the style attribute allows you more precise control over the size of the text and lets you make any element big without adding more tags.

The Italic Element

Element Name: i

This is used to put text into italics. Better, more semantic options are:

cite
dfn
em
var

You can also use the following declaration in the style attribute: font-style:italic;

The i Element

<ul>

<li>Emphasis: <q>This is good</q></li>

<li>Citation and Definition: <q cite="http://tvtropes.org/pmwiki/pmwiki.php/Main/GrumpyBear">A cynic is <dfn>a man who, when he smells flowers, looks around for a coffin</dfn>.</q> <cite>(H.L. Menken)</cite></li>

<li>Variable: A common name for dummy variables is <var>foo</var>. Don't ask me why.</li>

<li>Italics: Good luck guessing the semantic meaning of this.</li>

</ul>

The Small Text Element

Element Name: small

The small element is used to make text look small. Remember, this sort of thing is no longer required.

The small Element

You can use the small element or use something else.

The Teletype Text Element

Element Name: tt

The tt element is used to denote monospaced text—that is, text where each character has exactly the same width. Better elements to use are code and samp, which do the same job with the added bonus of semantic meaning.

The tt Element

<dl>

<dd><code>Hello World</code></dd>

<dd>Type <kbd>Hello World</kbd> to begin</dd>

<dd>The result is: <samp>Hello World</samp></dd>

<dd>Is "<tt>Hello World</tt>" code, something to be typed, or just output?</dd>

</dl>

Specialized Elements

The elements listed here you will use out of lack of choice: they're the only elements that will serve their purpose.

The Anchor Element

Element Name: a

This element is used for creating hyperlinks to other documents—in other words, text that will take you to another page if you click on it.

Implied Attributes

href: Contains the URI the hyperlink points to. This element is implied, but essential to creating a hyperlink.
tabindex: You've probably noticed that when you hit the tab key, the focus jumps from one link to the next. The tabindex attribute sets the order in which the links gain focus. This attribute should contain an integer greater than or equal to 1, or it won't work.

The a Element

<a href="http://www.w3.org">This hyperlink leads to the home page of the World Wide Web Consortium</a>

The Bi-Directional Override Element

Element Name: bdo

The bdo element is used to override the default direction within a span of text. For example, in a paragraph which is read left-to-right, you may want a span of text in, say, the Hebrew script, which goes right-to-left instead.

Required Attributes

dir: Sets the direction of this element. Allowable values are ltr (left-to-right) and rtl (right-to-left).

The bdo Element

The Hebrew word for the Hebrew language is <bdo dir="rtl" lang="he">עִבְרִת</bdo>, which is written right-to-left. If the letters were written left-to-right, it would read <bdo dir="ltr" lang="he">עִבְרִת</bdo>

A quick note on the codes in italics: remember the NCRs I mentioned in Special Characters? These are perfect examples. Please note that in both bdo elements, the codes are written in the exact same order, but are displayed as going in opposite directions.

The Line Break Element

Element Name: br

The br element is used to force a line break where there would not otherwise be one.

This is an empty element. It has no end tag.

Forbidden Attributes

You may not use the language attributes with this element.

The line breaks are used to break up the lines in the following address:

The br Element

The line breaks are used to break up the lines in the following address:

John Doe

P.O. Box 123

Anytown ON I5F 4K3

Canada

</address>

The Button Element

Element Name: button

The button element is used to place a clickable button on the page, like this: .

The button element is unusual amongst inline elements in that can contain block elements as well—but do note it cannot contain an a element.

Implied Attributes

disabled: This attribute has only one value: disabled. It's used when you want the button present, but don't want anyone using it for some reason. The result looks like this: .
tabindex: Like the a element, this sets the order in which the tab key focuses on each button or link.

The button Element

A <button>button</button>, a <button disabled="disabled">disabled button</button>, and a <a href="http://www.w3.org"><button>button used as a link</button></a>.

The Deleted And Inserted Text Element

Element names:

del: Deleted Text Element
ins: Inserted Text Element

The del element is used for text that has been deleted, but is still included for archival purposes, while the ins element is used for text that has been inserted. The deleted text is marked by a line running through it, while inserted text is underlined.

Implied Attributes

cite: Describes the reason for the deletion.
datetime: Includes the date and time of deletion.

The del and ins Elements

del Underlined, ins In Italics

<abbr title="HyperText Markup Language">HTML</abbr> stands for HyperText <del cite="Misspelling" datetime="17:24 17 Feb. 2009">Markip</del> <ins cite="Corrected Spelling" datetime="17:24 17 Feb. 2009">Markup</ins> Language.

The Image Element

Element Name: img

The image element is simply used to put a picture on a page.

This is an empty element. It has no end tag.

Required Attributes

src: This contains the URI of the image you want to display. It works a lot like the href attribute.
alt: This is used to give a description of the image, just in case the image doesn't show up for some reason (for example, the user is using a text-only browser).

Implied Attributes

longdesc: This contains a URI that links to a longer description of the image.
name: Contains the name of the image (used for scripting, but it's better to use the id attribute).
usemap
ismap: More on these in Image Maps.

The img Element

The W3C Valid <abbr title="HyperText Markup Language">HTML</abbr> 4.01 Strict icon: <img src="./valid-html401.png" alt="Valid HTML 4.01 Strict">

The Quotation Element

Element Name: q

This element is used for short quotations. We've seen a few examples here, by both H.L. Mencken and René Descartes.

Just something you should be aware of: The quote symbols are automatic in many browers, but are absent in others, most notably older versions of Internet Explorer.

Implied Attributes

cite: This contains the URI of your source (if it is indeed online).

The q Element

<q cite="http://en.wikipedia.org/wiki/Cogito_ergo_sum">I think, therefore I am.</q> <cite>(René Descartes).</cite>

<q cite="http://tvtropes.org/pmwiki/pmwiki.php/Main/GrumpyBear">A cynic is <dfn>a man who, when he smells flowers, looks around for a coffin</dfn>.</q> <cite>(H.L. Menken)</cite>

The Subscript Element

Element Name: sub

Subscript text is usually placed lower than the rest of the text and is smaller. To denote this, the sub element is used.

The sub Element

The chemical formula for water is H2O (Two hydrogen atoms and one oxygen atom). This element can also be used to make fractions, such as 1/2.

The Superscript Element

Element Name: sup

Occasionally, text will appear smaller and higher than the rest of the text. This is the use of the sup element.

The sup Element

Ordinal numbers (first, second, third) are often abbreviated like this: 1st, 2nd, 3rd. This element can also be used to make fractions, such as 1/2.