TOC

This article is currently in the process of being translated into Spanish (~97% done).

HTML Basics:

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 de bloque. El hecho de que un elemento sea un elemento en línea o de bloque afecta la forma en que el navegador procesa el elemento.

Elementos de Bloques

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 sin romperse entre lineas y el ancho y la altura del elemento puede ser regulado. Los elementos en bloque pueden contener elementos en línea y otros elementos en bloque.

Inline Elements

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 de bloque, mientras que el elemento <b> es un elemento en línea. (b significa negrita y cambia la apariencia del texto)

Ejemplos

El elemento de nivel de bloque más utilizado es el <div>. (Div es una abreviatura de División). El elemento <div> es un elemento de bloque que se utiliza para separar los diferentes tipos de contenido de la 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 de bloque - en este caso se elige un <div>. Dentro del elemento de bloque hay otro elemento de 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 title & author y la entrada actual.

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 es que los elementos <div> 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 de elementos de anidamiento y el hecho de que el elemento <p>está dentro del elemento <div> es un ejemplo de elementos anidados.

Que hemos aprendido

  • Los elementos de bloque son como cuadrados
  • Inline elements have no breaks associated with the element
  • Puedes anidar elementos de bloque dentro de otros elementos de bloque
  • Pero no se pueden anidar elementos de bloque dentro de elementos en línea
  • El párrafo es el único elemento de bloque que debe sólo contener elementos en línea
  • El elemento <div> se utiliza actualmente como contenedor, pero los nuevos elementos HTML5 están aquí para cambiarlo
This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!