Código de computadora HTML

Los tutoriales y la documentación suelen mostrar comandos, nombres de propiedades y fragmentos HTML. Si pega ese texto en un párrafo normal, el navegador puede colapsar espacios y tratar < como el inicio de una etiqueta real. HTML ofrece elementos pensados para texto de computadora a fin de que los ejemplos sigan siendo legibles y seguros. Esta sesión le ayuda a elegir el elemento adecuado para cada rol: un token corto dentro de una frase, un bloque de varias líneas, una tecla que pulsa el usuario o la salida de ejemplo de un programa. Separar estos roles hace páginas de explicación más claras para lectores y herramientas de asistencia, y evita el error habitual de que el ejemplo se convierta en elementos vivos en el documento.

¿Qué son los elementos de código de computadora?

Estos elementos marcan texto que representa código, entrada de teclado o salida de programa — no prosa ordinaria. Ayudan al navegador a elegir una fuente predeterminada adecuada (a menudo monoespaciada para code y pre) y indican a las ayudas técnicas que el tramo está relacionado con la computadora. Usted sigue escribiendo los caracteres; las etiquetas aportan significado y, con pre, conservan el diseño. No cambian la lógica detrás de la página; su trabajo es semántico y de presentación. Si marca cada palabra técnica con code sin necesidad, confunde al lector; si deja código multilínea sin pre, la sangría que quería mostrar puede desaparecer.

Respuesta directa

Use code para un fragmento corto dentro de una frase. Use pre cuando deban permanecer espacios y saltos de línea. Un patrón habitual de bloque es <pre><code>...</code></pre>. Marque teclas con kbd y salida de ejemplo con samp cuando esos roles sean reales. Cuando el propio ejemplo es HTML, escriba < y > en lugar de < y > crudos para que el navegador no construya elementos vivos por accidente. Este hábito sencillo protege las páginas de tutorial: el lector ve los caracteres que usted quería mostrar, no un párrafo creado por error en medio del ejemplo.

Elementos de un vistazo

Código en línea

Cuando menciona un token corto dentro de una frase, envuélvalo en code. La palabra queda visualmente distinta sin forzar un bloque completo. Este patrón encaja con nombres de propiedades, comandos cortos y nombres de funciones en medio de la explicación. No marque cada palabra técnica del párrafo; reserve code para los tokens que el lector deba localizar con rapidez.

Lectura del ejemplo

• La frase es texto normal de párrafo
• Solo el nombre de la propiedad está dentro de code
• El lector puede escanear el token técnico con rapidez
• Esto no es un listado multilínea — para eso use pre
• La fuente predeterminada suele ser monoespaciada, pero el significado importa más que el aspecto solo
• Puede repetir varios elementos code en el mismo párrafo si menciona más de un token

Bloques con pre y code

pre significa preformateado: los espacios y saltos de línea se conservan aproximadamente como los escribió. Anidar code dentro de pre es un patrón claro para un bloque de código. En ejemplos HTML, codifique los corchetes angulares. Sin pre, las reglas normales de espacios en blanco de HTML pueden aplanar sangrías y líneas en una sola línea densa. La combinación deja claro a lectores y herramientas que el contenido es código con el diseño conservado.

Por qué importa la codificación

Si escribe un <p> crudo dentro de la página del tutorial, el navegador puede crear un párrafo real en lugar de mostrar los caracteres <p>. Codificar como <p> muestra el ejemplo con seguridad. La sesión de Entidades profundiza en las referencias de caracteres; aquí solo necesita el hábito de los corchetes angulares en demos HTML. Pegue una vez una etiqueta cruda, recargue, luego codifíquela: la diferencia se ve al instante y se recuerda mejor que la teoría sola. La codificación afecta al texto del ejemplo en su página, no al lenguaje HTML que está aprendiendo.

Entrada de teclado y salida de ejemplo

Use kbd cuando describa teclas que el usuario pulsa. Use samp cuando muestre salida de ejemplo de un programa o comando. Sea honesto: no marque palabras ordinarias como kbd solo por el aspecto monoespaciado. Si el texto es un nombre de propiedad CSS, code encaja mejor; si es un atajo de teclado, kbd es la opción correcta. Esta separación semántica hace la documentación más clara y ayuda a los lectores de pantalla a entender el tipo de contenido.

Práctica en el editor

1. Escriba una frase que mencione la propiedad font-size dentro de code.
2. Añada un bloque pre+code con dos líneas HTML cortas usando < y >.
3. Añada una línea de consejo con kbd para un atajo de guardar.
4. Opcional: una línea samp con salida de comando ficticia.
5. Guarde y abra — confirme que los espacios dentro de pre permanecen y que las etiquetas codificadas se muestran como texto.
6. Pegue temporalmente un <div> crudo en el bloque sin codificar, recargue, vea el problema y luego codifíquelo.
7. Revise el párrafo: ¿cada kbd representa una tecla real? ¿La prosa normal quedó fuera de pre?
   Siga los pasos en orden; el sexto hace tangible el riesgo de las etiquetas crudas. Si desaparecen las sangrías, compruebe que el bloque está dentro de pre y que no cerró la etiqueta demasiado pronto. Si aparece un apartado o párrafo nuevo en medio del ejemplo, casi siempre falta la codificación.

Errores que rompen los ejemplos

• Poner código multilínea solo en code sin pre — los saltos de línea y la sangría pueden colapsar
• Pegar <div> o <p> crudos sin codificar — se convierten en un elemento vivo
• Usar pre para artículos largos de prosa normal (es para texto de computadora preformateado, no para ensayos)
• Marcar cada palabra técnica con kbd cuando no es entrada de teclado
• Olvidar cerrar pre o code de modo que el texto posterior quede atrapado en el estilo preformateado
• Confiar solo en el aspecto monoespaciado sin elegir el elemento según el significado
• Codificar algunos corchetes y dejar otros crudos en el mismo ejemplo — parte texto, parte etiquetas vivas

Resumen

• code marca texto corto de computadora en línea
• pre conserva espacios y saltos de línea para bloques
• Combinar pre y code es un patrón multilínea habitual
• Codifique < y > en ejemplos HTML como < y >
• kbd y samp cubren entrada de teclado y salida de ejemplo cuando esos roles encajan
• Elija el elemento según el significado del texto, no solo por la fuente predeterminada
• Tras guardar, compruebe: ¿el lector ve los caracteres que usted quería mostrar?
  Así las páginas de tutorial quedan más claras y seguras: tokens cortos en la frase, bloques con diseño conservado, teclas y salida en sus roles correctos, y codificación que evita que el ejemplo se convierta en elementos vivos.