(click anywhere to close)

[HTML5] Blocks

category: Website | course: HTML5 | difficulty:

The concept of HTML blocks is usually saved for last, because it is totally anti-semantic and doesn’t have much use at this particular moment. Nevertheless, it forms a very large part of the modern web, and I think it should be one of the first things you learn. It’s very simple actually, but I only saw them for the first time after about 6 months of trying to create something with HTML, and I could then throw away a half year’s work.

Meet the block elements

There are two block elements:

  • <div> Short for division, which means this is simply a way of grouping content again and again. But it doesn’t tell you what type of group it creates, which means that the div is mostly used for structuring the document and styling it. It actually creates a block around everything that’s inside it, and elements before or after it are placed completely above or below it. It is therefore called a block-level element.
  • <span> Does the same as div, but is an inline element. This means that it doesn’t create a block around the elements inside, but keeps those elements within the same line. Mostly used for identifying small elements, like a number that needs to be coloured red, or a catchphrase that has to be made fancy.
	A big block grouped together<br/>
	An <span>inline alteration</span> in the mark up

At the end of this course, we will look at some specific tags that have been introduced for HTML5, that do the same thing but are semantic.

Horizontal Rule

Before HTML5, the <hr> (or <hr/>) tag was used to define a horizontal line – it was purely for layout. Nowadays though, it has shifted towards a more semantic meaning: to separate content or define a thematic break. Not every browser displays the actual line anymore, and if you want a horizontal line you should do so using CSS.

Text, article, whatever.
Discussing something else under the line.
Test your knowledge with the quiz!
What happens when you use <div>?
You create an inline element without semantic meaning
You create a horizontal rule
You create a block-level element without semantic meaning
Do you like my tutorials?
To keep this site running, donate some motivational food!
Chocolate Milk