Html line break new line

HTML Paragraphs

A paragraph always starts on a new line, and is usually a block of text.

HTML Paragraphs

The HTML

element defines a paragraph.

A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.

Example

This is a paragraph.

This is another paragraph.

HTML Display

You cannot be sure how HTML will be displayed.

Large or small screens, and resized windows will create different results.

With HTML, you cannot change the display by adding extra spaces or extra lines in your HTML code.

The browser will automatically remove any extra spaces and lines when the page is displayed:

Example

This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.

This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.

HTML Horizontal Rules

The

---

tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.

The

---

element is used to separate content (or define a change) in an HTML page:

Example

This is heading 1

This is some text.

---

This is heading 2

This is some other text.

---

The

---

tag is an empty tag, which means that it has no end tag.

HTML Line Breaks

The HTML
element defines a line break.

Use
if you want a line break (a new line) without starting a new paragraph:

Example

This is
a paragraph
with line breaks.

The
tag is an empty tag, which means that it has no end tag.

The Poem Problem

This poem will display on a single line:

Example

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

Solution — The HTML Element

The HTML element defines preformatted text.

The text inside a element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks:

Example

 
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

HTML Exercises

HTML Tag Reference

W3Schools’ tag reference contains additional information about HTML elements and their attributes.

Tag	Description
	Defines a paragraph
	Defines a thematic change in the content
	Inserts a single line break
	Defines pre-formatted text

For a complete list of all available HTML tags, visit our HTML Tag Reference.

Источник

: The Line Break element

The HTML element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.

Try it

As you can see from the above example, a
element is included at each point where we want the text to break. The text after the
begins again at the start of the next line of the text block.

Note: Do not use
to create margins between paragraphs; wrap them in elements and use the CSS margin property to control their size.

Attributes

This element’s attributes include the global attributes.

Deprecated attributes

Indicates where to begin the next line after the break.

Styling with CSS

The
element has a single, well-defined purpose — to create a line break in a block of text. As such, it has no dimensions or visual output of its own, and there is very little you can do to style it.

You can set a margin on
elements themselves to increase the spacing between the lines of text in the block, but this is a bad practice — you should use the line-height property that was designed for that purpose.

Examples

Simple br

In the following example we use
elements to create line breaks between the different lines of a postal address:

br /> 331 E. Evelyn Avenuebr /> Mountain View, CAbr /> 94041br /> USAbr /> 

Result

Accessibility concerns

Creating separate paragraphs of text using
is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology. Screen readers may announce the presence of the element, but not any content contained within
s. This can be a confusing and frustrating experience for the person using the screen reader.

Use

elements, and use CSS properties like margin to control their spacing.

Technical summary

Content categories	Flow content, phrasing content.
Permitted content	None; it is a void element.
Tag omission	Must have a start tag, and must not have an end tag. In XHTML documents, write this element as .
Permitted parents	Any element that accepts phrasing content.
Implicit ARIA role	No corresponding role
Permitted ARIA roles	none , presentation
DOM interface	HTMLBRElement

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 13, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

HTML New Line – How to Add a Line Break with the BR Tag

Dillion Megida

In this article, I’ll explain what line breaks are and show you how to create them in HTML.

What is a Line Break?

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 block 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 br 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 br tag:

 
Hello, I am 
trying to create a 
new line
 

The br 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:

Anchor tags, a , are inline elements, so instead of the second link showing on the next line, it shows in the same line like this:

You can use the br tag between the links to break the first link line:

Conclusion

The br tag in HTML starts the next element on a new line, similar to the carriage return \n in strings.

Instead of using block elements for putting elements in new lines, you can use the line break tag: br .

In cases like sentences, using the br tag serves as a visual line break and doesn’t affect accessibility. Screen readers will read the sentence as it is without pause.

Dillion Megida

Developer Advocate and Content Creator passionate about sharing my knowledge on Tech. I simplify JavaScript / ReactJS / NodeJS / Frameworks / TypeScript / et al My YT channel: youtube.com/c/deeecode

If you read this far, tweet to the author to show them you care. Tweet a thanks

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

freeCodeCamp is a donor-supported tax-exempt 501(c)(3) charity organization (United States Federal Tax Identification Number: 82-0779546)

Our mission: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons — all freely available to the public. We also have thousands of freeCodeCamp study groups around the world.

Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.

Источник

HTML
Tag

To force
line breaks
in a text,
use the br
element.

More «Try it Yourself» examples below.

Definition and Usage

The
tag inserts a single line break.

The
tag is useful for writing addresses or poems.

The
tag is an empty tag which means that it has no end tag.

Tips and Notes

Note: Use the
tag to enter line breaks, not to add space between paragraphs.

Browser Support

Global Attributes

Event Attributes

More Examples

Example

Be not afraid of greatness.

Some are born great,

some achieve greatness,

and others have greatness thrust upon them.

Related Pages

Default CSS Settings

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

HTML Line break

The HTML Line Break tag is used to apply a line break and start your text in the new line.

In HTML, we use the
tag to create a line break. For example,

 
Use the 
br tag 
to create line breaks in text.
 

Browser Output

In the above code, if you look carefully, you can find there is no closing tag for
. It’s because the
tag is an empty tag, which means it doesn’t require a closing tag.

As you can see, the
tag adds a new line without having to create a new paragraph.

The line break is helpful for writing structured texts like addresses and poems without creating multiple paragraphs.

Line-Break vs Multiple Paragraphs

As we know, an HTML paragraph always starts on a new line, instead of a line break we can also use multiple paragraphs. For example,

Use the
 
br tag
 
to create line breaks in text.

Browser Output

We can see we have successfully applied line breaks using multiple paragraphs. However, there are several drawbacks of this approach:

• Screen readers treat each paragraph as separate sentences. That is, Use the , br tag , and to create line breaks in text. will be read as different sentences which will create confusion for users.
• Each paragraph has its own default styling, hence with multiple paragraphs, there will be unnecessary margin and padding between the lines making them not seem as continuous. You can see that in the above output as well.

Example: Line breaks using HTML
and

 
Roses are red
 
Violets are blue
 
HTML is Fun
 
and so are You!
 
Roses are red 
Violets are blue 
HTML is fun 
and so are You!
 

Browser Output

Table of Contents

Источник