Bloque HTML y elementos en línea
Cada elemento HTML tiene un valor de visualización predeterminado, según el tipo de elemento que sea.
Hay dos valores de visualización: bloque y en línea.
Elementos a nivel de bloque
Un elemento a nivel de bloque siempre comienza en una nueva línea.
Un elemento a nivel de bloque siempre ocupa todo el ancho disponible (se extiende hacia la izquierda y hacia la derecha tanto como puede).
Un elemento de nivel de bloque tiene un margen superior e inferior, mientras que un elemento en línea no los tiene.
Ejemplo
<div>Hello World</div>
Estos son los elementos de 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 <span> dentro de un párrafo.
Ejemplo
<span>Hello World</span>
Estos son los elementos en línea en HTML:
Nota: ¡Un elemento en línea no puede contener un elemento a nivel de bloque!
El elemento <div>
El <div>
elemento se utiliza a menudo como contenedor de otros elementos HTML.
El <div>
elemento no tiene atributos requeridos, pero style
, class
y id
son comunes.
Cuando se usa junto con CSS, el <div>
elemento 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>
El elemento <span>
El <span>
elemento es un contenedor en línea que se utiliza para marcar una parte de un texto o una parte de un documento.
El <span>
elemento no tiene atributos requeridos, pero style
, class
y id
son comunes.
Cuando se usa junto con CSS, el <span>
elemento se puede usar para diseñar 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>
Resumen del capítulo
- Hay dos valores de visualización: bloque y en línea
- Un elemento a nivel de 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
<div>
elemento es un nivel de bloque y a menudo se usa como contenedor para otros elementos HTML. - El
<span>
elemento es un contenedor en línea que se utiliza para marcar una parte de un texto o una parte de un documento.
Etiquetas HTML
Tag | Description |
---|---|
<div> | Defines a section in a document (block-level) |
<span> | Defines a section in a document (inline) |
Para obtener una lista completa de todas las etiquetas HTML disponibles, visite nuestra Referencia de etiquetas HTML .