Abbreviation Characters
Abbreviations with expanded definitions for accessibility.
Basic Abbreviation
The WHO was founded in 1948. It works closely with the UN on global health initiatives.
<p>
The
<abbr title="World Health Organization">WHO</abbr>
was founded in 1948. It works closely with the
<abbr title="United Nations">UN</abbr>
on global health initiatives.
</p>Styled Abbreviations
Default dotted: ASAP
Dashed underline: FYI
No underline: etc.
With tooltip icon: TBD ?
<div style="display: flex; flex-direction: column; gap: 16px">
<p>
Default dotted:
<abbr
title="As Soon As Possible"
style="text-decoration: underline dotted; cursor: help"
>
ASAP
</abbr>
</p>
<p>
Dashed underline:
<abbr
title="For Your Information"
style="text-decoration: underline dashed; cursor: help"
>
FYI
</abbr>
</p>
<p>
No underline:
<abbr
title="et cetera"
style="text-decoration: none; font-style: italic"
>
etc.
</abbr>
</p>
<p>
With tooltip icon:
<abbr
title="To Be Determined"
style="text-decoration: none; cursor: help"
>
TBD
<span style="font-size: 10px; vertical-align: super">
?
</span>
</abbr>
</p>
</div>Common Abbreviations
for example
that is
and so forth
note well
versus
approximately
<div
style="
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px;
"
>
<div
style="
padding: 12px;
background: var(--color_fill_secondary);
border-radius: 8px;
text-align: center;
"
>
<abbr
title="exempli gratia (for example)"
style="text-decoration: none; font-weight: 600"
>
e.g.
</abbr>
<p style="margin: 4px 0 0; font-size: 11px; opacity: 0.7">
for example
</p>
</div>
<div
style="
padding: 12px;
background: var(--color_fill_secondary);
border-radius: 8px;
text-align: center;
"
>
<abbr
title="id est (that is)"
style="text-decoration: none; font-weight: 600"
>
i.e.
</abbr>
<p style="margin: 4px 0 0; font-size: 11px; opacity: 0.7">
that is
</p>
</div>
<div
style="
padding: 12px;
background: var(--color_fill_secondary);
border-radius: 8px;
text-align: center;
"
>
<abbr
title="et cetera (and so forth)"
style="text-decoration: none; font-weight: 600"
>
etc.
</abbr>
<p style="margin: 4px 0 0; font-size: 11px; opacity: 0.7">
and so forth
</p>
</div>
<div
style="
padding: 12px;
background: var(--color_fill_secondary);
border-radius: 8px;
text-align: center;
"
>
<abbr
title="nota bene (note well)"
style="text-decoration: none; font-weight: 600"
>
N.B.
</abbr>
<p style="margin: 4px 0 0; font-size: 11px; opacity: 0.7">
note well
</p>
</div>
<div
style="
padding: 12px;
background: var(--color_fill_secondary);
border-radius: 8px;
text-align: center;
"
>
<abbr
title="versus"
style="text-decoration: none; font-weight: 600"
>
vs.
</abbr>
<p style="margin: 4px 0 0; font-size: 11px; opacity: 0.7">
versus
</p>
</div>
<div
style="
padding: 12px;
background: var(--color_fill_secondary);
border-radius: 8px;
text-align: center;
"
>
<abbr
title="approximately"
style="text-decoration: none; font-weight: 600"
>
approx.
</abbr>
<p style="margin: 4px 0 0; font-size: 11px; opacity: 0.7">
approximately
</p>
</div>
</div>Unit Abbreviations
| Unit | Full Name | Example |
|---|---|---|
| KB | Kilobyte | 256 KB |
| MB | Megabyte | 4.5 MB |
| GB | Gigabyte | 16 GB |
| TB | Terabyte | 2 TB |
<table
style="width: 100%; max-width: 500px; border-collapse: collapse"
>
<thead>
<tr style="background: var(--color_fill_secondary)">
<th
style="
padding: 12px;
text-align: left;
border-bottom: 2px solid
var(--color_line_secondary);
"
>
Unit
</th>
<th
style="
padding: 12px;
text-align: left;
border-bottom: 2px solid
var(--color_line_secondary);
"
>
Full Name
</th>
<th
style="
padding: 12px;
text-align: right;
border-bottom: 2px solid
var(--color_line_secondary);
"
>
Example
</th>
</tr>
</thead>
<tbody>
<tr>
<td
style="
padding: 10px 12px;
border-bottom: 1px solid
var(--color_line_secondary);
"
>
<abbr title="kilobyte">KB</abbr>
</td>
<td
style="
padding: 10px 12px;
border-bottom: 1px solid
var(--color_line_secondary);
"
>
Kilobyte
</td>
<td
style="
padding: 10px 12px;
text-align: right;
border-bottom: 1px solid
var(--color_line_secondary);
"
>
256
<abbr title="kilobyte">KB</abbr>
</td>
</tr>
<tr>
<td
style="
padding: 10px 12px;
border-bottom: 1px solid
var(--color_line_secondary);
"
>
<abbr title="megabyte">MB</abbr>
</td>
<td
style="
padding: 10px 12px;
border-bottom: 1px solid
var(--color_line_secondary);
"
>
Megabyte
</td>
<td
style="
padding: 10px 12px;
text-align: right;
border-bottom: 1px solid
var(--color_line_secondary);
"
>
4.5
<abbr title="megabyte">MB</abbr>
</td>
</tr>
<tr>
<td
style="
padding: 10px 12px;
border-bottom: 1px solid
var(--color_line_secondary);
"
>
<abbr title="gigabyte">GB</abbr>
</td>
<td
style="
padding: 10px 12px;
border-bottom: 1px solid
var(--color_line_secondary);
"
>
Gigabyte
</td>
<td
style="
padding: 10px 12px;
text-align: right;
border-bottom: 1px solid
var(--color_line_secondary);
"
>
16
<abbr title="gigabyte">GB</abbr>
</td>
</tr>
<tr>
<td style="padding: 10px 12px">
<abbr title="terabyte">TB</abbr>
</td>
<td style="padding: 10px 12px">Terabyte</td>
<td style="padding: 10px 12px; text-align: right">
2
<abbr title="terabyte">TB</abbr>
</td>
</tr>
</tbody>
</table>Abbreviation in Context
The meeting is scheduled for 3:00 PM EST . Please confirm your attendance ASAP . FYI , the agenda includes Q4 budget review, i.e. , financial planning for the next fiscal year, etc.
<div
style="
padding: 20px;
background: var(--color_fill_secondary);
border-radius: 8px;
line-height: 1.8;
"
>
<p style="margin: 0">
The meeting is scheduled for
<abbr title="3:00 Post Meridiem">3:00 PM</abbr>
<abbr title="Eastern Standard Time">EST</abbr>
. Please confirm your attendance
<abbr
title="As Soon As Possible"
style="text-decoration: underline dotted"
>
ASAP
</abbr>
.
<abbr title="For Your Information">FYI</abbr>
, the agenda includes
<abbr title="Quarter 4">Q4</abbr>
budget review,
<abbr title="id est (that is)">i.e.</abbr>
, financial planning for the next fiscal year,
<abbr title="et cetera (and so forth)">etc.</abbr>
</p>
</div>