etiquetas - ¿Cuáles son las diferencias entre kbd, samp y código en HTML?

kbd html

Question

Actualmente estoy leyendo el tutorial HTML en w3schools (sin CSS o JavaScript) y me pregunto por qué hay tantas etiquetas diferentes que se ven iguales después de todo.

Por ejemplo, no veo ninguna diferencia (óptica) entre kbd , samp y code excepto el "significado" de cada etiqueta.

Entonces mi pregunta: ¿es solo la metainformación la que difiere de estas etiquetas?

Answer 1

En HTML, obtiene diferentes cubos de sopa de etiquetas para construir sus componentes. Están la familia <TABLE> de etiquetas y propiedades relacionadas y CSS relacionados, la familia de etiquetas y propiedades <SECTION> y CSS (que se usan para crear noticias y diseños de blog, por ejemplo).

Luego hay un grupo de cosas relacionadas con SVG, la familia <OBJECT> para complementos integrados, etc. Cada función que alguna vez se agregó tiene su propio pequeño conjunto específico de términos y definiciones de dominio. Las reglas de diseño difieren, por ejemplo, no puede usar el mismo CSS con una <TABLE> como lo haría con una <SECTION> .

Entonces hay una diferencia lógica / de metadatos y una diferencia funcional / de uso. Según el navegador que esté utilizando, la hoja de estilos predeterminada del navegador puede hacer que algunos elementos sean visualmente similares si los coloca en una página, uno al lado del otro sin ninguna estructura.

La idea es que compones estas cosas una dentro de la otra, así:

<section name="blogpost">
    <article class="entry">
        <h1>Page Title</h1>
        <p>Hello world.</p>

con CSS que se ve algo así como:

section p {
    margin-top:1.5em;
    margin-bottom:1.5em;
}
article h1+p {
    margin-top:1em;
}

Si toma el contexto <p> del <article> o quita el <h1> anterior, el CSS que lo diferencia de un <p> regular no funcionará. Los estilos de navegador predeterminados son similares.

Estudia cómo se usan estas categorías de etiquetas. Mira algún código de ejemplo de Twitter Bootstrap.

Todas estas etiquetas son para 1) usar, 2) motores de búsqueda para comprender, 3) usted / alguien para entender más tarde.

Simplemente aprenda cuáles son los diferentes segmentos y comience a usar las etiquetas; en realidad no hay tantas categorías de ellos.

Answer 2

El elemento kbd representa la entrada del usuario. Los ejemplos para la entrada del usuario son:

Entrada clave

<p>Please, press <kbd><kbd>Shift</kbd>+<kbd>A</kbd></kbd></p>   

Comando de terminal

<p>Please, input "<kbd>Yes</kbd>" or "<kbd>No</kbd>"</p>

Botones o Menú (GUI-Entrada)

<kbd>File | Open...</kbd>

Archivo | Abierto...

El elemento samp representa la salida de un programa o sistema informático. Por ejemplo, un cmd de salida:

Cómo se ve en HTML usando samp :

 Directory of D:/mydir

11/15/2007  03:03 PM    <DIR>          .
11/15/2007  03:03 PM    <DIR>          ..
11/15/2007  01:38 PM                 0 10oct2006.txt
11/08/2007  04:28 PM               368 11nov2007.do
11/15/2007  01:39 PM                 0 5june2007.txt
03/11/2007  10:39 AM         1,869,429 beameruserguide.pdf
08/10/2007  01:24 PM            22,016 blog - jsm 2007.doc
04/25/2007  03:07 PM           199,887 clarify.pdf
11/15/2007  01:40 PM                 0 houseplants.txt
04/25/2007  11:42 AM           371,225 Mardia 1970 - multivar skew and kurt.pdf
03/27/2007  01:18 PM           319,864 multiple imputation a primer by schafer.pdf
11/15/2007  02:49 PM                 0 output 1.txt
11/15/2007  02:49 PM                 0 output 2.txt
11/15/2007  02:49 PM                 0 output 3.txt
11/15/2007  02:49 PM                 0 output 4.txt
11/08/2007  03:59 PM             8,514 results.dta
11/15/2007  01:31 PM    <DIR>          sub1
11/15/2007  01:31 PM    <DIR>          sub2
11/14/2007  04:27 PM               952 test.txt
05/21/2007  03:23 PM         1,430,743 zelig.pdf
              18 File(s)      4,225,738 bytes
               4 Dir(s)  249,471,307,776 bytes free

El elemento de code representa un fragmento de código de computadora. Ejemplos de código de computadora son: nombre de elemento XML, nombre de archivo, programa de computadora, etc.

Ejemplo de código:

<pre>
  <code>
  function Panel(element, canClose, closeHandler) {
    this.element = element;
    this.canClose = canClose;
    this.closeHandler = function () { if (closeHandler) closeHandler() };
  }
  </code>
</pre>

También quiero decir que tienes razón en términos de apariencia visual. A lo sumo hay una diferencia de nota entre kbd, samp y código. Todos ellos usan el mismo tipo de fuente. Sin embargo, sería mejor que lo usara para que se lo describa, porque el sistema hace una diferencia entre ellos.

Answer 3

Correcto. El significado semántico es diferente. La representación predeterminada es usar un tipo de letra monoespacial porque es el más apropiado.

<kbd> representa la entrada del teclado, aunque lo representa como claves reales .

<samp> representa la salida de la computadora de muestra, y originalmente las computadoras se monospaciaron :)

<code> representa la entrada del código de programación, y la gran mayoría de los lenguajes de programación están diseñados para asumir una fuente de editor monoespaciado, excepto el libro de C ++ que prefiere el ancho variable, por alguna razón, y algunas razas de Python. Tenga en cuenta que <code> es un elemento en línea, mientras que <pre> se usa para el marcado de nivel de bloque (es decir, párrafos) de código.

El hecho de que la representación predeterminada sea la misma no significa que no pueda asignar sus propios estilos de representación como lo hace .