Los elementos de frase o formato de texto indican el contexto y el significado del texto entre las etiquetas de contenedor. Depende de cada navegador interpretar ese estilo. Los elementos de frase se visualizan justo en la línea con el texto (denominado como visualización en línea) y puede aplicarse a una sección de texto o incluso a un solo carácter de texto.

Por ejemplo, el elemento <strong> indica que el texto asociado a él tiene una gran importancia y debería mostrarse de forma “fuerte” en relación con el texto normal de la página.

La siguiente tabla enumera los elementos de frase comunes y ejemplos de su uso. Note que algunas etiquetas, como <cite> y <dfn>, resultan ser el mismo tipo de visualización (cursiva) que la etiqueta <em> en los navegadores más populares. Estas etiquetas describen semánticamente el texto como una cita o definición, pero la visualización física suele ser cursiva en ambos casos.

Ejemplo simple con <strong>

Cada elemento de formato es un elemento contenedor, por lo que se deben usar una etiqueta de apertura y una de cierre. Como se muestra anterior, el elemento <strong> indica que el texto asociado tiene una importancia “fuerte”. Generalmente, el navegador (u otro agente de usuario) mostrará el texto <strong> en negrita. Un lector de pantalla, como JAWS o Window-Eyes, puede interpretar el texto <strong> para indicar que el texto debe ser más hablado. En la siguiente línea, el número de teléfono se muestra con gran importancia:

Solicite un presupuesto gratuito para sus necesidades de desarrollo web: 888.555.5555

El código correspondiente es:

<p>Solicite un presupuesto gratuito para sus necesidades de desarrollo web:
<strong>888.555.5555</strong></p>

Observe que las etiquetas de apertura <strong> y de cierre </strong> se encuentran dentro de las etiquetas de párrafo (<p> y </p>). Este código está correctamente anidado y se considera que está bien formado. Cuando se anidan incorrectamente, los pares de etiquetas <p> y <strong> se superponen entre sí en lugar de estar anidados uno dentro del otro. El código anidado incorrectamente no pasará las pruebas de validación (consulta la Sección “Validación de HTML“) y puede causar problemas de visualización.

Tabla de etiquetas de frase HTML

ElementoEjemploUso
<abbr></abbr>La WHO fue fundada en 1948.Identifica el texto como abreviatura; configura el atributo title con el nombre completo.
<b>texto en <b>negrita</b>Texto que no tiene ninguna importancia adicional, pero que está estilizado en negrita por uso y convención.
<cite><p> <cite>Gates</cite> dijo: "... Y sobre todo ten en cuenta que La información es poder" </p>Identifica una cita o referencia; normalmente se muestra en cursiva.
<code><code><?php
echo "Hola Mundo";
?></code>		Identifica ejemplos de código de programa; normalmente una fuente de “ancho fijo”, ya que todas sus letras son de la misma anchura.
<dfn><p>
El <dfn>HTML</dfn> es un lenguaje de marcado para hipertextos.
</p>		Identifica una definición de una palabra o término; normalmente se muestra en cursiva.
<em><p>
<em>La programación</em> es importante.
</p>		Hace que el texto se destaque en relación con otro texto; normalmente se muestra en cursiva.
<i><p>
Texto normal y... <i>Texto inclinado</i>
</p>		Texto que no tiene ninguna importancia adicional, pero que está escrito en cursiva por uso y convención.
<kbd><p>
Si estás de acuerdo escribe <kbd>sí</kbd>. Si no, pulsa <kbd>esc</kbd>
</p>		Marca el texto que debe introducir el usuario; normalmente una fuente de “ancho fijo”.
<mark>Mira a tu alrededor y verás que nadie es <mark>daltónico</mark>.Texto que se resalta para ser fácilmente referenciado.
<samp><p>
... entonces aparecerá una ventana con el mensaje: <samp>Hola mundo</samp>
</p>		Muestra la salida de muestra del programa; normalmente una fuente de ancho fijo.
<small><p><small>Al usar este sitio, estás de acuerdo con nuestros "Términos de uso" y nuestra "Política de privacidad".</small></p>Avisos y advertencias legales (“fine print”) en letra pequeña.
<strong><p>
Es importante el uso de <strong>etiquetas</strong> en HTML.
</p>		Gran importancia; hace que el texto sobresalga del texto circundante; normalmente se muestra en negrita
<sub><p>La fórmula química de agua es H<sub>2</sub>O</p>Muestra un subíndice como texto pequeño debajo de la línea base.
<sup><p>Notas al pie<sup>1</sup></p>Muestra un superíndice como texto pequeño por encima de la línea de base.
<var><p>
el bucle no se detendrá hasta que <var>suma</var> sea igual a 0.
</p>		Identifica y muestra una variable o salida de programa; normalmente se muestra en cursiva.

¡Comparte!

5/5 - (9 votos)