Acronym Characters
Acronyms and initialisms with proper semantic markup.
Basic Acronym
The HTML specification defines the structure of web pages, while CSS handles the presentation.
<p>
The
<abbr
title="HyperText Markup Language"
style="text-decoration: underline dotted; cursor: help"
>
HTML
</abbr>
specification defines the structure of web pages, while
<abbr
title="Cascading Style Sheets"
style="text-decoration: underline dotted; cursor: help"
>
CSS
</abbr>
handles the presentation.
</p>Common Acronyms
Application Programming Interface
Uniform Resource Locator
JavaScript Object Notation
Representational State Transfer
<div
style="
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
"
>
<div
style="
padding: 16px;
background: var(--color_fill_secondary);
border-radius: 8px;
"
>
<abbr
title="Application Programming Interface"
style="
font-size: 24px;
font-weight: bold;
text-decoration: none;
"
>
API
</abbr>
<p style="margin: 8px 0 0; font-size: 13px; opacity: 0.7">
Application Programming Interface
</p>
</div>
<div
style="
padding: 16px;
background: var(--color_fill_secondary);
border-radius: 8px;
"
>
<abbr
title="Uniform Resource Locator"
style="
font-size: 24px;
font-weight: bold;
text-decoration: none;
"
>
URL
</abbr>
<p style="margin: 8px 0 0; font-size: 13px; opacity: 0.7">
Uniform Resource Locator
</p>
</div>
<div
style="
padding: 16px;
background: var(--color_fill_secondary);
border-radius: 8px;
"
>
<abbr
title="JavaScript Object Notation"
style="
font-size: 24px;
font-weight: bold;
text-decoration: none;
"
>
JSON
</abbr>
<p style="margin: 8px 0 0; font-size: 13px; opacity: 0.7">
JavaScript Object Notation
</p>
</div>
<div
style="
padding: 16px;
background: var(--color_fill_secondary);
border-radius: 8px;
"
>
<abbr
title="Representational State Transfer"
style="
font-size: 24px;
font-weight: bold;
text-decoration: none;
"
>
REST
</abbr>
<p style="margin: 8px 0 0; font-size: 13px; opacity: 0.7">
Representational State Transfer
</p>
</div>
</div>Acronym Styles
Dotted underline: WWW
Small caps: nasa
With icon: FAQ ⓘ
Badge style: UI and UX
<div style="display: flex; flex-direction: column; gap: 16px">
<p>
Dotted underline:
<abbr
title="World Wide Web"
style="text-decoration: underline dotted; cursor: help"
>
WWW
</abbr>
</p>
<p>
Small caps:
<abbr
title="National Aeronautics and Space Administration"
style="
font-variant: small-caps;
text-decoration: none;
letter-spacing: 0.05em;
"
>
nasa
</abbr>
</p>
<p>
With icon:
<abbr
title="Frequently Asked Questions"
style="text-decoration: none"
>
FAQ
<span style="font-size: 12px">ⓘ</span>
</abbr>
</p>
<p>
Badge style:
<abbr
title="User Interface"
style="
text-decoration: none;
background: var(--color_fill_primary);
color: white;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
"
>
UI
</abbr>
and
<abbr
title="User Experience"
style="
text-decoration: none;
background: var(--color_state_success);
color: white;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
"
>
UX
</abbr>
</p>
</div>Technical Context
The server uses TLS for secure HTTPS connections. Data is stored in a SQL database and accessed via REST API endpoints returning JSON responses.
<div
style="
padding: 20px;
background: #1a1a2e;
border-radius: 8px;
color: #e0e0e0;
"
>
<p style="margin: 0; font-family: monospace; line-height: 1.8">
The server uses
<abbr
title="Transport Layer Security"
style="color: #4fc3f7; text-decoration: none"
>
TLS
</abbr>
for secure
<abbr
title="HyperText Transfer Protocol Secure"
style="color: #4fc3f7; text-decoration: none"
>
HTTPS
</abbr>
connections. Data is stored in a
<abbr
title="Structured Query Language"
style="color: #81c784; text-decoration: none"
>
SQL
</abbr>
database and accessed via
<abbr
title="Representational State Transfer"
style="color: #81c784; text-decoration: none"
>
REST
</abbr>
<abbr
title="Application Programming Interface"
style="color: #81c784; text-decoration: none"
>
API
</abbr>
endpoints returning
<abbr
title="JavaScript Object Notation"
style="color: #ffb74d; text-decoration: none"
>
JSON
</abbr>
responses.
</p>
</div>