Crea tu web, tutor html, css

Etiquetas de formato

Cuando leemos un texto vemos que algunas palabras o fragmentos están escritos en negrita o en cursiva o en un tamaño diferente, sabemos que eso impllica que ese texto es especial por algún motivo: por su importancia o su significado o por enfatizarlo o por que es una cita, etc.. Y este significado lo conocemos porque sabemos leer, es el aspecto visual, su estilo, lo que nos ayuda a interpretarlas.

En HTML 5 esa diferenciación del texto no es solo visual, va más a nivel de significados: si un analizador recorre nuestra página y ve una etiqueta la interpreta. Por ejemplo si ve un texto entre las etiquetas <strong></strong> interpreta que ese fragmento es de suma importancia para el contendio global de la página.

Las eqtiquetas de formato son también etiquetas de nivel semántico. A veces el aspecto que dan al texto no es tan relevante como deseamos, para eso tenemos las hojas de estilo. Mediante CSS podemos redefinir el formato de cualquier etiqueta de HTML. Así que si vas a poner un texto en negrita debes pensar porque y para qué lo haces, que quieres transmitir con eso. En este grupo cito las etiquetas que si cambian el aspecto del texto, van en línea y su interpretación va en función del contenido restante de la página:

Etiqueta Formato Ejemplo
<b> Texto en negrita, solo destaca una parte del texto <b>texto en negrita</b>
<em> Da énfais al texto, es algo importante, que se quiere recalcar en el texto. <em>texto enfatizado</em>
<i> Pone el texto en cursiva, se suele usar para palabras textuales. Saludó con un <i>"Hola"</i>
<small> Pone el texto algo más pequeño, usado en notas a pié de página, lo que conocemos como letra pequeña en contratos. Texto <small>small, pequeño</small>
<strong> Texto en negrita, indica texto muy importante <strong>Aviso importante</strong>
<sub> Para escribir subíndices El témino a<sub>2</sub>: El término a2
<sup> Para escribir superíndices E=m·c<sup>2</sup>: E=m·c2
<ins> Indica texto insertado, usado para resaltar modificaciones realizadas en el documento. Texto <ins>cambiado</ins>
<del> Indica texto borrado, tachado, usado para resaltar modificaciones del documento Eliminiar <del>esta parte</del>
<mark> Para marcar un texto, pone un fondo amarillo y texto negro. Marca un texto de especial relevancia <mark>Aviso</mark> No tocar esta parte

Todas estas etiquetas se usan con apertura y cierre (<b> </b>) y dan al texto un aspecto predefinido: negrita, cursiva, tamaños, color... pero todas pueden modificarse mediante reglas de estilo CSS, bien sea mediante los atributos class o style, o redefiniendo directamente la etiqueta (por supuesto con las reglas CSS).

Fíjate que, a diferencia de HTML4, estas etiquetas de formato realmente son importantes por su significado semántico, es decir, además del aspecto de un fragmento de texto, dice algo de su función en el documento (por ejemplo importancia o resultado de cambios). Y esto último es importante para los buscadores. Por eso aunque <b> y <strong> ponen los textos en negrita no son etiquetas exactamente iguales, un robot que explore la página verá diferencias en esos textos. En este caso el elmento <b> solo reslta el el texto al que se aplica para fijar la atención sobre el mismo, mientras que al usar <strong> lo que se prentende es remarcar la importancia de un texto o palabra. No son sinònimos aunque el efecto visual sea el mismo.

<!doctype html> <html> <head lang="es-ES"> <title> mi primera página</title> </head> <body> <article> <h1>Las tecnologias de lectura</h1> <p>Cuando comprarmos un <b>lector electrónico</b> la cosa cambia. Lo fundamental es considerar que <strong>formatos acepta</strong>, luego es también importante el <strong>tamaño de la pantalla</strong>. <p>No es necesario preocuparse por el tipo pues todos los lectores usan pantallas mates en blanco y negro, muy cómodas para la vista.</p> <p>Existen multitud de marcas, como <em>kindle</em>, de Amazon, los <em>Touch</em> de la FNAC y tantos otros. Una cualidad de los actuales lectores es la <strong>pantalla táctil</strong>. Luego están las opciones como luz integrada, fundas y otros accesorios.</p> <mark>Nota: Los libros electrónicos también pueden leerse en tablets y smartphones</mark> </article> <p><small>copyright del autor 2019</small></p> </body> </html>
Código HTML5 de la página de ejemplo02.htm

Crea una página como la del ejemplo (ejercicio02.htm) y prueba las distintas etiquetas explicadas aquí. Y ten en cuenta que cualquiera de ellas puede modificarse con tan solo unas lineas de código CSS. Pruebalo áñadiendo este código ala página anterior y guardalo con el nombre ejercicio02a.htm. Ahora puedes comparar ambas y verás que sin cambiar nada en la sección body los elementos y se ven diferentes.

<!doctype html>
<html lang="es-ES">
<head>
<title> mi primera página</title>
<style>
em {
font-weight: bold;
font-style:italic;
text-decoration:underline;
}
mark{ background-color: lightgrey;}  
</style> 
</head>
<body>
Ahora la etiqueta em <em>está en negrita, cursiva y subrayado</em>.
</body>
</html>
Modificando estilos de elementos predefinidos <em>.

Si pones esto en la página verás que ahora la etiqueta <em> no solo escribe en cursiva el texto marcdo con <em>, sino también en negrita y con el texto subrayado. Prueba a usar las distintas etiquetas para comprobar sus efectos. Y si ya has mirado algo de CSS puedes también redefinirlas con reglas de estilo apra comprobar los efectos de cada una.

Respecto a los estilos, si estas reglas las reescribes en un archivo de estilo independiente, al modificarlas se verán afectados todas las páginas que usen ese archivo de estilos; algo que te permitie cambiar el aspecto de todo tu sitio sin necesidad de ir modificando página por página. Esto lo puedes ver en el tutor de CSS

Aunque dos etiquetas apliquen un estilo predefinido similar, para HTML 5 no son etiquetas iguales.