Newer
Older
---
title: "Style Guide"
teaching: 10
exercises: 0
questions:
objectives:
- "Explain keyboard key combination."
keypoints:
- "Keyboard keys need to use `<kbd>` HTML tag."
---
## Keyboard Key
When making reference to a keyboard key that the reader should press
the HTML tag `<kbd>` **must** be used to enclose the key label.
For example, "to delete the cell press <kbd>D</kbd>" should be write as
~~~
to delete the cell press <kbd>D</kbd>
~~~
The table below covers most of the keyboard key labels.
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|-------------------+--------------------------------------------------------------------+--------------------------|
| Keyboard key | Style Note | Example |
|-------------------+--------------------------------------------------------------------+--------------------------|
| Letters | Always capital. | `<kbd>A</kbd>` |
|-------------------+--------------------------------------------------------------------+--------------------------|
| Numbers | | `<kbd>1</kbd>` |
|-------------------+--------------------------------------------------------------------+--------------------------|
| Pontuation mark | | `<kbd>*</kbd>` |
|-------------------+--------------------------------------------------------------------+--------------------------|
| Function | Capital F followed by the number. | `<kbd>F12</kbd>` |
|-------------------+--------------------------------------------------------------------+--------------------------|
| Alt | Only first letter capital. | `<kbd>Alt</kbd>` |
|-------------------+--------------------------------------------------------------------+--------------------------|
| Backspace | Only first letter capital. | `<kbd>Backspace</kbd>` |
|-------------------+--------------------------------------------------------------------+--------------------------|
| Ctrl | Only first letter capital. | `<kbd>Ctrl</kbd>` |
|-------------------+--------------------------------------------------------------------+--------------------------|
| Delete | Only first letter capital. | `<kbd>Delete</kbd>` |
|-------------------+--------------------------------------------------------------------+--------------------------|
| End | Only first letter capital. | `<kbd>End</kbd>` |
|-------------------+--------------------------------------------------------------------+--------------------------|
| Esc | Only first letter capital. | `<kbd>Esc</kbd>` |
|-------------------+--------------------------------------------------------------------+--------------------------|
| Home | Only first letter capital. | `<kbd>Home</kbd>` |
|-------------------+--------------------------------------------------------------------+--------------------------|
| Insert | Only first letter capital. | `<kbd>Insert</kbd>` |
|-------------------+--------------------------------------------------------------------+--------------------------|
| Page Down | Use "PgDn". | `<kbd>PgDn</kbd>` |
|-------------------+--------------------------------------------------------------------+--------------------------|
| Page Up | Use "PgUp". | `<kbd>PgUp</kbd>` |
|-------------------+--------------------------------------------------------------------+--------------------------|
| Print Screen | Use "PtrScr". | `<kbd>PtrScr</kbd>` |
|-------------------+--------------------------------------------------------------------+--------------------------|
| Return | Only first letter capital. We use "Return" instead of "Enter". | `<kbd>Return</kbd>` |
|-------------------+--------------------------------------------------------------------+--------------------------|
| Shift | Only first letter capital. | `<kbd>Shift</kbd>` |
|-------------------+--------------------------------------------------------------------+--------------------------|
| Tab | Only first letter capital. | `<kbd>Tab</kbd>` |
|-------------------+--------------------------------------------------------------------+--------------------------|
| Down arrow | Use Unicode "Downwards arrow" (8595). | `<kbd>↓</kbd>` |
|-------------------+--------------------------------------------------------------------+--------------------------|
| Left arrow | Use Unicode "Leftwards arrow" (8592). | `<kbd>←</kbd>` |
|-------------------+--------------------------------------------------------------------+--------------------------|
| Right arrow | Use Unicode "Rightwards arrow" (8594). | `<kbd>→</kbd>` |
|-------------------+--------------------------------------------------------------------+--------------------------|
| Up arrow | Use Unicode "Upwards arrow" (8593). | `<kbd>↑</kbd>` |
|-------------------+--------------------------------------------------------------------+--------------------------|
## Keyboard Key Combination
When making reference to a keyboard key combination that the reader should press,
insert a plus sign **without sapce** between each one of the keys.
For example, "press <kbd>Ctrl</kbd>+<kbd>X</kbd> to quit nano" should be write as
~~~
press <kbd>Ctrl</kbd>+<kbd>X</kbd> to quit nano.
~~~
{: .html}
## Links
Please label links with meaningful texts, in order to [improve
accessibility](https://webaccess.berkeley.edu/ask-pecan/click-here). Please avoid
`click here` or similar.