HTML5: Elementos de 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. El valor de visualización predeterminado para la mayoría de los elementos es bloque o en línea.

Elementos de nivel de bloque

Un elemento de nivel de bloque siempre comienza en una nueva línea y ocupa todo el ancho disponible (se extiende hacia la izquierda y hacia la derecha todo lo que puede).

Esto es un elemento de bloque <div>

  <div>Hello</div>

Elementos a nivel de bloque en HTML:







Elementos en línea

Un elemento en línea no comienza en una nueva línea y solo ocupa tanto ancho como sea necesario.
Este es un elemento <span> en línea dentro de un párrafo.

  <span>Hello</span>

Elementos en línea en HTML:








El elemento <div>

El elemento <div> a menudo se usa como un contenedor para otros elementos HTML.
El elemento <div> no tiene atributos necesarios, pero styleclass e id son comunes.
Cuando se usa junto con CSS, el elemento <div> se puede usar para diseñar bloques de contenido:

  <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 elemento <span> se usa a menudo como contenedor de algún texto.
El elemento <span> no tiene atributos necesarios, pero styleclass e id son comunes.
Cuando se usa junto con CSS, el elemento v se puede usar para aplicar estilo a partes del texto:

  <h1>My <span style="color:red">Important</span> Heading</h1>

Capítulo anterior: "HTML5: Listas"
Próximo capítulo: "HTML5: Clases"

Comentarios

Entradas populares de este blog

HTML5: Iframes

HTML5: Estilos HTML - CSS

HTML5: Comentarios

HTML5: Enlaces