Presenting Code: code, pre, kbd, samp, and var

Developer documentation requires specialized elements to distinguish source code, keyboard commands, terminal outputs, and variables from regular text.

1. Inline Code (<code>) & Preformatted Blocks (<pre>)

• <code>: Formats inline code with a monospace font.
• <pre>: Preserves both whitespace and line breaks exactly as typed in the HTML source.

<p>To start your dev server, execute <code>python manage.py runserver</code> in your shell.</p>

<!-- Multi-line Code Block -->
<pre><code class="language-python">
def calculate_uptime(days):
    return days * 24 * 3600
</code></pre>

2. Keyboard Inputs: <kbd>

Identifies user keyboard combinations:

<p>To inspect element on Windows, press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd>.</p>

3. Terminal Output: <samp> and Variables: <var>

<p>Server responded with: <samp>HTTP/1.1 200 OK</samp></p>
<p>In calculus, the derivative of <var>f</var>(<var>x</var>) is denoted as <var>f'</var>(<var>x</var>).</p>