 |
| HTML5-WBR-TAG |
<wbr> Tag in HTML5
1. Introduction of <wbr> tag
2. Syntax of <wbr> tag
3. Attributes of <wbr> tag
Introduction of <wbr> Tag in HTML5
When a string is too large in your content, it does not break properly in the browser on a small screen and it spoils the structure of your paragraph. In HTML5 its solution has been provided.
HTML5 provides you with <wbr> tag. This is called a word break opportunity. You can use this tag in the middle of a long string.
<wbr> tag defines the opportunity of the line break. This means that by using the <wbr> tag, you can tell that from where the browser will break the string.
When there is a proper screen size to display the string, so the text shows without breaking. But when the screen is not able to show the text or string in a line, then it breaks away from the points defined by the <wbr> tag.
Difference between <wbr> and <br> Tag
1. The<br> tag forces line break. The <wbr> tag text breaks only when it is needed.
2. The <br> tag is used to break the line whereas <wbr> tag is used to break the word.
3. <wbr> tag is used between long strings in which there is no space. Although <br> tag can also be used in its place, as I told you, by <br> tag, even if the line tag is available space, the text only shows in the next line.
Syntax of HTML5 <wbr> Tag
The syntax of <wbr> tag is given below.
string <wbr> string <wbr> string <wbr> string
As you can see in the above syntax, many line break opportunities have been defined in a string by <wbr> tag. Let's now understand this through an example.
Suppose a MyBlogHelpTutorials is a string. Normally when this string shows in a web page, it will show up together. But you can define word break opportunities in it by using <wbr> tag. After doing this, it will be able to show different breaks even if they need to be broken. You can do this in such a way.
My <wbr> Blog <wbr>Help<wbr> Tutorials
If you use the tag in this situation, you will be shown in four different lines.
Attributes of HTML5 <wbr> Tag
There is no element specific attribute for <wbr> tag. It supports all the global attributes like id, class etc.
Event Attributes of HTML5 <wbr> Tag
<wbr> supports all global event attributes.
Example of <wbr> tag in HTML5
In the above example, MyBlogHelpTutorials is a complete string. In this string, the word break opportunity is defined by the <wbr> tag. This string may be shown separately if it is needed.
This example produces the output given below.
 |
| EXAMPLE-OF-WBR-TAG
Previous:- How to use Article Tag in HTML5?
|
0 Comments:
Post a Comment
Thank you for reading this post. Please do not enter any spam link in the comment box.