What is the good semantic for drawing a keyboard layout in HTML?

I want to create an interactive help using the keyboard as display, but I’m not sure about the correct tags to use for it.

It depends how fancy you want to get. If you’re OK with a lot of manual entry, you could just use any old element for the keys, and position and style them with CSS:

<ul id="keyboard">
    <li id="key_q">Q</li>
    <li id="key_w">W</li>
    <li id="key_e">E</li>
    <li id="key_r">R</li>
#keyboard {
    margin: 0;
    padding: 0;
    position: relative;
#keyboard li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    width: 3em;
    height: 3em;
#key_q { left: 0; top: 0; }
#key_w { left: 3em; top: 0; }
#key_e { left: 6em; top: 0; }
#key_r { left: 9em; top: 0}

On the other hand, if that sounds like a lot of work, it might be easier to just draw a keyboard in a tool like Inkscape and display the SVG in the browser instead.

@Screwtapello <ul> / <li> is not an abuse semantically to draw a keyboard? Ideally I would like to generate the HTML from JS (could be as well SVG).

I would take the one on https://qwerty-lafayette.org/

There’s no HTML element for “a visual representation of a keyboard”. There’s <kbd> for “text typed by the user”, but that’s not really the same thing. Maybe <ol>/<li> would be better, since it really does matter what order the keys are in. On the other hand, the document order (one long list) is quite different from the visual order (a slanted grid) so it’s not much of an improvement.

If you wanted to make it better-looking when unstyled, you could add a <span> with the key-name for each key and then hide that label with CSS.

ShiftZXCVBNM<>?⠀ Shift ⠀

ShiftzZxXcCvVbBnNmM,<.>/?⠀ Shift ⠀

1 Like

That looks legit awesome.

This will help if you need quick prototyping of a concept. It’s all web based and provides css styles as well. keyboard layout editor.

Nicely done Andrey.

Found this on my journeys today it may help it may not. Just felt bad if I didn’t share as it may save you some time with the grunt work. It’s nice code well set out and easy to edit.
Top level models