HTML Tags: Others – Inline

These are the rest of the HTML block tags.

Tag	Type	Description
Bold/italic equivalents
`<em>`	Inline	Represents an emphasis on text (italic)
`<strong>`	Inline	Represents a strong importance on text (bold)
Text semantics
`<abbr>`	Inline	Represents an abbreviation
`<cite>`	Inline	Represents a citation
`<dfn>`	Inline	Represents a definition
`<mark>`	Inline	Represents a marked/highlighted text
`<q>`	Inline	Represents a short quotation
`<small>`	Inline	Represents a small print
`<time>`	Inline	Represents a time
`<var>`	Inline	Represents a variable (e.g. in math)
`<code>`	Inline	Represents a fragment of code
`<kbd>`	Inline	Represents a keyboard input
`<samp>`	Inline	Represents a sample program output
Text directionality
`<bdi>`	Inline	Isolates the directionality of a text
`<bdo>`	Inline	Overrides the directionality of a text
Ruby
`<ruby>`	Inline	Represents small annotations for a text (e.g. a pronunciation guide)
`<rt>`	Inline	Represents a ruby text
`<rp>`	Inline	Represents a ruby fallback parenthesis
Misc.
`<data>`	Inline	Associates content with machine-readable data
`<wbr>`	Inline	Denotes a word-break oppurtunity

``

Represents an emphasis on text. Usually rendered as an italic text.

 represents stress emphasis of its contents
 represents text that is set off from the normal prose (e.g. a foreign word, fictional character thoughts, etc.)
<cite> should be use for any title of work (e.g. book/movie title)

Stealing my lunch will <em>not</em> be forgiven.

Stealing my lunch will <em>not</em> be forgiven.

| LIVE PREVIEW

Stealing my lunch will not be forgiven.

``

Represents a strong importance on text. Usually rendered as a bold text.

 represents content with strong importance
 is used to draw attention to text without indicating that it's more important

<strong>Warning!</strong> This content is <strong>very dangerous.</strong>

<strong>Warning!</strong> This content is <strong>very dangerous.</strong>

| LIVE PREVIEW

Warning! This content is very dangerous.

`<abbr>`

Represents an abbreviation.

You can use <abbr title="Cascading Style Sheets">CSS</abbr> to style your
<abbr title="HyperText Markup Language">HTML</abbr>.

You can use <abbr title="Cascading Style Sheets">CSS</abbr> to style your
<abbr title="HyperText Markup Language">HTML</abbr>.

| LIVE PREVIEW

You can use CSS to style your HTML.

`<cite>`

Represents a citation.

<p>More information can be found in <cite>[ISO-0000]</cite>.</p>

<p>
  First sentence in
  <cite><a href="http://www.george-orwell.org/1984/0.html">Nineteen Eighty-Four</a></cite>
  by George Orwell (Part 1, Chapter 1).
</p>

<p>More information can be found in <cite>[ISO-0000]</cite>.</p>

<p>
  First sentence in
  <cite><a href="http://www.george-orwell.org/1984/0.html">Nineteen Eighty-Four</a></cite>
  by George Orwell (Part 1, Chapter 1).
</p>

| LIVE PREVIEW

More information can be found in [ISO-0000].

First sentence in Nineteen Eighty-Four by George Orwell (Part 1, Chapter 1).

`<dfn>`

Represents a definition (a term being defined).

<dfn>Sashimi</dfn> is a type of dish made of raw fish.

<dfn>Sashimi</dfn> is a type of dish made of raw fish.

| LIVE PREVIEW

Sashimi is a type of dish made of raw fish.

``

Represents a marked/highlighted text.

The following is clear: <mark>my lunch was stolen</mark>.

The following is clear: <mark>my lunch was stolen</mark>.

| LIVE PREVIEW

The following is clear: my lunch was stolen.

`<q>`

Represents a short quotation.

Possible attributes

cite=[...] — URL to the source of quotation

<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q -->
When Dave asks HAL to open the pod bay door, HAL answers:
<q cite="https://www.imdb.com/title/tt0062622/quotes/qt0396921"
  >I'm sorry, Dave. I'm afraid I can't do that.</q
