Agregando encabezados y párrafos

Si se ha usado el Procesador Microsoft Word, resultará familiar el uso de encabezados diferenciados por orden de importancia. En HTML existen seis niveles de encabezados. Así H1 es el más importante, H2 le continúa en importancia y H6 sería el de menor importancia de todos.

 

Por ejemplo, acá se agregará un encabezado de mucha importancia:

 

Y sigue un texto de menor importancia que el anterior:

 

Html5 provee una nueva etiqueta denominada hgroup, la misma sirve para agrupar un conjunto de uno o más elementos de encabezado (h1-h6). Es decir, este nuevo elemento nos va a permitir agrupar en un mismo bloque un título y un subtítulo, eslogan o descripción. Dentro de un elemento hgroup tan solo podemos introducir etiquetas de encabezado tales como h1, h2 o h3, de forma que no permite ningún otro tipo de tag en su interior.

 

En este ejemplo tendremos agrupados el título del sitio con el slogan del sitio. Al encerrar con la etiqueta hgroup estos dos encabezados podremos establecer una asociación entre ellos, es decir podemos indicar que el slogan va asociado el título de nuestro sitio web. Por ahora no le demos importancia a la etiqueta <header> del documento.

Para colocar un nuevo párrafo se usa el tag <p>. Un párrafo consiste en un bloque de texto que está separado por líneas en blanco.

El tag </p> es opcional sirve para finalizar el párrafo. Por ejemplo:

 

En cualquier párrafo, HTML ignora los espacios múltiples: si se incorpora en una página muchos espacios en blanco continuos, el navegador solamente mostrará uno.

 


Énfasis en nuestro texto

Para destacar un texto podremos usar las etiquetas <strong> y <em>. La etiqueta <strong> muestra el texto en negrita, la etiqueta <em> muestra el texto en itálica. Desde el punto de vista semántico la etiqueta <strong> añade más importancia a un texto que la etiqueta <em>.

Aunque las etiquetas <b> y <i> formatean el texto de la misma forma que las etiquetas <strong> y <em>, la W3C desaconseja su uso ya que estas mismas se usan para crear un efecto visual sobre la página más que estructural.

Ejemplo:

 

La etiqueta <mark> se usa para marcar partes del contenido de manera que pueda resaltarse y diferenciarse del resto. Esta etiqueta se diferencia de strong y em en que no añade importancia ni énfasis a su contenido, simplemente lo marca para resaltarlo. En la mayoría de los casos estas palabras no estarían resaltadas originalmente en el contenido, sino que se resaltarían por una acción del usuario (por ejemplo, marcar en los resultados las palabras que coinciden con la búsqueda).

 


Etiqueta SMALL

Antes de HTML5, el elemento <small> era sólo de presentación que se utilizaba para escribir palabras utilizando una fuente más pequeña. En HTML5, <small> tiene algún valor semántico. Ahora el elemento <small> representa el texto que a menudo se encuentran en letra pequeña, como renuncias, advertencias, restricciones legales o derechos de autor.

Ejemplo: