Before we start learning about HTML elements and their attributes in this series, I think it's important to understand the difference between a block-level element and an inline element and how to determine what type of element you're working with.
Block-level elements
- Create a "block" on the page which takes up the full width of its parent element.
- This "block" of space is displayed by the browser as a new line. This means that a block-level element appears on a new line immediately after the preceding content and, in turn, content that follows a block-level element appears on a new line.
- Typically, they are structural elements on the page such as: headings, paragraphs, lists, navigation menus and footers.
- Can be nested inside other block-level elements.
- Cannot be nested inside an inline element.
- Can contain inline elements.
- It is important to note that block-level elements may appear only within a
<body>element.
Inline elements
- Only occupy the content width which is the space between the opening and closing tags of the element.
- Do not start on a new line, but instead are found on the same line within a block-level element.
- Typically, they are used with text.
- Are nested within block-level elements and surround only small pieces of the document’s content.
- Cannot contain block-level elements.
Example
This may sound very confusing in writing so let's take a look at the CodePen below!
Set-up
The <div> with class="container" has the green border and is considered the parent element. The direct children are those elements immediately following this <div>. These include the <h1>, the two <p>, and the <div> that does not have a class associated with it.
Example block-level elements
As you can see, each of the children elements are block-level elements as they are taking up the full width of the parent <div>. This is represented by the red borders around each of these block-level elements. You should also note that each block-level element is taking up a new line within the parent element.
Example inline elements
Finally, you may notice the <span> and <strong> elements which are inline elements. They only occupy the space of their content width which in this case is the text within the dashed blue borders. You may also note that they do not start a new line, but instead are found on the same line within their block-level elements.
My experience
Understanding the difference between a block-level element and an inline element is critical to knowing how your code is going to be displayed in the browser. Case in point...
I was recently working in a WordPress site and had some links created to external websites. In one group of links, they were each on their own lines looking quite nice. In another group of links, they were all mashed up next to one another looking very ugly and unreadable. I was starting to get frustrated because everything I adjusted made no difference, yet at a quick glance the CSS written for the two link groups was the same. I could not understand why they were behaving so differently.
Apparently, WordPress has a button where you can 'automatically create paragraphs' for everything written. Aha!!! This was the problem!
One group of links had this paragraph button checked which meant that each link was nested inside a paragraph element which is a block-level element. Therefore, each link created a "block" of space which took up the full width and the parent element then the next link started on a new line.
The other group of links had the paragraph button unchecked which meant that each link was behaving like an inline element. Therefore, each link occupied the amount of space needed by the content width and then the next link started immediately on the same line.
And my problem was solved!!!
As you can see, it may seem like a very minimal topic to pay attention to but it can save you loads of time if you understand the difference between block-level and inline elements.