Elementos HTML de bloque y en linea

---

Cada elemento HTML tiene un valor de visualización por defecto dependiendo su tipo. El valor de visualización por defecto para la mayoría de los elementos es "de bloque" (block) o "en línea" (inline). Vea el contenido extra del tema anterior.

---

Elementos a nivel de bloque

Un elemento a nivel de bloque siempre empieza en una línea nueva y ocupa todo el ancho disponible (se extiende a la izquierda y la derecha tanto como puede).

El elemento <div> es un elemento a nivel de bloque.

Ejemplos de elementos a nivel de bloque:

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

El elemento <div>

El elemento <div> se usa a menudo como un contenedor para otros elementos HTML.

El elemento <div> no requiere atributo alguno, sin embargo style y class le son comunes.

Cuando se usa en conjunto con CSS, el elemento <div> puede ser usado para estilizar bloques de contenido:

<div style="background-color:black;color:white;padding:20px;">
 <h2>Guatemala</h2>
 <p>La Ciudad de Guatemala, cuyo nombre oficial es Nueva Guatemala de la Asunción, es la capital y sede de los poderes gubernamentales de la República de Guatemala, así como sede del Parlamento Centroamericano.</p>
</div>

Elementos en linea

Un elemento en línea no empieza en una línea nueva y solo ocupa el ancho necesario.

Este es un elemento <span> en línea dentro de un párrafo.

Ejemplos de elementos en línea:

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

El elemento <span>

El elemento <span> se usa a menudo como un contenedor para parte de algún texto.

El elemento <span> no requiere atributo alguno, sin embargo style y class le son comunes.

Cuando se usa en conjunto con CSS, el elemento <span> puede usarse para estilizar partes del texto:

<h1>Mi <span style="color:red">Mas Importante</span> Encabezado</h1>

---

Resumen de lo aprendido:

Etiquetas HTML de agrupamiento

Etiqueta	Descripción
<div>	Define una sección (a nivel de bloque) en un documento
<span>	Define una sección (en linea) en un documento