HTML and CSS Basics, part 2: normal document flow, block elements, inline elements

This series of posts is titled HTML and CSS Basics. If you’re just starting out with web development, it is crucial to read and understand this series of posts.

This is the second post in this series.

Finally, in this post, we’ll be discussing the wall of bricks metaphor we mentioned in the previous article!

Photo by Ilario Piatti, @ilariopiatti on Unsplash

Table of Contents

Here’s the full list of all blog posts in this series.

Let’s begin this article by discussing normal document flow.

Video tutorial for this article

If you prefer your tutorials in video format, I’ve recorded a video of things that I’m explaining in this article.

If the above content was useful to you, please make sure to like 👍 the above video and subscribe 🥰 to the CodingExercises Youtube channel.

In the rest of the article, you can follow the tutorial in text format, so that you can more easily:

• copy-paste code snippets
• click and review Codepen examples

Normal document flow

A wall of bricks and a web page are somewhat similar in the fact that they both consist of building blocks:

• A wall has bricks
• A web page has HTML elements

While each brick is the exact same size - the focus here being on the width - a web page’s elements come in basically two “flavors”:

• inline elements
• block elements

An inline element is just like a regular brick: they line up one next to another.

A block element, however, is like a special kind of brick, an elastic brick! This brick spans the entire width of the wall. It’s like a row of bricks was replaced by a single brick - a very, very wide one.

That’s why we say that a block element in HTML stretches the entire width of its wrapping div (aka its parent div).

So basically, an HTML page is like a wall with bricks of different widths:

• inline “bricks” (inline elements); their width depends on the amount of text they have
• block “bricks” (block elements); their width is, by default, set to 100% of the place where they live (in our metaphor, “the wall”)

Before looking at an example, let’s just briefly mention how the elements are stacked on a web page:

• top to bottom
• left to right

This is where our wall of bricks metaphor kind of breaks down: the way that the bricks on a wall are usually stacked is:

• bottom to top
• left to right (I guess)

This stacking of elements on a web page is commonly referred to as the normal document flow.

Another way you can remember this easier is that elements on a web page behave very similar to how a text on a page is usually read in the English language.

An example of document

To illustrate this better, let’s look at our example Codepen.

Here’s the HTML code of our example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
This is just some random text. 

We can tag it, but we don't have to.

Notice that the browser does not honor any whitespace, except 
single
    whitespace
      characters
        and
          single
            carriage returns (ENTER key).



<h1>Normal Document Flow in HTML</h1>
<div>This is a div.</div>

<div>
  This is a div. 
  With some ENTER keys.
  This is a div.
</div>

<div>This is a div.</div>


<div>This is a div.</div>

<span>This is a span.</span>

<div>This is a div.</div>

<span>This is a span.</span> <span>This is a span.</span>

<span>This is a span.</span>
<span>This is a span.</span>

<div>A div is a block-level element.</div>
<span>A span is an inline element.</div>

And here’s our CSS:

1
2
3
4
5
6
7
8
9
h1 { background: plum; border: 1px solid blue }

/* 
div { background: plum; border: 1px solid blue } 
*/

/* 
p { background: plum; border: 1px solid blue } 
*/

Some of the code in our css is commented out, using the opening, /*, and the closing */ multiple-line css comment syntax.

A comment basically says to the browser, “don’t read the code in between these delimiters”. Thus, comments are handy to put whatever additional information we need that’s gonna help understand the code better, or remind us of something that needs to be updated or kept in mind.

Conclusions and Summary

Here are the conclusions we can derive from our code, for this lesson:

HTML Conclusions:

1. HTML elements flow on a web page (web document), kind of like a river.
2. This what normal document flow looks like:

   -----------------
   | ------------> |
   | ------------> |
   | ------------> |
   | ------------> |
   | ------------> |
   -----------------
   

Normal document flow means that elements flow: 2.1. top-to-bottom 2.2. left-to-right

1. Normal document flow when we only have divs:

   -----------------------------
   | <div>..............</div> |
   | <div>..............</div> |
   | <div>..............</div> |
   | <div>..............</div> |
   | <div>..............</div> |
   | <div>..............</div> |
   | <div>..............</div> |
   | <div>..............</div> |
   -----------------------------
   

Regardless of how long is the text content inside a div, each div will fill the entire available width of its parent. That’s why the <div> element is what’s known as a block-level element. In a normal document flow, a bunch of divs look like a bunch of blocks stacked on top of one another.

1. Normal document flow when we have span tags only:

   ------------------------------------------------------
   | <span>...</span> <span>...</span> <span>...</span> |
   | <span>...</span> <span>...</span> <span>...</span> |
   | <span>...</span> <span>...</span> <span>...</span> |
   | <span>...</span> <span>...</span> <span>...</span> |
   | <span>...</span> <span>...</span> <span>...</span> |
   | <span>...</span> <span>...</span> <span>...</span> |
   | <span>...</span> <span>...</span> <span>...</span> |
   | <span>...</span> <span>...</span> <span>...</span> |
                      ...etc...
   ------------------------------------------------------
   

   This is why the <span> element is called an INLINE element.

CSS Conclusions:

• We are using SCSS in our codepen examples. One benefit of SCSS is that we can have
  1. A multi-line comment starts with /*, and ends with: */.

That’s it for this article.