• 10 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 11/2/22

Understand block-level and inline elements

HTML elements have default behavior, via CSS behind the scenes, that controls their positioning.

Look at the behavior of the paragraph elements versus the image elements in this example:

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<img src="images/kitten1.jpg" alt="Cute Lynx kitten" title="Lynx kitten">
<img src="images/kitten2.jpg" alt="Cute spotted kitten" title="Spotted kitten">
<img src="images/kitten3.jpg" alt="Cute Siamese kitten" title="Siamese kitten">
A screenshot of the result from the code above, which shows 3 paragraphs (each on its own line) and 3 images (all next to one another)
Result

Study the code and its result above. Can you identify which elements start on new lines by default (and which do not)?

Each paragraph expands to take up the full width of the page on its own line (greedy paragraphs)! However, the images all appear in the same line. That also explains why, earlier in this course, the two images of Millie Hughes-Fulford stacked right next to each other.

Every HTML element has a default block-level or inline behavior. Paragraphs are block-level elements, which means that they block off a whole line for themselves, and images are inline elements, which means they will automatically be placed next to one another on the same line.

Block-level elements that you've seen so far include:

  • Headings

  • Paragraphs (p)

  • Lists and list items (ul, ol, li)

  • Structuring elements (header, nav, section, article, aside, figure, footer)

Inline elements that you've seen so far include:

  • Images (img)

  • Emphasized text (em)

  • Strong text (strong)

  • Links (a)

As you code more and more, you'll memorize which HTML elements are block-level or inline. You'll also easily see their behavior every time you create them.

This concept is important in the next chapter on divs and spans, the ultimate generalist HTML elements (one of which is block-level and the other inline)! See you there!

Ever considered an OpenClassrooms diploma?
  • Up to 100% of your training program funded
  • Flexible start date
  • Career-focused projects
  • Individual mentoring
Find the training program and funding option that suits you best
Example of certificate of achievement
Example of certificate of achievement