Cada elemento HTML tiene un valor para de visualización predeterminado de acuerdo al tipo de elemento que es. El valor de visualización predeterminado para la mayoría de los elementos es block o inline.
Elementos block-level
Ejemplos de elementos block-level:
- <div>
- <h1> ... <h6>
- <p>
- <form>
Elementos inline
Un elemento inline no inicia en una nueva línea y solo ocupa un tanto de ancho como sea necesario.
Este es un elemento inline <span> dentro de un párrafo.
Ejemplos de elementos inline:
- <span>
- <a>
- <img>
El elemento <div>
El elemento <div> es un elemento block-level que es frecuente usado como contenedor de otros elementos HTML. El elemento <div> no requiere atributos pero es común asignarle style y class. Cuando se usa en combinación con estilos CSS, el elemento <div> puede ser usado para bloques de estilos de contenido.
Ejemplo:
<div style="background-color: black; color: white;
padding: 20px;">
<h2>Londres</h2>
<p>Londres es la capital de Inglaterra. Es la
ciudad más poblada del Reino Unido con un área
metropolitana de más de 13 millones de
habitantes.</p>
</div>
El elemento <span>
El elemento <span> es un elemento inline que se utiliza a menudo como un contenedor de poco texto. El elemento <span> no requiere atributos pero es común asignarle style y class. Cuando se usa en combinación con estilos CSS, el elemento <span> puede ser usado para bloques de estilos para una pequeña parte de texto.
Ejemplo:
<h1>Este encabezado es <span style="color: red;">muy importante</span></h1>