Tulis sesuatu tentang diri Anda di sini. Jelaskan secara singkat siapa Anda dan apa yang Anda lakukan untuk kehidupan Anda. Ingatlah untuk menggunakan teks tebal dan miring, untuk lebih memahami HTML lebih lanjut.
A line break, as the name implies, is a break in line 😅. A line break in HTML is a point where a line ends horizontally, and the next line starts on a new line.
In HTML, when you write a string like this:
Hello, I am
trying to create a
new line
The whitespaces [the tab space before "Hello", the space between "am" and "trying", "a" and "new"] will be ignored. The result on the screen will appear like this:
Hello, I am trying to create a new line
One way to fix this [though it's not very effective] is to create three tags like this:
Hello, I am
trying to create a
new line
This will result in the following:
Hello, I am
trying to create a
new line
Because p
tags create
Hello, I am trying to create a new line
0 elements, they occupy the entire horizontal space and the next element goes to the next line – as you can see from the result above.This solution is not effective because you have created three paragraphs. In cases where a screen reader is to interpret this, it will read it as three paragraphs instead of a single sentence. This can affect web accessibility.
So how do you add a line break for an inline element?
How to Add a Line Break in HTML
HTML has tags for numerous purposes, including to create line breaks. You can use the
Hello, I am trying to create a new line
1 tag in HTML to add line breaks. It can go between inline elements to break the elements into multiple parts.Here is an example of a paragraph with the
Hello, I am trying to create a new line
1 tag:
Hello, I am
trying to create a
new line
The
Hello, I am trying to create a new line
1 tag is a void element that doesn't have a closing tag. Instead, it is a self-closing tag.The above code results in this:
Hello, I am
trying to create a
new line
You can use this tag for other forms of inline elements like links. For example, look at this code:
Google
Twitter
Anchor tags,
Hello, I am trying to create a new line
4, are inline elements, so instead of the second link showing on the next line, it shows in the same line like this:Google