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:
- block elements start on a new line and stretch the full width of the browser (regardless of the text inside of them); and
- inline elements do not start on a new line and are exactly the width of the text inside of them.
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.
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:
In the example below, you can see how the
br element breaks up the song lyrics:
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.
brfor aesthetic line breaks is especially harmful when you consider how your design should adapt to different screen sizes. In this way,
broffers very little flexibility and, as you’ll see, CSS offers you a lot.
If you want more context or examples, check out MDN: