css Library - html Text-Level Semantics

• The a element
• The em element
• The strong element
• The small element
• The s element
• The cite element
• The q element
• The dfn element
• The abbr element
• The data element
• The time element
• The code element
• The var element
• The samp element
• The kbd element
• The sub/sup elements
• The i element
• The b element
• The u element
• The mark element
• The ruby element
• The rt element
• The rp element
• The bdi element
• The bdo element
• The span element
• The br / element
• The wbr element

Text-Level Semantics Usage Summary

Element	Purpose	Example
a	Hyperlinks	Visit my <a href="drinks.html">drinks</a> page.
em	Stress emphasis	I must say I <em>adore</em> lemonade.
strong	Importance	This tea is <strong>very hot</strong>.
small	Side comments	These grapes are made into wine. <small>Alcohol is addictive.</small>;
s	Inaccurate text	Price: <s>£4.50</s> £2.00!
cite	Titles of works	The case <cite>Hugo v. Danielle</cite> is relevant here.
q	Quotations	The judge said <q>You can drink water from the fish tank</q> but advised against it.
dfn	Defining instance	The term <dfn>organic food</dfn> refers to food produced without synthetic chemicals.
abbr	Abbreviations	Organic food in Ireland is certified by the <abbr title="Irish Organic Farmers and Growers Association">IOFGA</abbr>.
data	Machine-readable equivalent	Available starting today! <data value="UPC:022014640201">North Coast Organic Apple Cider</data>
time	Machine-readable equivalent of date- or time-related data	Available starting on <time datetime="2011-11-12">November 12th</time>!
code	Computer code	The <code>fruitdb</code> program can be used for tracking fruit production.
var	Variables	If there are <var>n</var> fruit in the bowl, at least <var>n</var>÷2 will be ripe.
samp	Computer output	The computer said <samp>Unknown error -3</samp>.
kbd	User input	Hit <kbd>F1</kbd> to continue.
sub	Subscripts	Water is H<sub>2</sub>O.
sup	Superscripts	The Hydrogen in heavy water is usually <sup>2</sup>H.
i	Alternative voice	Lemonade consists primarily of <i>Citrus limon</i>.
b	Keywords	Take a <b>lemon</b> and squeeze it with a <b>juicer</b>.
u	Annotations	The mixture of apple juice and <u class="spelling">eldeflower</u> juice is very pleasant.
mark	Highlight	Elderflower cordial, with one <mark>part</mark> cordial to ten <mark>part</mark>s water, stands a<mark>part</mark> from the rest.
ruby, rt, rp	Ruby annotations	<ruby> OJ <rp>(<rt>Orange Juice<rp>)</ruby>
bdi	Text directionality isolation	The recommended restaurant is <bdi lang="">My Juice Café (At The Beach)</bdi>.
bdo	Text directionality formatting	The proposal is to write English, but in reverse order. "Juice" would become "<bdo dir=rtl>Juice</bdo>"
span	Other	In French we call it <span lang="fr">sirop de sureau</span>.
br /	Line break	Simply Orange Juice Company <br />Apopka, FL 32703 <br />U.S.A.
wbr	Line breaking opportunity	www.simply<wbr>orange<wbr>juice.com.

Using code, kbd, samp and pre

Combine pre with code to represent a block of computer code.

Combine pre with samp to represent a block of computer output.

Combine pre with kbd to represent input the user is to enter.

Styling pre and code Elements Demo

Using kbd and samp Together

Combining samp and kbd

samp and pre can be used together when representing input based on system output or input that is echoed by the system. In the following example, the user is told which menu item to choose in order to save an image:

To save the image file, select File - Save as....

<p>
  To save the image file, select 
  <kbd>
    <kbd>
      <samp>File</samp>
    </kbd>
    - <kbd>
        <samp>Save as...</samp>
      </kbd>
  </kbd>
.</p>

Above, the menu item represent output from an unspecified program, therefore each menu item is sample output and gets a samp. The samp element is nested within kbd because it is user input, and then it all gets nested within another kbd to represent the entire user input block.

Describing how code echoes instructions in a modal/window is an example where samp is the parent and kbd(s) are nested within:

A message will appear on the screen informing you what to do next: Press Enter to continue.

<p>
  A message will appear on the screen informing you what to do next: 
  <samp>
  Press 
  <kbd>Enter</kbd>
  to continue
  </samp>.
</p>

Combining samp, kbd, and pre

samp, kbd, and pre can be used in conjunction, where pre is the parent. This is very useful for displaying code; the example below represents screen output for changing a directory at the Windows command prompt:

C:\> 
cd html5 + Enter
C:\html5>

<pre><samp>C:\></samp>
  <kbd><kbd>cd html5</kbd> + 
  <kbd>Enter</kbd></kbd>
<samp>C:\html5></samp></pre>

Using HTML's kbd, samp, and pre elements

This second example shows a block of sample output. Nested samp and kbd elements allow for the styling of elements of the sample output using a style sheet.

jdoe@mowmow:~$ ssh demo.example.com
Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com on pts/1
Linux demo 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189 #1 SMP Tue Feb 1 11:22:36 PST 2005 i686 unknown
jdoe@demo:~$ _

<pre><samp><span class="prompt">jdoe@mowmow:~$</span> <kbd>ssh demo.example.com</kbd>
Last login: Tue Apr 12 09:10:17 2005 from mowmow.example.com on pts/1
Linux demo 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189 #1 SMP Tue Feb 1 11:22:36 PST 2005 i686 unknown
<span class="prompt">jdoe@demo:~$</span> <span class="cursor">_</span></samp></pre>

References and Resources

• Text-Level Semantics