>

<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q -->
When Dave asks HAL to open the pod bay door, HAL answers:
<q cite="https://www.imdb.com/title/tt0062622/quotes/qt0396921"
  >I'm sorry, Dave. I'm afraid I can't do that.</q
>

| LIVE PREVIEW

When Dave asks HAL to open the pod bay door, HAL answers: I'm sorry, Dave. I'm afraid I can't do that.

``

Represents a small print.

<p>Feel the power*</p>
<small>*) Batteries not included</small>

<p>Feel the power*</p>
<small>*) Batteries not included</small>

| LIVE PREVIEW

Feel the power*

*) Batteries not included

`<time>`

Represents a specific period in time. It may specify:

a time on a 24-hour clock, e.g. 14:54:39
a precise date in the Gregorian calendar (with optional time and timezone information), e.g. 2011-11-18T14:54:39.929-04:00
a valid time duration, e.g. PT2H30M

Possible attributes

datetime=[...] — a date and/or time value in any of the valid formats

<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time -->
<p>
  The Cure will be celebrating their 40th anniversary on
  <time datetime="2018-07-07">July 7</time> in London's Hyde Park.
</p>

<p>
  The concert starts at <time datetime="20:00">20:00</time> and you'll be able to enjoy the band for
  at least <time datetime="PT2H30M">2h 30m</time>.
</p>

<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time -->
<p>
  The Cure will be celebrating their 40th anniversary on
  <time datetime="2018-07-07">July 7</time> in London's Hyde Park.
</p>

<p>
  The concert starts at <time datetime="20:00">20:00</time> and you'll be able to enjoy the band for
  at least <time datetime="PT2H30M">2h 30m</time>.
</p>

| LIVE PREVIEW

The Cure will be celebrating their 40th anniversary on July 7 in London's Hyde Park.

The concert starts at 20:00 and you'll be able to enjoy the band for at least 2h 30m.

`<var>`

Represents a variable (e.g. in math).

<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/var -->
The volume of a box is <var>l</var> × <var>w</var> × <var>h</var>,
where <var>l</var> represents the length, <var>w</var> the width,
and <var>h</var> the height of the box.

<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/var -->
The volume of a box is <var>l</var> × <var>w</var> × <var>h</var>,
where <var>l</var> represents the length, <var>w</var> the width,
and <var>h</var> the height of the box.

| LIVE PREVIEW

The volume of a box is l × w × h, where l represents the length, w the width, and h the height of the box.

`<code>`

Represents a fragment of code.

<code>var</code> and <code>let</code> are used to a declare variable.

<code>var</code> and <code>let</code> are used to a declare variable.

| LIVE PREVIEW

var and let are used to a declare variable.

`<kbd>`

Represents a keyboard input.

Press <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Delete</kbd> to express your frustration.

Press <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Delete</kbd> to express your frustration.

| LIVE PREVIEW

Press Ctrl + Alt + Delete to express your frustration.

`<samp>`

Represents a sample program output.

<samp>
  Keyboard not found<br>
  Press F1 to continue
</samp>

<samp>
  Keyboard not found<br>
  Press F1 to continue
</samp>

| LIVE PREVIEW

Keyboard not found Press F1 to continue

`<bdi>`

Bidirectional Isolate: isolates the directionality of a text from the surrounding text.

(Prevents directionality of the text inside <bdi> from influencing the directionality of the surrounding text, and vice-versa. Useful when LTR text is likely to meet RTL text.)

<!-- without bdi -->
<ul>
  <li><span>اَلأَعْشَى</span> - 1st place</li>
  <li><span>Jerry Cruncher</span> - 2nd place</li>
</ul>

<!-- with bdi -->
<ul>
  <li><bdi>اَلأَعْشَى</bdi> - 1st place</li>
  <li><bdi>Jerry Cruncher</bdi> - 2nd place</li>
</ul>

<!-- without bdi -->
<ul>
  <li><span>اَلأَعْشَى</span> - 1st place</li>
  <li><span>Jerry Cruncher</span> - 2nd place</li>
