Elements are classified into two broad groups: block elements and inline elements.
When the browser is deciding how to draw an element on the screen, the browser follows a certain set of rules referred to as normal flow, which basically means:
How the browser decides exactly which element goes where depends primarily on whether it's drawing a block or inline element at that moment.
That's not exactly the technical definition but it's a great way
to begin to think about it. Try this code inside of a body
element:
Hello
<p>World!</p>
Goodbye.
View this code in your browser.
Why was "World!" drawn below "Hello"? The p
element is a block-level
element, so:
That last point is why "Goodbye." appears on the line below. Even though there appears to be enough room to the right of "World", block-level elements reserve the entire horizontal space for themselves.
Common block elements:
h1
thru h6
p
div
li
form