TOC

This article is currently in the process of being translated into Spanish (~38% 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.

The <p></p> element is a block-element, whereas the <b>-element is an inline-element. (b stands for bold and changes the appearance of the text)

Ejemplos

The most commonly used block-level element is the <div>. (Div is an abbreviation of Division). The <div> element is a block-element used to separate the different types of content on your webpage. Imagine you have two blog entries, consisting of the actual entry, a title, your name, and a publication date, it might look like this:

Solo otro día
Escrito por Christina
El 11 de Enero

This is my second blog entry, and I just wanted to check in on you

Mi Primer Entrada de Blog
Escrito por Christina
El 10 de Enero

¡Estoy tan feliz de escribir mi primer entrada de blog - yay!

As you can see, there is two blog-entries and we divide them using a block element - in this case is chose a <div>. Inside the block element is another block element, the paragraph (<p>). Using just only the most necessary markup, the HTML for your webpage would look like this:

<!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>

The <div>-elements are used to diversify the two blog entries. Inside each of the <div>-elements is two paragraphs consisting of title & author and the actual entry.

The <div> element is widely used as a container that can apply formatting anywhere you want on your webpage. The limitation is that the <div> elements do not tell you anything about the actual content. So the browser knows that it has found a separate section, but not what kind of section. In HTML5 a lot of new elements have been introduced and some of them are here to replace the use of the <div> - see the articles about the new semantic elements to dig in to semantic markup.

I have previously talked about nesting elements and the fact that the <p> elements is inside the <div> elements is an example of nested elements.

What you have learned

  • Block elements are like squares
  • Inline elements have no breaks associated with the element
  • You can nest block elements inside other block elements
  • But you cannot nest block elements inside inline elements
  • The paragraph is the only block element that must only contain inline elements
  • The <div> elements is currently used as a container, but new HTML5 elements is here to change that
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!