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.
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.
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)
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