[HTML5 new tags] tag – line break opportunity

Beside the traditional <br> tag, the HTML5 support a new line break tag called opportunity line break <wbr> tag. In this article, I will present some difference between these two tags as well as the advantages of using this HTML5 new feature.

The problem

Suppose that you have this HTML code in your web page:

<div style="width:200px; background-color:#ECECEC;">
Welcome to <a href="#">https://hieule.info</a>, please 
give some comment to help me improve my articles.
</div>

This will be displayed as below in your web browser

Welcome to https://hieule.info, please give some comment to help me improve my articles.

You may notice that there is a ugly gap in your sentence. The same situation happens when your webpage is viewed under a difference screen size (e.g. on mobile screens).

The benefit of using <wbr> tag

The new version of our snippet using new <wbr> tag is as follow:

<div style="width:200px; background-color:#ECECEC;">
Welcome to <a href="#">https://<wbr>web<wbr>trung<wbr>hieu<wbr>.info</a>, 
please give some comment to help me improve my articles.
</div>

And this is the result, the gap is removed!

Welcome to https://webtrunghieu.info, please give some comment to help me improve my articles.

The principle behind

The <wbr> tag is defined as:

The <wbr> tag defines where in a word it would be ok to add a line-break.

That means it does not force the browser add a line-break like the <br> tag but tell the browser it can be allowed to add a line-break here when needed. It helps us a lot when our content has long words, especially a web url as above, and need rendering on several screen size. By using the <wbr> tag in suitable places, you can keep your webpage looking well in most cases

Leave a Reply

Your email address will not be published. Required fields are marked *