HTML Inline Text Semantic Elements

Inline text semantic

Inline level elements don't have their own block shape. They are stretches of text that has particular semantic/role/meaning to it, embedded within block level elements like <p>; and <li>. Some come with certain font/text styling as default, some not.

Generic inline container

<span>

Generic inline container

Default styling: none

Role: styling a stretch of text without specific semantics.

This is like <div> for block-level element. Use only when there's no better or more specific inline semantic elements can be used.

Links text

<a>

Anchor element

<a href="URL" target="value">link handle</a>

Breakdown:

• Text content: Link handle
• href attribute: URL
• Target attribute (optional): Landing page

Default styling:

• underline, color, cursor

Various CSS pseudo-class:

• :link, :visited, :active, :hover, check for more

Text with data

<abbr>

Abbreviation

<abbr title="Cascading Style Sheets">CSS</abbr>

Breakdown:

• Text content: Abbreviated form
• Title attribute (optional): Non-abbreviated form

Default styling:

• none
• With title attribute: dot-underline. Title value is displayed on hover.

Examples:

• Without title attribute:
  • In this chapter we are learning about <abbr>HTML</abbr>.
  • In this chapter we are learning about HTML.
• With title attribute:
  • In this chapter we are learning about <abbr title="HyperText Markup Language">HTML</abbr>.
  • In this chapter we are learning about HTML.

<dfn>

Definition

<dfn title="supernova" id="def-supernova">supernova</dfn>

Breakdown:

• Text content: The term
• Title attribute (optional): The term (superseding the text content)
• Id attribute (optional): To facilited linking via <a href="#idName">
• Enclosing <p>, <dt>/<dd> pair, or <section>: The definition

Default styling:

• italic
• With title attribute, title value is displayed on hover.

Special child:

• <abbr>: See next point

Examples:

• Without any attributes
  • A <dfn>supernova</dfn> is a powerful and luminous stellar explosion.
  • A supernova is a powerful and luminous stellar explosion.
• With title and id attributes
  • A <dfn title="supernova" id="def-supernova">supernova</dfn> is a powerful and luminous stellar explosion.
  • A supernova is a powerful and luminous stellar explosion.
• Linking to the definition from other part of document.
  • <a href="#def-supernova">supernova</a> can expel several solar masses of material at speeds up to several percent of the speed of light.
  • Supernovae can expel several solar masses of material at speeds up to several percent of the speed of light.

<dfn><abbr>

Definition of abbreviation

<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>

Default styling:

• italic
• With title attribute: italic and dot-underline. Title value is displayed on hover.

Examples

• Without title attribute
  • <dfn><abbr>CSS</abbr></dfn> is the language we use to style an HTML document.
  • CSS is the language we use to style an HTML document.
• With title attribute
  • <dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> is the language we use to style an HTML document.
  • CSS is the language we use to style an HTML document.
• With id attribute
  • <dfn id="def-css"><abbr title="Cascading Style Sheets">CSS</abbr></dfn> is the language we use to style an HTML document.
  • CSS is the language we use to style an HTML document.
• Linking to the definition from other part of document.
  • A <a href="#def-css">CSS</a> may be used if one single HTML page has a unique style.
  • A CSS may be used if one single HTML page has a unique style.

<cite>

Citation

<cite><a href="URL">work title</a></cite>

Breakdown:

• Text content: Work title
• Child element <a> (optional): Link to the source

Default styling:

• italic
• With link: link styling applies

Citation vs Quotation:

• Quotation elements<blockquote> and <q> using cite attribute.
  • These are for quotations.
  • Cite attribute here is to refer to the quotation source.
  • The text content is quoted words.
• Citation element <cite>
  • This is for citation.
  • The text content is a creative work's title.

Examples:

• Without link
  • I wrote <cite>Fluorine and Rhenium...</cite> during my graduate study in Western University.
  • I wrote Fluorine and Rhenium Substituted Ghrelin Analogues as Potential Imaging Probes for the Growth Hormone Secretagogue Receptor during my graduate study in Western University.
