TOC

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

A block element is rendered, as the name indicates, as an actual block. The block-element is as wide as it can possibly be, a rectangular that does not break across lines, and the width and height of the element can be regulated. Block-elements may contain inline elements and other block-elements.

Inline Elements

The inline elements are treated as a part of the flow of the document and the size should normally not be changed manually. Only inline elements may be contained with inline-elements. And to make even more confusing, inline elements are the only elements that may be contained within a paragraph-element, even though the <p>-element is a block-element.

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!