Skip to main content

Semantic Markup Cheat Sheet

Semantic diagram

dl, dt, dd
<p>Unix:</p>
<dl>
  <dt>Category</dt>
  <dd>OS</dd>
  <dt>Start Develop</dt>
  <dd>1969</dd>
</dl>
dl
http://localhost:3000

Unix:

Category
OS
Start Develop
1969
blockquote, cite
<blockquote>
  <p>People are strange</p>
  <footer>— <cite>Doors</cite></footer>
</blockquote>
blockquote
http://localhost:3000

People are strange

— Doors
q
<q>Worse is better</q> Unix
http://localhost:3000
Worse is better Unix
address
<address>
  0 Lab
  <br/>6 Simply street
  <br/>MyCity
  <br />OurLand
  <br/>0000000
</address>
http://localhost:3000
0 Lab
6 Simply street
MyCity
OurLand
0000000
del, ins
<p>Everything is a <del datetime="2007-03-08">file</del> <ins datetime="2007-03-08">stream of bytes</ins></p>
http://localhost:3000

Everything is a file stream of bytes

abbr
recursive acronym as <abbr title="GNU's Not Unix!">GNU</abbr>
http://localhost:3000
recursive acronym as GNU
lang
<i lang="fr">Bonjour</i>
http://localhost:3000
Bonjour
progress
<progress value="3" min="1" max="5" />
http://localhost:3000
meter
<meter value="13" min="1" max="20" />
http://localhost:3000
kbd
 <p>press <kbd>Ctrl + C</kbd></p>
http://localhost:3000

press Ctrl + C

samp
<p>Terminal:</p>
<p><samp>Permission denied<br/>Press F1 to continue</samp></p>
http://localhost:3000

Terminal:

Permission denied
Press F1 to continue

code
run in bash: <code>id -u</code> for guid
http://localhost:3000
run in bash: id -u for guid
pre, code
<p>Run in bash:</p>
<pre>
  <code>
    stat -c '%a - %n' *
  </code>
</pre>
<p>for list in 777 style.</p>
http://localhost:3000

Run in bash:

stat -c '%a - %n' *

for list in 777 style.

var
<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base, and <var>h</var> is the vertical height.</p>
http://localhost:3000

The area of a triangle is: 1/2 x b x h, where b is the base, and h is the vertical height.

var, sup, sub
<p>she wrote <var>E</var> = <var>m</var><var>c</var><sup>2</sup></p>
<p>decimal to binary 42<sub>10</sub> = 00101010<sub>2</sub></p>
http://localhost:3000

she wrote E = mc2

decimal to binary 4210 = 001010102

math
<figure>
 <math>
  <mi>a</mi>
  <mo>=</mo>
  <msqrt>
   <msup><mi>b</mi><mn>2</mn></msup>
   <mi>+</mi>
   <msup><mi>c</mi><mn>2</mn></msup>
  </msqrt>
 </math>
 <figcaption>
  Using Pythagoras' theorem to solve for the hypotenuse <var>a</var> of
  a triangle with sides <var>b</var> and <var>c</var>
 </figcaption>
</figure>
math
http://localhost:3000
a=b2+c2
Using Pythagoras' theorem to solve for the hypotenuse a of a triangle with sides b and c
caution

math don't work in Chromium (OS MX Linux MX-21)!