• With link
  • I wrote <cite><a href="URL">Fluorine and Rhenium...<a></cite> during my graduate study in Western University.
  • I wrote Fluorine and Rhenium Substituted Ghrelin Analogues as Potential Imaging Probes for the Growth Hormone Secretagogue Receptor during my graduate study in Western University.

<q>

Inline quotoation

<q cite="URL">quotation</q>

Breakdown:

• Text content: Quoted words
• Cite attribute (optional): Link to the source
  • Not displayed including upon hovering.

Default styling:

• "quoted"

Examples:

• According to the Wikipedia, <q cite="https://en.wikipedia.org/wiki/Supernova">A supernova is a powerful and luminous stellar explosion.</q>
• According to the Wikipedia, A supernova is a powerful and luminous stellar explosion.

<data>

Data

<data value="123">content</data>

Breakdown:

• Text content: Human-readable content
• Value attribute: Machine-readable data

Default styling: none

• Value not displayed

Examples:

• Codes
  • <data value="123">Apples</data>
  • <data value="124">Bananas</data>
  • <data value="125">Oranges</data>
• Results
  • Apples
  • Bananas
  • Oranges

<time>

Date and time

<time datetime="2022-07-24">24 July</time>

Breakdown:

• Text content: Human-readable date, time, or time duration
• Datetime attribute: Machine-readable date, time, or time duration

Default styling: none

• Datetime not displayed

Valid datetime string format:

• Date
  • 2022
  • 2022-11
  • 2022-11-18
  • 11-18
  • 2022-W47
• Time
  • 14:54
  • 14:54:39
  • 14:54:39.929
• Date and time
  • 2011-11-18T14:54:39.929
  • 2011-11-18 14:54:39.929
• Global date and time
  • 2011-11-18T14:54:39.929Z
  • 2011-11-18T14:54:39.929-0400
  • 2011-11-18T14:54:39.929-04:00
  • 2011-11-18 14:54:39.929Z
  • 2011-11-18 14:54:39.929-0400
  • 2011-11-18 14:54:39.929-04:00
• Time duration
  • PT4H18M3S

Examples:

• Codes
  • <time datetime="2022-07-24">24 July</time>
  • <time datetime="20:00:00">8 pm</time>
  • <time datetime="PT2H30M">2h 30m</time>
• Results
  • 24 July
  • 8 pm
  • 2h 30m

Semantically styled text

Elements within the main text with their own unique style to visually represent their roles to the users, but don't have action or defining attributes like in the previous section.

Prominent default appearance is featured. Of course this could be changed.

<strong>

Strong importance

Default styling: bold

CSS equivalent: font-weight: bold;

Including great seriousness or urgency such as warning. Could be of a great importance in the whole page, or some words that are of greater importance compared to nearby content.

Example:

• Dinner tonight will be sizzling fajita. Warning: Don't put your face on it! Sizzling fajita is sizzling hot.

<b>

Boldface

Default styling: bold

CSS equivalent: font-weight: bold;

To draw attention to the text without indicating it's more important.

If there's no semantic meaning to the text, use CSS font-weight: bold property instead.

<em>

Emphasis

Default styling: italics

CSS equivalent: font-style: italic;

Indicates stressed emphasis, including stressed contrast.

If it's not to stress emphasize, use:

• CSS font-style: italic; for general styling
• <cite> for citations such as title of book, play, song, etc.
• <i> for alternate tone or mood, fictional characters' thought, definition of a word, for scientific names, words in different languages

Examples:

• I do not want that.
• Just do it already.
• In HTML 5, what was previously called block-level content is now called flow content.

<i>

Idiomatic text

Default styling: italics

CSS equivalent: font-style: italic;

Use: a range of text that deviates from normal text for some reason, such as:

