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 large sections, 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 flow.</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 various presentational elements -- most, but not all being inline -- are:

HTML Element	What 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
<u> </u>	Underlines Text
<mark> </mark>	Marks Text
<small> </small>	Decreases Font/Text Size
<bdi> </bdi>	Bi-Directional Isolation
<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
<abbr title=""> </abbr>	Marks and Defines An Abbreviation
<dfn> </dfn>	Defines the First Instance of a Term

There are several presentation elements that have been deprecated -- become obsolete -- in or before HTML5, and should no longer be used. They are more efficiently replaced by the use of existing elements and CSS working together. Commen example of the deprecated elements are:

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

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.

If you do understand what I'm talking about, these elements are what you will need, in order to make code and characters appear and/or stand out on a webpage.

HTML Element	What 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.
<rp> </rp>	Ruby Parenthesis
<rt> </rt>	Ruby Text
<ruby> </ruby>	Ruby Annotation

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