Curso HTML5: Blockquote
El elemento blockquote permite a los autores insertar citas en forma de bloques de contenido, usualmente compuestas por un párrafo, un grupo de párrafos o un conjunto de muchos otros elementos incluyendo imágenes (img), tablas (table) y artículos (article), entre otros. Esta es la principal diferencia entre este elemento y q, que está diseñado para citar únicamente líneas de texto.
En el siguiente texto vamos a poder observar el efecto del blockquote. Es un texto sacado del primer libro del Señor de los Anillos:
La noche pasó lentamente. Salió el sol. Los hobbits se levantaron bastante tarde y la mañana prosiguió. Se solicitó el concurso de gente, que recibió orden de despejar los pabellones y quitar mesas, sillas, cucharas, cuchillos, botellas, platos, linternas, macetas de arbustos en flor, migajas, papeles, carteras, pañuelos y guantes olvidados, y alimentos no consumidos, que eran muy pocos.
El código del texto es el siguiente:
<blockquote>La noche pasó lentamente. Salió el sol. Los hobbits se levantaron bastante tarde y la mañana prosiguió. Se solicitó el concurso de gente, que recibió orden de despejar los pabellones y quitar mesas, sillas, cucharas, cuchillos, botellas, platos, linternas, macetas de arbustos en flor, migajas, papeles, carteras, pañuelos y guantes olvidados, y alimentos no consumidos, que eran muy pocos.</blockquote>
Podemos agrupar varias de estas etiquetas para conseguir un espacio mayor por los costados. Vamos a ver el resultado, en el siguiente texto, de dos etiquetas juntas de <blockquote>:
La noche pasó lentamente. Salió el sol. Los hobbits se levantaron bastante tarde y la mañana prosiguió. Se solicitó el concurso de gente, que recibió orden de despejar los pabellones y quitar mesas, sillas, cucharas, cuchillos, botellas, platos, linternas, macetas de arbustos en flor, migajas, papeles, carteras, pañuelos y guantes olvidados, y alimentos no consumidos, que eran muy pocos.
Observad como varía el resultado de un texto a otro. Y aquí veremos el código del segundo texto:
<blockquote><blockquote>La noche pasó lentamente. Salió el sol. Los hobbits se levantaron bastante tarde y la mañana prosiguió. Se solicitó el concurso de gente, que recibió orden de despejar los pabellones y quitar mesas, sillas, cucharas, cuchillos, botellas, platos, linternas, macetas de arbustos en flor, migajas, papeles, carteras, pañuelos y guantes olvidados, y alimentos no consumidos, que eran muy pocos.</blockquote></blockquote>
Nobr
La etiqueta <nobr> obliga al navegador a que muestre esa frase sin saltos de línea. El texto que queremos que no se parta debe ir dentro de las etiquetas de apertura (<nobr>) y de cierre (</nobr>).
Aquí os dejamos el código de una frase con “nobr” para que veáis cómo se debe escribir:
<nobr>Ésta sería una frase que no se puede partir </nobr>
Center HTML
La etiqueta <center> nos permite centrar párrafos, imágenes o tablas dentro de nuestra Web. Para centrar un elemento, éste debe estar entre las etiquetas de apertura y cierre. Este sería el código de un texto centrado:
<center> Este texto está centrado en la página. </center>
Y su resultado sería el siguiente:
Span
La etiqueta <span> nos permite agrupar un conjunto de elementos y así poder establecer unas reglas de estilo comunes para el conjunto. Los elementos que queramos agrupar con “span” deben ir dentro entre <span> y </span>, su etiqueta de apertura y cierre respectivamente.
Como podemos comprobar la etiqueta <span> se parece mucho a la etiqueta <div> ya que ambas agrupan a un conjunto de elementos y con ambas podemos definir unas características comunes para todos esos elementos. Tanto uno como el otro son etiquetas más propias de css. Hay una diferencia clara entre ambas.
Con la etiqueta span podemos agrupar unos elementos, sin que éstos sufran ninguna variación respecto al resto del texto, a no ser que le indiquemos un estilo al span. En cambio con div los elementos que forman parte de un grupo sufren una variación de salto de línea con respecto a los demás elementos. <div> crea un salto de línea al principio y otro al final.
Vamos a ver el código del ejemplo del efecto del span en un grupo de elementos.
Esto es un párrafo <span style="color:red">con unas letras en rojo</span> para que veas lo que se puede hacer con la etiqueta span.
Y aquí podemos ver el resultado del efecto:
Esto es un párrafo con unas letras en rojo para que veas lo que se puede hacer con la etiqueta span.
Si quieres recibir artículos como este en tu móvil únete al Canal de Escape Digital en Telegram o en Twitter
