HTML Elementos en bloque y en línea
Cada elemento HTML tiene un valor de visualización predeterminado, dependiendo del tipo de elemento que sea.
Hay dos valores de visualización: bloque y en línea.
Elementos a nivel de bloque
Un elemento en bloque siempre comienza en una nueva línea y los navegadores agregan automáticamente algo de espacio (un margen) antes y después del elemento.
Un elemento a nivel de bloque siempre ocupa todo el ancho disponible (se extiende hacia la izquierda y hacia la derecha tanto como puede).
Dos elementos de bloque comúnmente utilizados son: <p> y <div>.
El elemento <p> define un párrafo en un documento HTML.
El elemento <div> define una división o una sección en un documento HTML.
El elemento <p> es un elemento en bloque.
Aquí están los elementos a nivel de bloque en HTML:
Elementos en línea
Un elemento en línea no comienza en una nueva línea.
Un elemento en línea solo ocupa el ancho necesario.
Este es un elemento dentro de un párrafo.
Aquí están los elementos en línea en HTML:
Nota: ¡Un elemento en línea no puede contener un elemento en bloque!
El elemento <div>
El elemento <div> se utiliza a menudo como contenedor para otros elementos HTML.
El elemento <div> no tiene atributos obligatorios, pero style, class y id son comunes.
Cuando se usa junto con CSS, el elemento <div> se puede usar para diseñar bloques de contenido:
Ejemplo
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
Inténtalo tú mismo »
El elemento <span>
El elemento <span> es un contenedor en línea que se utiliza para marcar una parte de un texto o una parte de un documento.
El elemento <span> no tiene atributos obligatorios, pero style, class y id son comunes.
Cuando se usa junto con CSS, el elemento <span> se puede usar para aplicar estilo a partes del texto:
Ejemplo
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>
Inténtalo tú mismo »
Resumen del capítulo
- Hay dos valores de visualización: bloque y en línea
- Un elemento en bloque siempre comienza en una nueva línea y ocupa todo el ancho disponible
- Un elemento en línea no comienza en una nueva línea y solo ocupa el ancho necesario
- El elemento
<div>es de nivel de bloque y a menudo se utiliza como contenedor para otros elementos HTML - El elemento
<span>es un contenedor en línea que se utiliza para marcar una parte de un texto o una parte de un documento
Etiquetas HTML
| Etiqueta | Descripción |
|---|---|
| <div> | Definir una sección en un documento (en bloque) |
| <span> | Definir una sección en un documento (en línea) |
Para obtener una lista completa de todas las etiquetas HTML disponibles, visite nuestra Referencia de etiquetas HTML.
