tRikSonic

HTML kbd Tag

Terakhir diperbarui : 23 Mei 2018 - 16.52

Tutorial HTML <kbd>

HTML kbd Tag - belajar html kbd, element kbd adalah salah satu dari tag phrase atau frase, elemen ini mendefinisikan input keyboard .
background html

Contoh Tag Phrase adalah sebagai berikut

  1. <em>
  2. <code>
  3. <kbd>
  4. <samp>
  5. <strong>
  6. <var>

Contoh penerapan html <kbd>

<p>
 <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Delete</kbd>.
</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<p>
 <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Delete</kbd>.
</p>

</body>
</html>

Global Attributes:

Element <kbd> mencakup Global Attributes HTML.

Event Attributes:

Element <kbd> mencakup Event Attributes HTML.

Browser Support :

Desktop

ChromeYa
SafariYa
FirefoxYa
OperaYa
IEYa
EdgeYa

Mobile

Android WebviewYa
Chrome AndroidYa
Edge MobileYa
Firefox AndroidYa
Opera AndroidYa
iOs SafariYa
Samsung InternetYa

Default CSS :

Browser yang support dengan element <kbd>, mempunyai nilai default :
kbd { 
    font-family: monospace;
}
Dengan menambahkan css tambahan untuk elemen kbd, dapat membuat tampilan yang berbeda disesuaikan dengan yang diinginkan. Contoh :
kbd {
    display: inline-block;
    margin: 0 .1em;
    padding: .1em .6em;
    color: #dedede;
    background-color: #000000;
    border: 1px solid #737677;
    border-radius: 4px;
    box-shadow: 1px 1px 0 rgba(27, 25, 25, 0.62), 0 0 0 1px #000 inset;
    white-space: nowrap;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>

<style>
kbd {
    display: inline-block;
    margin: 0 .1em;
    padding: .1em .6em;
    color: #dedede;
    background-color: #000000;
    border: 1px solid #737677;
    border-radius: 4px;
    box-shadow: 1px 1px 0 rgba(27, 25, 25, 0.62), 0 0 0 1px #000 inset;
    white-space: nowrap;
}
</style>

</head>
<body>

<p>
 <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Delete</kbd>.
</p>

</body>
</html>
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.