Login | Contact Us | Site Map | Resources

Basic HTML

Home > HTML Tutorial > Inline HTML Elements

Inline HTML Elements

Inline HTML elements format text without interrupting the flow of the text. They fit right in, taking up only as much room as they need and not forcing new lines before or after. They can format a single character, or a infinite number of characters at a time. Inline elements can be used inside of block-level elements, but inline elements cannot contain block-level elements. They can only contain text and other inline elements.

The link element, <a> </a>, and the image element, <img>, are both inline HTML elements. You can learn more about links and images on separate pages.

HTML New Lines & Line Breaks

What is the difference between a new line and a line break? Only the spelling! The use of the HTML <br /> tag forces the line to be broken (line break) and to continue on the next line (new line). An example of the code is:

<p>Where was the Declaration of Independence signed?<br />At the bottom!</p>

This code will result in:

Where was the Declaration of Independence signed?
At the bottom!

Using a line break is the HTML equivalent of pressing the "enter" key on your keyboard.

The Span Element

The <span> element is the inline equivalent to the <div> element. The span element has no actual meaning of its own, but is an invaluable tool when used for the purpose of CSS styling. It can act as a container for small sections of text, or even a single character that CSS can then be applied to without affecting the surrounding text.

<p>This element can be <span>slipped right in</span> a block of text without interrupting the output.</p>

Learn more about how to utilize this element over at our CSS tutorial.

Presentational Elements

HTML was originally created as a structural language, to which presentational, or visual elements were later added. CSS came along even later, and is now the preferred method of formatting/styling webpage content. HTML still supports several presentational elements which can be used, although their use is discouraged, and CSS styling is encouraged.

The valid presentational elements, along with the result of each element, are:

HTML ElementWhat the Element Does
<b> </b>Makes Font Bold
<strong> </strong>Strong Emphasis, Conveyed By Making Font Bold
<i> </i>Italicizes Font
<em> </em>Emphasis, Conveyed By Italicizing Font
<big> </big>Increases Font/Text Size
<small> </small>Decreases Font/Text Size
<tt> </tt>Typewriter-Like Fixed-Width Font
<bdo dir="ltr"> </bdo>Displays Text Left to Right, As Normal
<bdo dir="rtl"> </bdo>Displays Text Right to Left, Not As Normal
<cite> </cite>A Citation Referencing a Quotation, Book, Website, Copyright Etc.
<del> </del>Deleted Content Shown With Line Down Through Middle of Text
<ins> </ins>Inserted Content Shown With Underline, Usually Used Alongside DEL Tag
<q> </q>Marks A Short Quotation
<sub> </sub>Subscript Text That Forces Characters Below the Baseline
<sup> </sup>Superscript Text That Forces Characters Above the Baseline

There are several presentation elements that have been deprecated, or become obsolete in current versions of HTML, and should not be used. They are easily replaced by their CSS equivalents.

HTML ElementWhat the Element Does Did
<font> </font>Controlled Font Size, Type, Color, Etc.
<strike> </strike> and <s> </s>Strike-Through Text
<u> </u>Underlined Text

Phrase Elements

Phrase elements are new additions to the HTML family, added in the current version (HTML 4.0). They normally appear similar to links on the webpage, but are not linked to anything. Instead, when the mouse pointer hovers over one of these elements the definition will show up in a little box.

HTML ElementWhat the Element Does
<abbr title=""> </abbr>Marks And Defines An Abbreviation
<abbr title=""> </abbr>Marks And Defines An abbr

Computer Phrase Elements

These elements will probably only be useful if your webpage is, like this webpage, involved in the discussion of various computer codes/languages and their results, or terminal output. So if you did not completely understand that last sentence, you probably won't need to study the following elements.

HTML ElementWhat the Element Does
<code> </code>Indicated A Snippet of Code, Usually In Monospace Font
<samp> </samp>Indicated Sample Output From A Program or Script
<kbd> </kbd>Indicates That Text Should Be Typed On Keyboard
<var> </var>Indicates a Variable From a Computer Program.

If you have learned everything on this page after reading through it once... you're a lot smarter than I am. So if you need to refer back later, you know where to find it!