• Idiomatic text
• Technical terms
• Alternative voice or mood
• Taxonomical designations

  For example: Hedera helix

Examples:

• The Queen Mary sailed last night.
  • To indicate it's not about a queen named Mary, but about a ship named Queen Mary.
• The word the is an article.
  • To indicate the word being explained is "the".

<u>

Unarticulated annotation

Default styling: underlined

CSS equivalent: text-decoration: underline;

<s>

Strikethrough

Default styling: strikethrough

CSS equivalent: text-decoration: line-through;

Use: to indicate contents no longer relevant.

Similar elements:

• <del>: Indicates deleted text in document edit.
• Deprecated: <strike>

<mark>

Marked/highlighted text

Default styling: highlight

CSS equivalent:

• background-color: yellow;
• color: black;

Examples

• The searched word is potato and it's supposed to mark all potatoes in the document.

<small>

Side comment

Default styling: 1 font smaller, like from small to x-small.

CSS equivalent: font-size: 0.8rem;

Use: Represents side-comments and small print. Like copyright and legal text.

Examples:

Here is the last content paragraph of the document, and after this there will be a divider continued with licensing statement.

---

The content is licensed under a Creative Commons Attribution-ShareAlike 2.5 Generic License.

Child text

Child text to the main text member. Usually represented in smaller font with specific positioning relative to the text parent.

<sub>

Subscript

Default display: parent_{child low and small}

CSS equivalent:

• vertical-align: sub; or vertical-align: -25%;
• font-size: 0.8rem;

Example uses:

• Chemical formula
  • H<sub>2</sub>O
  • H₂O
• Footnote numbers:
  • poinsettia₁
• Mathematical variable numbers (consider using MathML)
  • x₁...x_n

Note: Can't use <sub> and <sup> at the same spot like in atomic symbol. Need MathML for that.

<sup>

Superscript

Default display: parent^{child high and small}

CSS equivalent:

• vertical-align: sup; or vertical-align: 50%;
• font-size: 0.8rem;

Example uses:

• Superior lettering
  • M<sup>lle</sup>
  • M^lle
• Ordinal numbers
  • 4^th
• Exponent (consider using MathML)
  • 2² = 4

Note: Can't use <sub> and <sup> at the same spot like in atomic symbol. Need MathML for that.

Technical text

Monospace font except for <var>

<code>

Inline code

<code>let x = 123;</code>

let x = 123;

Default display: monospace font

Wrap inside preformatted block element <pre> to create code blocks.

<pre>
<code>let x = 123;
let y = 456;
let z = 780;</code>
</pre>

let x = 123;
let y = 456;
let z = 780;

<kbd>

Keyboard input

Press <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Del</kbd>

Press Ctrl + Alt + Del

Default display: monospace font

Represents textual user input from a keyboard, voice input, or any other text entry device.

<samp>

Sample output

Output text: <samp>Scan complete. Press F1 to continue</samp>

Output text: Scan complete. Press F1 to continue

Default display: monospace font

Nesting keyboard input and sample output:

• <kbd> inside <kbd>
  • Child inputs as part of a parent input.
• <kbd> inside <samp>
  • Input has been echoed back to users by the system.
• <samp> inside <kbd>
  • Input based on the text presented by the system.
• Learn more in <kbd> page and <samp> page

<var>

Variable

Equation: <var>x</var> = <var>y</var> + 2

Equation: x = y + 2

Typical default styling: italic

Represents variable name in a mathematical expression or programming context

Often used together with elements: <code>, <kbd>, <samp>

Don't confuse with other elements with default italic font such as: <em>, <i>, <q>

Different writing system

<bdi>

Bidirectional isolate

Tells the browser's bidirectional algorithm to treat the text it contains in isolation from its surrounding text.

Examples

• Without <bdi>
  • Codes:
    • <span class="name">اَلأَعْشَى</span> - 1st place
    • <span class="name">Tom Smith</span> - 2nd place
  • Results:
    • اَلأَعْشَى - 1st place
    • Tom Smith - 2nd place