</ul>

<!-- with bdi -->
<ul>
  <li><bdi>اَلأَعْشَى</bdi> - 1st place</li>
  <li><bdi>Jerry Cruncher</bdi> - 2nd place</li>
</ul>

| LIVE PREVIEW

اَلأَعْشَى - 1st place
Jerry Cruncher - 2nd place

اَلأَعْشَى - 1st place
Jerry Cruncher - 2nd place

`<bdo>`

Bidirectional override: overrides the directionality of a text.

Possible attributes

dir=[...] — directionality of text. Can be:
- ltr (left-to-right)
- rtl (right-to-left)

<bdo dir="rtl">ABCDEF</bdo>

<bdo dir="rtl">ABCDEF</bdo>

| LIVE PREVIEW

ABCDEF

`<ruby>`, `<rt>`, and `<rp>`

<ruby> represents small annotations for a text (e.g. a pronunciation guide for East Asian languages).

<rt> represents the ruby text.

<rp> represents the ruby fallback parenthesis that gets displayed on non-supporting browser.

<ruby>
  漢<rp>(</rp><rt>かん</rt><rp>)</rp>
  字<rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>

<ruby>
  漢<rp>(</rp><rt>かん</rt><rp>)</rp>
  字<rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>

| LIVE PREVIEW

漢(かん) 字(じ)

`<data>`

Associates content with machine-readable data.

<!-- Example: associates product name with product number -->
<p>New Products:</p>
<ul>
  <li><data value="398">Book A</data></li>
  <li><data value="399">Book B</data></li>
  <li><data value="400">CD Cassette</data></li>
</ul>

<!-- Example: associates product name with product number -->
<p>New Products:</p>
<ul>
  <li><data value="398">Book A</data></li>
  <li><data value="399">Book B</data></li>
  <li><data value="400">CD Cassette</data></li>
</ul>

| LIVE PREVIEW

New Products:

Book A
Book B
CD Cassette

``

Denotes a word-break oppurtunity.

<!-- without wbr -->
<div style="width: 200px; background-color: #ffdddd">
  <p>Fernstraßenbauprivatfinanzierungsgesetz</p>
</div>

<!-- with wbr -->
<div style="width: 200px; background-color: #ddddff">
  <p>Fernstraßen<wbr>bau<wbr>privat<wbr>finanzierungs<wbr>gesetz</p>
</div>

<!-- without wbr -->
<div style="width: 200px; background-color: #ffdddd">
  <p>Fernstraßenbauprivatfinanzierungsgesetz</p>
</div>

<!-- with wbr -->
<div style="width: 200px; background-color: #ddddff">
  <p>Fernstraßen<wbr>bau<wbr>privat<wbr>finanzierungs<wbr>gesetz</p>
</div>

| LIVE PREVIEW

Fernstraßenbauprivatfinanzierungsgesetz

References

HTML elements reference (MDN) — https://developer.mozilla.org/en-US/docs/Web/HTML/Element

HTML Tags: Others – Inline

`<em>`

`<strong>`

`<abbr>`

`<cite>`

`<dfn>`

`<mark>`

`<q>`

`<small>`

`<time>`

`<var>`

`<code>`

`<kbd>`

`<samp>`

`<bdi>`

`<bdo>`

`<ruby>`, `<rt>`, and `<rp>`

`<data>`

`<wbr>`

References

HTML Tags: Others – Inline

<em>

<strong>

<abbr>

<cite>

<dfn>

<mark>

<q>

<small>

<time>

<var>

<code>

<kbd>

<samp>

<bdi>

<bdo>

<ruby>, <rt>, and <rp>

<data>

<wbr>

References

`<em>`

`<strong>`

`<abbr>`

`<cite>`

`<dfn>`

`<mark>`

`<q>`

`<small>`

`<time>`

`<var>`

`<code>`

`<kbd>`

`<samp>`

`<bdi>`

`<bdo>`

`<ruby>`, `<rt>`, and `<rp>`

`<data>`

`<wbr>`