HTML Guide: Inline/Phrase Elements

Element Code Note

Basic Inline Elements

Indicates strong importance for its contents.

<strong></strong> The number of ancestor <strong> elements sets the
Strong relative level of importance for a phrase. Each
(logical style) <strong>It is <strong>wise to strong element increases the importance of its
invest</strong> regularly.</strong> nested content.
Usually displays text as bolded
<em></em>
Represents stress emphasis of its contents.
Emphasis The number of ancestor <em> elements sets the
(logical style) <em>Cats are <em>cute</em>
level of stress for a phrase.
pets!</em>
Usually displays text as italics.
Defines a part of text in an alternate voice or
mood. Can be used to indicate a technical term, a
phrase from another language, a thought, or a ship
name, etc. The content of the <i> tag is usually
Italics displayed in italic.
<i></i>
(physical style) According to the HTML 5, the <i> tag should be
used as a last resort when no other tag is more
appropriate.
Emphasized text should be denoted with the <em>
tag.
Identifies a title of a work (e.g. a book, a paper, an
essay, a poem, a score, a song, a script, a film, a
TV show, a game, a sculpture, a painting, a theatre
production, a play, an opera, a musical, an
exhibition, a legal case report, etc). This can be a
work that is being quoted or referenced in detail
(i.e. a citation), or it can just be a work that is
Cite <cite></cite> mentioned in passing.
It can, additionally, be used to identify the author
of a work, oral statement, post, or tweet, etc.
Lastly, it can identify an online source, such as a
website, that is the source of an excerpt or quote.
Do not use cite for quotes.
(See examples that follows this guide)
Use for inline quoted content.
Quote <q></q> Browsers often insert quotation marks around the
quotation.
(See examples that follows this guide)

Cite attribute <q cite="URL"></q> Specifies the source URL of the quote. Do not
confuse with the Cite Element.
Small <small></small> Defines side comments such as
(physical style) small print.
Defines subscript text.
Subscript Subscript text appears half a character below the
 baseline.
(physical style)
Subscript text can be used for chemical formulas,
like H2O.
Defines superscript text.
Superscript Superscript text appears half a character above the
 baseline.
(physical style)
Superscript text can be used for footnotes, like
WWW[1]

Definition <dfn></dfn> Indicates the defining instance of the enclosed

term
The Title attribute should be present, and its value
Title attribute <dfn title="term goes here"></dfn> is the term being defined.
(See examples that follows this guide)
Indicates an abbreviated form or an acronym.
Marking up these constructs provides useful
Abbreviation <abbr></abbr> information to user agents (browsers) and tools
such as spell checkers, speech synthesizers,
translation systems and search-engine indexers.
(See examples that follows this guide)

Inline Element Examples

Using the Quote Element

<p>The boss said, <q>Things that are impossible just take longer</q>.</p>

<p>Harry Truman said, <q lang="en-us">The buck stops here.</q></p>

Using the Cite Element

<p>The book <cite>To Kill a Mockingbird</cite> was made into a movie
starring Gregory Peck.</p>

<p><cite>Universal Declaration of Human Rights</cite>, United Nations,

December 1948. Adopted by General Assembly resolution 217 A (III).</p>

Using the Quote and Cite Elements in Conjunction

<p><q>We are an international community where Member organizations, a
full-time staff, and the public work together to develop Web
standards<q>, <cite>World Wide Web Consortium ([Link])</cite>.

<p>The W3C page <cite>About W3C</cite> says the W3C's mission is

<q cite="[Link] lead the World Wide Web to its
 full potential by developing protocols and guidelines that ensure long-term
growth for the Web</q>.</p>

Using the Definition Element

<p>Kyle knows how to make applets, <dfn title="Applets">Java programs
that can be embedded on a Web page</dfn>.</p>

Using the ABBR Element

<abbr title="Miscellaneous">Misc.</abbr>

Acronym example
<abbr title="Radio Detection and Ranging">RADAR</abbr>