Why <br> is an inline element not a block level element in HTML ?

Question

Conceptual query

Answer 1

<br> is an old way of styling webpage.
It doesn't incorporate good control over the degree of line separation.
The modern way is by using CSS property margin-top or padding-top of the next element.

Answer 2

<br> is the only inline element that I know which adds a newline by default without additional CSS styling. Are there others?

Answer 3

Laksheya Good Question... dude...
As you asked why <br/> is not a block element....The answer is as following...
If you know , A block element must be started from a new line and that's rule of it on the other hand <br/> tag could be used with any other element (I mean it doesn't need to be started from a new line) ...This is just used to give a break ....So if you know : Inline elements doesn't need to be started from a new line ;

Answer 4

<br> is inline because it does not start on a newline but rather jump the pen to a newline

Answer 5

Gordon that's not the question, is it? You are free to add any style of margin or padding even to a <br> :)

Answer 6

::sk::
I hope this demo explains
https://code.sololearn.com/WW60p2X6k18w/?ref=app

Answer 7

Laksheya Because a mechanism for starting a new line within the same block comes in handy?

Answer 8

A little elaboration on my demo :
1. Even for a block level element such as div, we can alternate its behavior by setting CSS property display as inline. (vice versa, we can set display block for inline element)
2. The space of separation between elements should be styled with margin. Never use br because you cannot style br, which will make your webpage display in a way you cannot fully control.

Answer 9

My attempt: Because it has to be empty, and a block element would also allow you to put any inline elements into it.

Answer 10

Laksheya right, but asking the other way round: any block elements that are conceptually empty as in <div/>?

Answer 11

Laksheya
It's true that, if we insert br tag, we get a new line. But br tag is not a part of new line. It's an
inline-block Element.

Answer 12

Gordon I am sure that demo explains something, but it doesn't say anything about the OP's question?

Answer 13

Laksheya
There's no such thing as an inline block element.
br behaves a bit similar to img.
Or think of it as a line feed character that is also kind of a non character :)

Answer 14

Laksheya in response to Gordon I did a bit of googling and found an interesting thread over on SO that gives the css1 spec as well: https://stackoverflow.com/questions/899252/can-you-target-br-with-css. Examples included...

Answer 15

watch the examples here about ALL block ELEMENTS and ALL inline ELEMENTS.
https://www.w3schools.com/html/html_blocks.asp

Answer 16

In the linked thread above there are a few interesting options on styling br with CSS (very limited) and using is/jQuery.

Answer 17

But sk <a> tag is also an inline element which hasn't to be empty.
So we can't say that inline elements has to be empty.

Answer 18

sk
I know what you are trying to say but if we took the concept that block level elements starts in new line then <br> must also be a block level element.
But still confused why it is not a block level element?