Etiquetas de formato

En cualquier texto es habitual destacar algunas palabras por su importancia o por su significado, es decir, darle una vorma que visulamente la haga diferente del resto del texto. Esto se puede hacer de múltiples maneras: color, negrita, cursiva, subrayados... En HTML estos aspectos se consiguen encerrando el texto que queremos modificar entre un par de etiquetas de formato.

Etiqueta Descripción
<b> Texto en negrita, solo destaca el texto
<em> Da énfais al texto, es algo importante
<i> Pone el texto en cursiva, se suele usar para palabras textuales.
<small> Pone el texto algo más pequeño.
<strong> Texto en negrita, indica texto muyimportante
<sub> Para escribir subíndices
<sup> Para escribir superíndices
<ins> Indica texto insertado, usado para resaltar modificaciones realizadas en el documento.
<del> Indica texto borrado, tachado, usado para resaltar modificaciones del documento
<mark> Para marcar un texto, pone un fonfdo amarillo y texto negro. Marca un t3exto de especial relevancia (por ejemplo resultado de una búsqueda, solución en un ejercicio)

Todas estas etiquetas se usan con apertura y cierre (<b> </b>) y dan al texto un aspecto predefinido: negrita, cursiva, tamaños... pero todos pueden modificarse mediante reglas 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 tienen significado semántico, es decir, además del aspecto dice algo de su función en el documento (por ejemplo importancia o resultado de cambios). Y esto último es importante para los buscadores.

<!doctype html>
<html>
<head lang="es-ES">
<title> mi primera página</title>
</head>
<body>
<p><h1>Las tecnologias de lecturas</h1></p>
<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>. No es necesrio preocuparse por el tpipo pues todos los lectores usan pantllas mates en blanco y negro, muy cómodas para la vista. 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>
</body>
</html>
Código HTML5 de la página de ejemplo02.

Crea una página como la del ejemplo (ejercicio02.htm) y prueba las distintas etiquetas explicadas aquí. Y ten encuenta que cualquiera de ellas puede modificarse con tan solo unas lineas de código CSS. Pruebalo con este código al ejercicio02 y guardalo como ejercicio02a.htm

<!doctype html>
<html>
<head lang="es-ES">
<title> mi primera página</title>
<style>
em {
font-weight: bold;
font-style:italic;
text-decoration:underline;
}
</style>
</head>
Modificando la etiqueta predefinida <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 redefinir estas etiquetas.

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