## 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.

HTML

    <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

API

Application Programming Interface

URL

Uniform Resource Locator

JSON

JavaScript Object Notation

REST

Representational State Transfer

HTML

    <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

HTML

    <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.

HTML

    <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>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!