HTML para principiantes (Parte 14): Bloques

Redes sociales

HTMLCada elemento HTML, dependiendo del tipo de elemento que se trate, tiene una forma de mostrarse por defecto. La mayoría de los elementos HTML se muestran como bloques o en línea.

Elementos de bloque

Un elemento de bloque, siempre comienza en una nueva línea y abarca toda la anchura disponible (se extiende de izquierda a derecha en la medida que puede hacerlo). El elemento <div> es un ejemplo de elemento en bloque.

Ejemplos de elementos en bloque son:

  • <div>
  • <h1> – <h6>
  • <p>
  • <form>

Elemento en línea

Un elemento en línea no tiene por que comenzar en una nueva línea y sólo abarca la anchura necesaria.

Por ejemplo el elemento <span> es un elemento en línea que se puede ubicar en el interior, por ejemplo, de un párrafo.

Ejemplos de elementos en línes son:

  • <span>
  • <a>
  • <img>

El elemento <div>

El elemento <div> es un elemento en bloque que se usa normalmente como contenedor de otros elementos HTML.

El elemento <div> no tiene atributos, pero es común que asociados a él haya estilos y clases.

Cuando a ún elemento <div> se le asocia un estilo CSS, este estilo se aplica a todos los elementos HTML incluidos en el bloque.

Ejemplo

<!DOCTYPE html>
<html>
<body>
   <div style="background-color:black; color:white; padding:20px;">
      <h2>Zaragoza</h2>
      <p>Zaragoza es la capital de la comunidad autónoma de Aragón. Es la quinta ciudad más poblada de España, con un área metropolitana de 700.000 habitantes.</p>
      <p>Situada a orillas del rio Ebro, Su nombre actual procede del antiguo topónimo romano, Caesaraugusta. El origen de la ciudad se remonta a Salduie, que fue el nombre de la ciudad ibérica sedetana situada en el solar de la actual Zaragoza desde la segunda mitad del siglo III a. C.</p>
   </div>
</body>
</html>

Resultado en el navegador


Zaragoza

Zaragoza es la capital de la comunidad autónoma de Aragón. Es la quinta ciudad más poblada de España, con un área metropolitana de 700.000 habitantes.

Situada a orillas del rio Ebro, Su nombre actual procede del antiguo topónimo romano, Caesaraugusta. El origen de la ciudad se remonta a Salduie, que fue el nombre de la ciudad ibérica sedetana situada en el solar de la actual Zaragoza desde la segunda mitad del siglo III a. C.


El elemento <span>

El elemento <span> es un elemento en línea que es utilizado normalmente, como contenedor de algo de texto.

El elemento <span> no tiene atributos, pero normalmente, aparecen asociados a él estilos y clases.

Cuando a un elemento <span> se le asocia un estilo CSS, este estilo se aplica a todo el texto que abarca.

Ejemplo

<!DOCTYPE html>
<html>
<body>
   Un texto de <span style="color:red">color rojo</span> indica algo importante
</body>
</html>

Resultado en el navegador


Un texto de color rojo indica algo importante


 

 

Redes sociales

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.