`, și` în HTML

Formatarea semantică a textului tehnic în HTML5: comenzi rapide de tastatură cu <kbd>, ieșiri de consolă cu <samp> și variabile matematice cu <var>.

Sintaxă tag

<kbd>Ctrl</kbd> + <kbd>C</kbd>, <samp>Success: 200 OK</samp>, <var>x</var>

Pentru documentația tehnică, tutoriale de programare și ghiduri de sistem, HTML5 pune la dispoziție trei taguri semantice dedicate care completează clasicul <code>:

Exemple practice pentru taste, mesaje de sistem și variabile matematice

<!-- 1. <kbd> reprezintă o tastă fizică sau o comandă tastată de utilizator -->
<p>Pentru a salva modificările în editor, apasă combinația de taste 
    <kbd>Ctrl</kbd> + <kbd>S</kbd> (sau <kbd>Cmd</kbd> + <kbd>S</kbd> pe macOS).
</p>

<!-- 2. <samp> reprezintă un răspuns sau un mesaj de eroare returnat de un program -->
<p>După executarea comenzii curl, serverul a returnat: 
    <samp>HTTP/1.1 200 OK - Content-Type: application/json</samp>.
</p>

<!-- 3. <var> reprezintă o variabilă matematică sau un parametru dintr-o ecuație -->
<p>Aria cercului se calculează după formula: 
    <var>A</var> = &pi; &times; <var>r</var><sup>2</sup>, unde <var>r</var> este raza.
</p>

Stilizare CSS Recomandată pentru <kbd>

În mod nativ, browserele folosesc un font monospace pentru <kbd>. În designul web modern, este recomandat să aplici un stil care imită aspectul unei taste reale de tastatură:

kbd {
    background-color: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    box-shadow: 0 2px 0 #94a3b8;
    padding: 2px 6px;
    font-size: 0.85em;
    font-family: monospace;
}