htmlBlock & Inline Elements

In general, you can think of HTML elements as some type of box around some type of content. These boxes take two different forms:

In the following example, each of the HTML elements has a background color with some transparency added, so you can see how they are layered and nested.

See the Pen Block & Inline Elements by Christian Swinehart (@samizdatco) on CodePen.

Based on this example, which elements do you expect are block elements and which are inline?

These settings that make block and inline elements distinctive are just defaults and can be overridden when you start to write CSS. Having said that, it’s still important to understand the default settings as it helps you better understand what’s happening in the browser and will prevent you from writing unneeded code. For example, there’s no reason to write CSS to tell an h1 element to be full width; it does that by default.

Occasionally, you’ll have reason to want to introduce line breaks inside of a block element, like a p element. You can do this with the line break element: br.

In the example below, you can see how the br element breaks up the song lyrics:

See the Pen The <br> Element by Christian Swinehart (@samizdatco) on CodePen.

Just like other HTML elements, br is also meaningful; it should be used mainly for song lyrics, poems or street addresses; in each of these examples, the line breaks have a purpose. You should not use a br element to control the width of text for aesthetic purposes; that should be handled solely through CSS.

Using br for aesthetic line breaks is especially harmful when you consider how your design should adapt to different screen sizes. In this way, br offers very little flexibility and, as you’ll see, CSS offers you a lot.

Learn more

If you want more context or examples, check out MDN: