Why html br tag is so evil

<br> tag is used for breaking web contents and making new line. Even though <br> is actually not evil, we may feel it is evil if we don't know how to use it. Also <br> is a huge deal when it comes to working with HTML String with Javascript. That's why we see a lot of web content editors use <p></p> instead of <br>.

So why we say <br> is so evil? <br> is an inline text semantics element and it should not be used for making space between text content elements. Also wraping text content with <p>, <span> or other inline element, give us more control for each text content.

These limitations do not mean we should not use <br>, however we should use <br> in smart way.

Example cases of bad <br> :

<div>
<br>
</div>
<br>
<div>
<br>
</div>


<br> is an inline text semantics element. We should not use it for giving space between text content elements.

<br>
function thisIsFuncion(){<br>
 return 2 + 5; <br>
}<br>
<br>


The above <br> use-case is not wrong but this is not a good option since it is hard to apply css separately. We can still parse them easily but it would be better if we have some tags holding the text content.

This is better! :

<p>
<span>I am so tired.</span>
<br>
<span>I want maccas.</span>
</p>



Link: MDN <br>

No comments:

Post a Comment