Formato de texto en HTML

Cuando leemos un texto vemos que algunas palabras o fragmentos están escritos en negrita o en cursiva o en un tamaño o color diferente, sabemos que eso implica 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 al leer el documento ese texto con un aspecto visual diferente va a llamar nuestra atención. Y su estilo nos ayuda a interpretar ese texto. Ese texto especial tiene un formato diferente.

En HTML el formato de texto lo describimos con etiquetas y se ven en negrita o se ve en cursiva. Hey, ¿Dos etiquetas diferentes para el mismo efecto? Sigue leyendo.

Pero hay más. En HTML 5 esta diferenciación del texto (nerita, cursiva, citas) no es solo visual, va más a nivel de significados: si un robot recorre nuestra página y ve una etiqueta la interpreta. Por ejemplo si ve un texto entre las etiquetas  interpreta que ese fragmento es de suma importancia para el contenido global de la página.

En HTML5 las etiquetas de formato son también etiquetas de nivel semántico. A veces el aspecto que dan al texto no es tan relevante como deseamos o no va bien con el estilo general, 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 o cursiva o subrayado debes pensar porque y para qué lo haces, que quieres transmitir con eso.

En esta tabla de formatos tienes un resumen de las etiquetas para dar cambiar el aspecto del texto en HTML, se usan en el código de la página y su significado va en función del contexto:

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 a₂
<sup>	Para escribir superíndices	E=m·c<sup>2</sup>: E=m·c²
<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 () y dan al texto un aspecto predefinido: negrita, cursiva, tamaños, color... pero todas pueden modificarse mediante reglas de estilo CSS, o redefiniendo directamente la etiqueta (por supuesto con las reglas CSS).

Fíjate que, a diferencia de las versiones anteriores de HTML, en la versión actual estas etiquetas de formato realmente son importantes por su significado semántico, es decir, además de modificar el aspecto de un fragmento de texto, el formato 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 ejemplo, quizás te hayas preguntado ¿en que se diferencian y ? ¿o y ? Ambos ponene el texto en negrita. Visualmente son iguales. Pero no son etiquetas exactamente iguales, un robot que explore la página verá diferencias en esos textos. En este caso el elemento  solo resalta el el texto al que se aplica para fijar la atención sobre el mismo, mientras que al usar lo que se prentende es remarcar la importancia de un texto o palabra. No son sinònimos aunque el efecto visual sea el mismo.

Lo mismo ocurre con las etiquetas y /, ambas convierten el texto en cursiva pero la etiqueta está dando peso extra al texto, no solo visualmente sino por su importancia en el contenido de la página.

<!doctype html>

<head>

<title>mi primera página

</title>

</head>

<body>

<h1>Las tecnologias de lectura</h1>

Cuando comprarmos un lector electrónico la cosa cambia. Lo fundamental es considerar que formatos acepta, luego es también importante el tamaño de la pantalla.

No es necesario preocuparse por el tipo pues todos los lectores usan pantallas mates en blanco y negro, muy cómodas para la vista.

Existen multitud de marcas, como kindle, de Amazon, los Touch de la FNAC y tantos otros. Una cualidad de los actuales lectores es la

pantalla táctil. Luego están las opciones como luz integrada, fundas y otros accesorios.

Nota: Los libros electrónicos también pueden leerse en tablets y smartphones

</article>

copyright del autor 2019

</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 de formato 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 a la página anterior y guárdalo con el nombre ejercicio02a.htm. Ahora puedes comparar ambas y verás que sin cambiar nada en la sección body los elementos se ven diferentes.

<!doctype html>

<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 está en negrita, cursiva y subrayado.

</body>

</html>

Modificando estilos de elementos predefinidos .

Si pones esto en la página verás que ahora la etiqueta  no solo escribe en cursiva el texto marcdo con , 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 para 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, es el caso de 
y : visualmente iguales, significados diferentes.