Inline Metadata

Code and Keyboard Inline

Mark Commands Precisely

A short instruction marks key presses with kbd and a function name with code so the browser renders each kind of inline token differently.

Program

Inline semantic elements keep prose readable while marking special tokens such as keyboard input and code identifiers.

code_kbd_inline.html
Visuals: captured from real browser rendering
<p>
  Press <kbd>Ctrl</kbd> + <kbd>/</kbd>
  to toggle <code>commentLine()</code>.
</p>

  1. Start an instruction paragraph.

    An empty instruction paragraph appears.
    The paragraph owns the running instruction text.

  2. Mark Ctrl as keyboard input.

    The Ctrl token appears as a keycap.
    The kbd element tells readers this token is a key press.

  3. Mark slash as another key.

    The instruction now shows Ctrl plus slash keycaps.
    A second kbd element marks the second key in the shortcut.

  4. Mark the function name as code.

    The sentence ends with a monospace commentLine() token.
    The code element makes the function name distinct from prose.

  5. Complete the inline instruction.

    The complete shortcut instruction is visible as one paragraph.
    Closing the paragraph finalizes the inline semantic run.
kbd The kbd element marks user keyboard input.
code The code element marks a fragment of computer code inside prose.