Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to define a possible line-break using HTML5?
In this article, we will discuss how to define a possible line-break using HTML5. A line-break is used to create a new line within a block of text or content. It is typically used to create separation between pieces of information or control the layout of content on a webpage.
Approaches
We have two different approaches to defining a possible line-break using HTML5 including the following −
Using the “<br> element”
Using the “<wbr> element”
Let us look at each step in detail.
Approach 1: Using the "<br> method"
The first approach is to define a possible line-break using HTML5 as “<br>”. The line-break tag is helpful when you want to separate text into multiple lines without starting a new paragraph or adding extra space between them. Simply add the "<br>" tag at the point where you want to create the line break, and the browser will display the content on the next line.
Example
Following is an example to define a possible line-break using HTML5 using “<br>”.
<!DOCTYPE html>
<html>
<head>
<title>Using the <br> Tag</title>
<style>
h1 {
color: blue;
text-align: center;
}
h2 {
color: green;
}
p {
font-size: 18px;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Ttorials Point Articles</h1>
<h2>
How to defines a possible line-break
</h2>
<h3>Define HTML, CSS, JS?</h3>
<p>
HTML stands for Hyper-Text Markup Language and is how content is structured in code for a browser to display. Virtually, every page you view in a browser today has it’s content structured in HTML.<br> CSS stands for cascading style sheets and this is how content in HTML is styled and designed. Want to make some text BOLD, change the color of some text, or give something a background? CSS is the main way that is achieved today.<br> Javascript is a programming language for the web. All this means is that when you want something to move, change, or react on a website javascript is normally the thing doing it. Javascript handles logic so the if then’s of web design and development.
</p>
</body>
</html>
Approach: Using the "<wbr> method"
The first approach is to define a possible line-break using HTML5 as “<wbr>”. When you want to indicate a point where a word can be broken across lines, you can use the "<wbr>" tag. This is useful for long words or URLs that might not fit on a single line.
Example
Following is an example to define a possible line-break using HTML5 using “<wbr>”.
<!DOCTYPE html>
<html>
<head>
<title>Using the <wbr> Tag</title>
<style>
h1 {
color: blue;
text-align: center;
}
h2 {
color: green;
}
p {
font-size: 18px;
line-height: 1.5;
}
span {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Ttorials Point Articles</h1>
<h2>
Using the <wbr> Tag
</h2>
<p>
The <wbr> tag is used to suggest a line break opportunity in a long word or URL that cannot be broken up and must stay on one line.<br> Here's an example: <span>https://www.tutorialspoint.com/index.htm</span><wbr>.com
</p>
</body>
</html>
Conclusion
In this article, we examined two different approaches to define a possible line-break using HTML5. Here, we are using two different approaches “<br>” and the “<wbr>”. The "<br>" tag is used to insert a line break within a paragraph or other block of text, while the "<wbr>" tag is used to indicate a point where a word can be broken across lines.
536 Views
