Block vs Inline Elements in HTML

This lesson is part of the Web Programming 1 Course.

All elements that are visible in the body of a web page will behave in one of two ways. If the element displays itself in the browser window as block it will try to occupy as much horizontal space as it can (some people call them 'block-level' elements rather than just 'block'). Otherwise the element will appear to fall inline, which means that it will only occupy as much space as it needs to display its contents.

In the video you see how to use the Web Developer Tools to inspect the dimensions of an element. You can press the F12 key to open the developer tools. This helps you determine whether an element is block-level or inline.

This is a block element
This is an inline element This is another inline element

Notice how the block element stretches out to occupy an entire line, while the inline element fall in line and only take up as much width as is required by the content that is inside them.

At this point you don't need to worry about which elements are block-level and which ones are inline. It will become apparent as you continue to work with HTML more and more.

Questions

  1. Explain the difference between a block element and and inline element.
  2. True or false - a paragraph is a block element.
  3. How can you open the Web Developer Tools in your browser?