Cómo crear bloques de contenido dentro de tu pagina web o sitio web.

Total
1
Shares

Estas etiquetas permiten definir bloques de contenido coherente entre unas y otras, qué estarán formado por texto, imágenes , videos , enlaces, etc.

Para los usuarios que visitan las paginas web, cada bloque de contenido se mostrará por separado del resto de bloques de contenido y estarán formando una línea de contenido a parte, como si fuera una unidad independiente del resto.

El objetivo de este post es mostrar las etiquetas de bloques de contenido como son <p> , <hr> , <pre> , <blockquote> , <figure> , <figcaption> y <main>

El bloque de contenido más básico es el párrafo que se compone con la etiqueta <p> y que hemos visto en anteriores posts introducido en otras etiquetas como las secciones y en la etiqueta <body>.

Hay otras etiquetas de bloque de contenido como son por ejemplo las lista <ol>, <ul>, <li> o la etiqueta <div> pero esas se verán en otros post con el motivo de no alargar demasiado este y hacerlo muy pesado de leer.

Párrafo: <p>

Se usa sobre todo para definir párrafos de texto e imágenes entre otros elementos.

<p>Soy un párrafo que genera un bloque de contenido aparte.</p>

<p>Soy otro párrafo que genera otro bloque de contenido independiente del anterior.</p>

<p><img src=”foto_de_gatitos.jpg” alt=”foto”>

Soy otro párrafo independiente con respecto a los anteriores que contiene una imagen de gatitos

</p>

Separador temático: <hr>

Se usa para separar párrafos y también para indicar un cambio de tema.

La mayoría de los navegadores web muestran este separador como una línea horizontal que se puede modificar con las hojas de estilo CSS.

<p>Soy un párrafo que genera un bloque de contenido aparte.</p>

<p>Soy otro párrafo que genera otro bloque de contenido independiente del anterior.</p>

<hr>

<p><img src=”foto_de_gatitos.jpg” alt=”foto”>Soy otro párrafo independiente de los anteriores que contiene una imagen de gatitos</p>

Preformateado: <pre>

Se utiliza cuando se quiere escribir un texto tal cual , conservando los espacios en blanco, los saltos de línea y los tabuladores de un texto original.

Con el resto de etiquetas, los navegadores web no mostrarán ni las líneas en blanco ni varios espacios en blanco seguidos.

Esta etiqueta mostrar todos sus textos en el formato de letra Courier.

Se suele usar para mostrar datos estructurados de forma básica como si fuera una tabla aunque lo recomendable es usar las etiquetas  especiales para tablas como son la <table><th><tr> y <td> .

La etiqueta <pre> respetara todos los espacios en blanco, dando un aspecto de columnas alineadas pero si se utilizan las etiquetas <p> , el navegador web no respeta los espacios en blanco ni los saltos de línea , se perderá toda la alineación predeterminada

<pre>Coche     Modelo         Precio

Mercedes        A.Compacto    28.799.99 €

Opel                 Adam               7.420 €

</pre>

 

<p>Coche       Modelo         Precio

Mercedes        A.Compacto    28.799.99 €

Opel                Adam                 7.420 €

</p>

El resultado sería muy distinto entre ambas etiquetas ya que la etiqueta <pre> si respetará el espaciado mientras que la etiqueta <p> no.

Bloque de cita: <blockquote>

Su objetivo es identificar una cita larga, que pueda contener varios párrafos u otras etiquetas.

Los navegadores web suelen mostrar la etiqueta <blockquote> con márgenes a izquierda y derecha.

<p>Bienvenidos al desarrollo web</p>

<blockquote>

<p>Es un término que define la creación de sitios web para Internet o una intranet. Para conseguirlo se hace uso de tecnologías de software del lado del servidor y del cliente que involucran una combinación de procesos de base de datos con el uso de un navegador web a fin de realizar determinadas tareas o mostrar información.

</p>

</blockquote>

Ilustración: <figure>

Esta etiqueta identifica el contenido independiente relacionado con el contenido principal, como una imagen, tabla o gráfico.

El elemento <figcaption> a menudo va anidado dentro de un elemento <figure> para agregar un título al contenido identificado por las etiquetas <figure>.

<figure>

<img src=”foto_de_gatitos.jpg” alt=”foto”>Soy una imagen de gatitos

<figcaption>Fotos de Gatitos</figcaption>

</figure>

Pie de ilustración: <figcaption>

Se usa para representa un subtitulo o leyenda asociada el contenido de la etiqueta <figure>  el cual está anidado, pudiendo ser colocado debajo o arriba de la etiqueta <figure> para crear un titulo si está arriba o un subtitulo,  es importante destacar que la etiqueta <figcaption> es opcional

Contenido principal: <main>

Se utiliza para agrupar el contenido central de una página web, sin incluir los elementos comunes a otras páginas web mediante enlaces como pueden ser mediante bloques de navegación web del estilo <nav> , <aside> y también se usa para almacenar la información general del sitio web.

Solo se permite una etiqueta <main> por página web y no debe estar incluido en otras etiquetas salvo en una etiqueta <section>.

El elemento <main>  solo sirve para agrupar contenido, pero no se usa para definir secciones en el esquema de la página web.

<main>

<article>

<p> Soy un párrafo dentro de un articulo </p>

</article>

<article>

<p> Soy otro párrafo independiente dentro de otro artículo independiente </p>

</article>

</main>

Más adelante iré añadiendo más contenido referente a HTML5 y como usar las hojas de estilo CSS3 para darme un aspecto más profesional a las paginas web.

 

5 comentarios
Deja un comentario
También puede interesarte