pelicin › web › HTML

HTML Tags: Others – Inline

These are the rest of the HTML block tags.

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

<em>

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

  • <em> represents stress emphasis of its contents

  • <i> 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.
| LIVE PREVIEW
Stealing my lunch will not be forgiven.

<strong>

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

  • <strong> represents content with strong importance

  • <b> is used to draw attention to text without indicating that it's more important

<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>.
| 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>
| 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.
| LIVE PREVIEW
Sashimi is a type of dish made of raw fish.

<mark>

Represents a marked/highlighted text.

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
>
| 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.

<small>

Represents a small print.

<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>
| LIVE PREVIEW

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

The concert starts at and you'll be able to enjoy the band for at least .

<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.
| 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.
| 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.
| 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>
| 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>
| 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>
| 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>
| 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>
| LIVE PREVIEW

New Products:

  • Book A
  • Book B
  • CD Cassette

<wbr>

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>
| LIVE PREVIEW

Fernstraßenbauprivatfinanzierungsgesetz

Fernstraßenbauprivatfinanzierungsgesetz

References