Etiquetas de frase en HTML

-

Tipos de Etiquetas de Frase

Etiqueta <em>

La etiqueta <em> enfatiza el texto dentro de un documento HTML. El texto dentro de la etiqueta <em> suele aparecer en cursiva para separarlo visualmente del texto circundante. Esta etiqueta muestra un énfasis destacado en el texto, sugiriendo que debe leerse con un tono o ritmo diferente en comparación con el resto del contenido.

Consejo: Ejemplo de uso

<p>Este es un ejemplo de <em>texto enfatizado</em> usando la etiqueta <em>.</p>

Etiqueta <strong>

La etiqueta <strong> indica texto importante dentro de un documento HTML. El texto dentro de la etiqueta <strong> suele aparecer en negrita para resaltar visualmente su importancia. Esta etiqueta significa que el texto es muy importante o urgente, y debe dársele más peso que al contenido circundante.

Consejo: Ejemplo de uso

<p>Este es un ejemplo de <strong>texto importante</strong> usando la etiqueta <strong>.</p>

Etiqueta <code>

La etiqueta <code> representa un fragmento de código de computadora dentro de un documento HTML. El texto dentro de la etiqueta <code> suele aparecer en una fuente monoespaciada, que es una fuente de ancho fijo que alinea los caracteres verticalmente. Esta etiqueta se usa comúnmente para mostrar fragmentos de código, palabras clave de lenguajes de programación o nombres de archivos.

Consejo: Ejemplo de uso

<p>Para declarar una variable en JavaScript, use la palabra clave <code>let</code> seguida del nombre de la variable.</p>

Etiqueta <kbd>

La etiqueta <kbd> representa entrada de usuario o teclas de teclado dentro de un documento HTML. El texto dentro de la etiqueta <kbd> suele aparecer en una fuente monoespaciada, similar a la etiqueta <code>. Esta etiqueta muestra que el texto representa una pulsación de tecla o una combinación de pulsaciones de teclas que un usuario debe introducir.

Consejo: Ejemplo de uso

<p>Para copiar texto, presione <kbd>Ctrl</kbd> + <kbd>C</kbd> en Windows o <kbd>Command</kbd> + <kbd>C</kbd> en Mac.</p>

Etiqueta <samp>

La etiqueta <samp> representa una muestra de salida de un programa de computadora dentro de un documento HTML. El texto dentro de la etiqueta <samp> suele aparecer en una fuente monoespaciada, similar a las etiquetas <code> y <kbd>. Esta etiqueta se usa para mostrar la salida o los resultados generados por un programa o script.

Consejo: Ejemplo de uso

<p>Después de ejecutar el programa, la salida será: <samp>¡Hola, Mundo!</samp></p>

Etiqueta <var>

La etiqueta <var> representa una variable en programación o expresiones matemáticas dentro de un documento HTML. El texto dentro de la etiqueta <var> suele aparecer en cursiva para separarlo visualmente del texto circundante. Esta etiqueta muestra que el texto representa una variable o un marcador de posición que puede cambiar o ser sustituido por valores reales.

Consejo: Ejemplo de uso

<p>La fórmula para calcular el área de un rectángulo es: 
<var>área</var> = <var>longitud</var> × <var>ancho</var>.</p>

Combinación de etiquetas de frase

Puedes combinar etiquetas de frase en HTML para aplicar múltiples significados semánticos a un texto. Al anidar una etiqueta de frase dentro de otra, puedes transmitir información más específica sobre el contenido. Esto es útil cuando necesitas enfatizar o resaltar ciertas partes de un fragmento de código, entrada de usuario o salida de programa.

Consejo: Uso de la etiqueta <strong> dentro de una etiqueta <code>

<p>Para declarar una constante en JavaScript, usa la palabra clave <code><strong>const</strong></code> seguida del nombre de la constante.</p>

En este caso, la etiqueta <code> muestra que "const" es un fragmento de código, mientras que la etiqueta <strong> enfatiza su importancia como palabra clave.

Consejo: Combinación de la etiqueta <em> dentro de una etiqueta <var>

<p>La fórmula para calcular el volumen de un cilindro es: <var>volumen</var> = π × <var><em>r</em></var>² × <var>altura</var>, donde <var><em>r</em></var> es el radio de la base.</p>

Aquí, las etiquetas <var> representan variables en la fórmula, mientras que la etiqueta <em> dentro de una de las etiquetas <var> enfatiza la importancia de la variable del radio.

Al combinar etiquetas de frase, puedes crear un marcado HTML más significativo y semánticamente rico que transmita mejor la estructura y la importancia de tu contenido tanto a los lectores humanos como a las tecnologías de asistencia.