En un documento HTML podríamos querer representar la entrada de datos o información por parte del usuario. Por ejemplo, en un documento debemos representar lo que debe indicar el usuario para realizar una acción.
Esta entrada de datos, generalmente, se hace por medio de un teclado, aunque también podrían utilizarse otras vías como comandos de voz o similares.
La etiqueta <kbd>
La etiqueta <kbd> se utiliza precisamente para representar la entrada de datos por parte del usuario. El nombre de la etiqueta proviene de keyboard, ya que tradicionalmente siempre se ha utilizado el teclado para proporcionar información por parte del usuario.
El ejemplo más común y fácil de entender es la entrada de datos mediante combinaciones de teclado para realizar una acción determinada.
Combinaciones de teclas
Veamos un ejemplo práctico de la etiqueta <kbd>. Necesitamos indicar al lector que al pulsar una cierta combinación de teclas, podrá abrir una nueva pestaña en el navegador.
Para ello, haremos lo siguiente:
<p>
Para abrir una nueva pestaña en el navegador,
pulsa la combinación de teclas <kbd>CTRL</kbd>+<kbd>T</kbd>.
</p>Ahora, podemos aprovechar CSS para dar estilo a estas etiquetas y que simulen ser teclas del teclado:
<p>
Para abrir una nueva pestaña en el navegador,
pulsa la combinación de teclas <kbd>CTRL</kbd>+<kbd>T</kbd>.
</p>kbd {
font-family: "Victor Mono", monospace;
padding: 2px 6px;
background: #eee;
border: 3px solid #bbb;
border-top-width: 1px;
border-bottom: 3px solid #777;
}La etiqueta <samp>
La etiqueta <samp> es la opuesta a la etiqueta <kbd>. Si la última representa la entrada de datos por parte del usuario a la máquina, la etiqueta <samp> nos permite representar la salida de la información que proviene de una máquina, hacia el usuario.
Mediante esta etiqueta podemos mostrar la salida de un programa o sistema a un usuario:
<p>
<strong>Internet Explorer</strong> mostró un mensaje: <samp>Error: Todo ha ido bien</samp>.
</p>De esta forma, podemos indicar tanto entrada como salida de datos desde una máquina.
