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

**URL:** <https://discuss.kakoune.com/t/what-is-the-good-semantic-for-drawing-a-keyboard-layout-in-html/651>\
**Category:** Off Topic\
**Tags:** keyboard\
**Created:** [July 9, 2019, 11:07am UTC](https://discuss.kakoune.com/t/what-is-the-good-semantic-for-drawing-a-keyboard-layout-in-html/651 "2019-07-09T11:07:46Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![alexherbo2](https://discuss.kakoune.com/user_avatar/discuss.kakoune.com/alexherbo2/32/1140_2.png) [@alexherbo2](https://discuss.kakoune.com/u/alexherbo2)\
**Post date:** [July 9, 2019, 11:07am UTC](https://discuss.kakoune.com/t/what-is-the-good-semantic-for-drawing-a-keyboard-layout-in-html/651/1 "2019-07-09T11:07:46Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Screwtapello](https://discuss.kakoune.com/user_avatar/discuss.kakoune.com/screwtapello/32/12_2.png) [@Screwtapello](https://discuss.kakoune.com/u/Screwtapello)\
**Post date:** [July 9, 2019, 11:37am UTC](https://discuss.kakoune.com/t/what-is-the-good-semantic-for-drawing-a-keyboard-layout-in-html/651/2 "2019-07-09T11:37:47Z")

</div>

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:

```auto
<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>
</ul>

```

```css
#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.

---

<div class="post-metadata">

**Author:** ![alexherbo2](https://discuss.kakoune.com/user_avatar/discuss.kakoune.com/alexherbo2/32/1140_2.png) [@alexherbo2](https://discuss.kakoune.com/u/alexherbo2)\
**Post date:** [July 9, 2019, 2:03pm UTC](https://discuss.kakoune.com/t/what-is-the-good-semantic-for-drawing-a-keyboard-layout-in-html/651/3 "2019-07-09T14:03:33Z")

</div>

@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).

---

<div class="post-metadata">

**Author:** ![Delapouite](https://discuss.kakoune.com/user_avatar/discuss.kakoune.com/delapouite/32/10_2.png) [@Delapouite](https://discuss.kakoune.com/u/Delapouite)\
**Post date:** [July 10, 2019, 6:45am UTC](https://discuss.kakoune.com/t/what-is-the-good-semantic-for-drawing-a-keyboard-layout-in-html/651/4 "2019-07-10T06:45:46Z")

</div>

I would take the one on [https://qwerty-lafayette.org/](https://qwerty-lafayette.org/)

---

<div class="post-metadata">

**Author:** ![Screwtapello](https://discuss.kakoune.com/user_avatar/discuss.kakoune.com/screwtapello/32/12_2.png) [@Screwtapello](https://discuss.kakoune.com/u/Screwtapello)\
**Post date:** [July 10, 2019, 6:52am UTC](https://discuss.kakoune.com/t/what-is-the-good-semantic-for-drawing-a-keyboard-layout-in-html/651/5 "2019-07-10T06:52:08Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![andreyorst](https://discuss.kakoune.com/user_avatar/discuss.kakoune.com/andreyorst/32/29_2.png) [@andreyorst](https://discuss.kakoune.com/u/andreyorst)\
**Post date:** [July 10, 2019, 11:29am UTC](https://discuss.kakoune.com/t/what-is-the-good-semantic-for-drawing-a-keyboard-layout-in-html/651/6 "2019-07-10T11:29:26Z")

</div>

`1234567890-=⠀Bcksp⠀  
 TabQWERTYUIOP{}|⠀⠀⠀  
 CapsASDFGHJKL;'Return⠀  
 ShiftZXCVBNM\<\>?⠀ Shift ⠀  
 CtrlMetaAlt⠀⠀⠀⠀⠀⠀⠀Space⠀⠀⠀⠀⠀⠀⠀AltCtrl

`~1!2@3#4$5%6^7&8\*9(0)-\_=+Bcksp  
 TabqQwWeErRtTyYuUiIoOpP[{]}\|⠀  
 CapsaAsSdDfFgGhHjJkKlL;:’"Return  
 ShiftzZxXcCvVbBnNmM,\<.\>/?⠀ Shift ⠀  
 CtrlMetaAlt⠀⠀⠀⠀⠀⠀⠀⠀⠀Space⠀⠀⠀⠀⠀⠀⠀⠀⠀AltCtrl

---

<div class="post-metadata">

**Author:** ![robertmeta](https://discuss.kakoune.com/user_avatar/discuss.kakoune.com/robertmeta/32/833_2.png) [@robertmeta](https://discuss.kakoune.com/u/robertmeta)\
**Post date:** [July 10, 2019, 1:53pm UTC](https://discuss.kakoune.com/t/what-is-the-good-semantic-for-drawing-a-keyboard-layout-in-html/651/7 "2019-07-10T13:53:38Z")

</div>

That looks legit awesome.

---

<div class="post-metadata">

**Author:** ![duncan](https://discuss.kakoune.com/user_avatar/discuss.kakoune.com/duncan/32/95_2.png) [@duncan](https://discuss.kakoune.com/u/duncan)\
**Post date:** [July 17, 2019, 5:51am UTC](https://discuss.kakoune.com/t/what-is-the-good-semantic-for-drawing-a-keyboard-layout-in-html/651/8 "2019-07-17T05:51:20Z")

</div>

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](http://www.keyboard-layout-editor.com/).

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.  
[KeyCode.kt](https://github.com/edvin/tornadokeyboard-configurator/blob/master/src/main/kotlin/no/tornado/keyboard/models/KeyCode.kt)  
[Top level models](https://github.com/edvin/tornadokeyboard-configurator/tree/master/src/main/kotlin/no/tornado/keyboard/models)