Skillversitas

HTML Phrase Elements

Phrase elements are inline elements that add semantic meaning to text content.

Phrase Elements

abbr

<p>Use <abbr title="HyperText Markup Language">HTML</abbr> to create web pages.</p>

address

<address>
    Technology University<br>
    123 Technology Street<br>
    Chicago, 12345
</address>

cite

<cite>Learning HTML</cite> is a great book.

dfn

<dfn>HTML</dfn> is a markup language for creating web pages.

kbd

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>

samp

<samp>Error: File not found</samp>

var

<p>If <var>x</var> = 5, then <var>x</var> + 3 = 8.</p>

code

<p>Use the <code>&lt;p&gt;</code> tag to create a paragraph.</p>

pre

<pre>
function hello() {
    console.log("Hello!");
}
</pre>

Case Study: Technical Documentation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>API Documentation</title>
    <style>
        code {
            background: #f3f4f6;
            padding: 0.2rem 0.4rem;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
        }

        pre {
            background: #1f2937;
            color: #e5e7eb;
            padding: 1rem;
            border-radius: 8px;
            overflow-x: auto;
        }

        kbd {
            background: #e5e7eb;
            padding: 0.2rem 0.4rem;
            border-radius: 4px;
            border: 1px solid #ccc;
            font-family: 'Courier New', monospace;
        }

        samp {
            background: #fee2e2;
            color: #dc2626;
            padding: 0.2rem 0.4rem;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <h1>Campus System API Documentation</h1>

    <h2>Authentication</h2>
    <p>To access the API, use the <code>Authorization</code> header with the format <code>Bearer {token}</code>.</p>

    <h2>Endpoint</h2>
    <h3>GET /api/students</h3>
    <p>Get a list of all students.</p>

    <pre>
{
    "status": "success",
    "data": [
        {
            "id": 1,
            "name": "John Smith",
            "studentId": "1234567890"
        }
    ]
}
</pre>

    <h2>Error Handling</h2>
    <p>If an error occurs, the API will return a response:</p>
    <samp>Error: Unauthorized</samp>

    <h2>Keyboard Shortcuts</h2>
    <p>Use the following shortcuts for quick navigation:</p>
    <ul>
        <li><kbd>Ctrl</kbd> + <kbd>S</kbd> - Save</li>
        <li><kbd>Ctrl</kbd> + <kbd>Z</kbd> - Undo</li>
        <li><kbd>Ctrl</kbd> + <kbd>F</kbd> - Find</li>
    </ul>

    <h2>Glossary</h2>
    <dl>
        <dt><dfn>API</dfn></dt>
        <dd>Application Programming Interface - Application programming interface</dd>

        <dt><dfn>REST</dfn></dt>
        <dd>Representational State Transfer - Architecture for web services</dd>
    </dl>

    <address>
        Development Team<br>
        Technology University<br>
        Email: [email protected]
    </address>
</body>
</html>

Everyday Case Study

Case: A developer needs to display program code.

<h2>HTML Code Example</h2>

<p>Use the <code>&lt;html&gt;</code> tag as the root element.</p>

<pre>
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;title&gt;Title&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Hello, World!&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

<p>Press <kbd>F12</kbd> to open Developer Tools.</p>

Best Practices

  1. Use semantic elements: For clear meaning
  2. code vs pre: code for inline, pre for blocks
  3. kbd for keyboard: For shortcuts
  4. samp for output: For program output
  5. abbr for abbreviations: With title for an explanation

Summary

Phrase elements add semantic meaning to text. Use them for technical documentation and content that needs explanation.