TOC
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 diversion). 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 is 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