HTML Basics:

Block & Inline elements

We have looked at some of the HTML5 elements a webpage is constructed of and now it is time to introduce yet another property of the HTML5 elements. There are two different types of elements – inline elements and block elements. Whether an element is an inline or block elements affects how the browser render the element.

Block Elements

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)

Examples

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:

Just Another Day
Written by Christina
On January 11th

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

My First Blog Entry
Written by Christina
On January 10th

I’m so happy to write my first blog entry – 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!