• With <bdi>
  • Codes:
    • <bdi class="name">اَلأَعْشَى</bdi> - 1st place
    • <bdi class="name">Tom Smith</bdi> - 2nd place
  • Results:
    • اَلأَعْشَى - 1st place
    • Tom Smith - 2nd place

<bdo>

Bidirectional text element

Important attribute: dir. It has 2 possible values:

• dir="ltr": left to right (like reagular alphabet)
• dir="rtl": right to left.

Overrides current directionality of text. Text is rendered in a different direction.

Language application example: Hebrew.

<p>The English song "Oh I do like to be beside the seaside"</p>

<p>Looks like this in Hebrew: <span dir="rtl">אה, אני אוהב להיות ליד חוף הים</span></p>

<p>In the computer's memory, this is stored as <bdo dir="ltr">אה, אני אוהב להיות ליד חוף הים</bdo></p>

The English song "Oh I do like to be beside the seaside"

Looks like this in Hebrew: אה, אני אוהב להיות ליד חוף הים

In the computer's memory, this is stored as אה, אני אוהב להיות ליד חוף הים

Not familiar with Hebrew writing. Check the example here

Examples:

• Codes:
  • Normal: 12345
  • Left to right: <bdo dir="ltr">12345</bdo>
  • Right to left: <bdo dir="rtl">12345</bdo>
• Results:
  • Normal: 12345
  • Left to right: 12345
  • Right to left: 12345

<ruby>

Ruby annotation

Represents small annotation that are rendered above, below, or next to base text. Usualy for showing pronunciation of East Asian characters.

<ruby>
漢 <rp>(</rp><rt>kan</rt><rp>)</rp>
字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>
<ruby>
明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp>
</ruby>

Result 1: 漢 (kan) 字 (ji)
Result 2: 明日 (Ashita)

<rt>

Ruby Text

Provide pronunciation, translation, or transliteration information

<rp>

Ruby Fallback Parenthesis

Provide fall-back parentheses for browsers that do not support display of ruby annotations

It's possible to omit <rp>, but it won't have the fallback parenthesis.

<ruby>
漢 <rt>kan</rt>
字 <rt>ji</rt>
</ruby>

Result: 漢 kan 字 ji

Deprecated ruby elements: <rb>, <rtc>

Breaks

<br>

Line break / carriage return

Use: To create a line break in a block of text.

Example usage:

• Poem
• Address

Don't use <br> to create margins between paragraphs. Instead, wrap it within a <p> element and style it with margin.

CSS styling: line-height

• Don't do it by setting margin

<p>

Humpty Dumpty sat on the wall<br>
Humpty Dumpty had a great fall<br>
All of the horses and all of the men<br>
Couldn't put Humpty together again.

</p>

Humpty Dumpty sat on the wall
Humpty Dumpty had a great fall
All of the horses and all of the men
Couldn't put Humpty together again.

<p>

Name<br>
Address line 1<br>
Address line 2<br>
Telephone number

</p>

Name
Address line 1
Address line 2
Telephone number

<wbr>

Word break / line break opportunity

Word break opportunity: a position within text where the browser may optionally break a line.

Notes:

• It doesn't introduce hyphen
• To make hyphen appear at the end of the line, use: ­ (soft hyphen character entity)

<p>Fernstraßenbauprivatfinanzierungsgesetz</p>

<p>Fernstraßen<wbr>bau<wbr>privat<wbr>finanzierungs<wbr>gesetz</p>

<p>Fernstraßen­bau­privat­finanzierungs­gesetz</p>

Fernstraßenbauprivatfinanzierungsgesetz

Fernstraßenbauprivatfinanzierungsgesetz

Fernstraßen­bau­privat­finanzierungs­gesetz

Resources

• HTML Elements
• Reserved characters
• CSS Default Values Reference
• Common HTML entities used for typography