This article is currently in the process of being translated into Spanish (~99% done).
Block & Inline elements
Hemos examinado algunos de los elementos HTML5 de los que se construye una página web y ahora es el momento de presentar otra propiedad más de los elementos HTML5. Hay dos tipos diferentes de elementos: elementos en línea y elementos en bloque. El hecho de que un elemento sea un elemento en línea o en bloque afecta la forma en que el navegador procesa el elemento.
Elementos en Bloque
Un elemento en bloque es desplegado como su nombre indica, como un bloque real. El elemento en bloque es tan grande como sea posible, de forma rectangular que no se separa en líneas y la anchura y altura del elemento pueden ser reguladas. Los elementos en bloque pueden contener elementos en línea y otros elementos en bloque.
Elementos en Línea
Los elementos en línea son tratados como parte del flujo del documento y el tamaño de estos no debería ser cambiado manualmente. Solo los elementos en línea pueden contener otros elementos en línea. Y para hacer esto aun más confuso, los elementos en línea son los únicos elementos que pueden ser contenidos dentro de un elemento párrafo, aunque el elemento párrafo sea un elemento en bloque.
El elemento <p></p> es un elemento en bloque, mientras que el elemento <b></b> es un elemento en bloque. (b, viene de bold que significa negrita y cambia la apariencia del texto)
Ejemplos
El elemento de nivel en bloque más utilizado es el <div>. (div es la abreviatura de división). El elemento <div> es un elemento en bloque que se utiliza para separar los diferentes tipos de contenido en tu página web. Imagine que tiene dos entradas de blog, que consisten en la entrada real, un título, su nombre y una fecha de publicación, podría tener este aspecto:
Solo otro día
Escrito por Christina
El 11 de Enero
Esta es mi segunda entrada al blog, y sólo quería comprobarlo contigo
Mi Primer Entrada de Blog
Escrito por Christina
El 10 de Enero
¡Estoy tan feliz de escribir mi primer entrada de blog - yay!
Como puede ver, hay dos entradas de blog y las dividimos usando un elemento en bloque - en este caso se eligió un <div>. Dentro del elemento en bloque hay otro elemento en bloque, el párrafo (<p>). Usando sólo el marcado más necesario, el HTML para su página web se vería así:
<!DOCTYPE html>
<html>
<head>
<title>Your first HTML5 Document</title>
</head>
<body>
<div>
<p>Just Another Day<br />
Written by Christina<br />
On January 11th
</p>
<p>This is my second blog entry, and I just wanted to check in on you
</p>
</div>
<div>
<p>My First Blog Entry<br />
Written by Christina<br />
On January 10th
</p>
<p>
I’m so happy to write my first blog entry – yay!
</p>
<div>
</body>
</html>Los elementos <div> se utilizan para diversificar las dos entradas de blog. Dentro de cada uno de los elementos <div> hay dos párrafos que consisten en el título y autor, y la entrada en sí.
El elemento <div> se utiliza ampliamente como contenedor que puede aplicar formato en cualquier lugar que desee en su página web. La limitación de los elementos <div> es que no le dicen nada sobre el contenido real. Así que el navegador sabe que ha encontrado una sección separada, pero no qué tipo de sección. En HTML5 se han introducido muchos elementos nuevos y algunos de ellos están aquí para reemplazar el uso de <div> - Ver los artículos sobre los nuevos elementos semánticos para profundizar en el marcado semántico.
Anteriormente he hablado sobre elementos anidados y el hecho de que los elementos <p> están dentro de los elementos <div> es un ejemplo de elementos anidados.
Lo que hemos aprendido
- Los elementos en bloque son como cuadrados
- Los elementos en línea no tienen saltos de línea asociados con el elemento
- Puedes anidar elementos en bloque dentro de otros elementos en bloque
- Pero no se pueden anidar elementos en bloque dentro de elementos en línea
- El párrafo es el único elemento en bloque que solo debe contener elementos en línea
- El elemento <div> se utiliza actualmente como contenedor, pero los nuevos elementos HTML5 están aquí para cambiarlo
