Line break in HTML: use the br tag. Line break in HTML: use the br tag The tag is a soft break

Lesson 5.

In this lesson we:
1. Let's find out how to do it html code was more convenient and easy to read for us.
2. Let's look at how to correctly wrap a text line.

Making the html code convenient.

Now our code is clear and easy to read, since there is little text and practically no tags. When we create a more complex page, there will be many tags, so it will be difficult to find the right one.

To avoid a mess of tags, you need to initially arrange tags and lines so that they are visually easier to perceive. When the browser reads information from html pages, it doesn’t matter to him how many spaces and how many empty lines there are in the code.

I changed the text in the page code relative to the one we created, but it doesn't matter. The left and right pictures show the same code. Both options will be displayed by the browser on the monitor screen exactly the same. Agree, working with the code shown on the right will be much easier than with the one on the left.

The code we are looking at is very simple, but even now the difference in visual perception is noticeable. There are no specific rules for “putting things in order”; each master decides for himself how it is more convenient for him to work.

HTML line break. Tag .

Pay attention to the picture. In the first version the text is written in one line, in the second version in two lines.

The browser will display both options the same. The text will be written in one line:

You ask why is this? Indeed, in one of the codes, part of the text is moved to another line. It would be logical if in the browser some of the text was also moved to another line, but html has its own logic in this regard. If we make a line break in the html code, then for the browser this is equivalent to one space(like a regular space between words in text). If we move part of the text not one line down, but 2 or 3 (any number), then the browser will still consider this distance as one regular space between words and when displayed on the screen, the text will be written in one line.

Tag

When we got acquainted with tags in the third lesson, I mentioned that there are tags that do not require closing. Tag   one of them is used for line breaks.
Let's apply it in code:

We have inserted a tag   into our html code and now when you launch the file through the browser, part of the text will be transferred to the next line.
* Don't forget to save changes in Notepad (Ctrl + S) and refresh the page in the browser (F5).

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.

The source for this interactive example is stored in a GitHub repository. If you"d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

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.

Attributes

Deprecated attributes

clear 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:

Mozilla
331 E. Evelyn Avenue
Mountain View, CA
94041
USA

The result looks like so:

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 an empty 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 .
Permitted ARIA roles	Any
DOM interface	). It inherits from HTMLElement."> HTMLBRElement

Specifications

Specification	Status	Comment
HTML Living Standard The definition of " "in that specification.	Living Standard
HTML5 The definition of " "in that specification.	Recommendation
HTML 4.01 Specification The definition of " "in that specification.	Recommendation

Browser compatibility

The compatibility table in this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
br	Chrome Full support 1	Edge Full support Yes	Firefox Full support 1	IE Full support Yes	Opera Full support Yes	Safari Full support Yes
clear Deprecated	Chrome Full support 1	Edge Full support Yes	Firefox Full support 1	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes

Often there is a need to add a new paragraph, but without the blank line that the paragraph tag inserts

For some text fragments, standard paragraph spacing is simply inappropriate. These can be inscriptions under pictures and in tables, poems, quotes, footnotes and notes.

To force line breaks, a special tag is provided, the function of which is contained in its name br (break row - “break a row, line”). Tag
hypertext markup language html means that all content following it must begin with new line. If necessary, you can add several tags in a row to achieve the required spacing.

Tag
It's not case sensitive and doesn't require a closing tag because it's an empty element, but it's better to get used to closing all tags. In XHTML, the break tag must be "closed" with a backslash.

Example of using a break tag

The br tag in action< /title><р>Absenteeism from work</р>Nowhere else and never I wasn't that bad The authorities are a greedy horde Gnawing at me alive</р>Absenteeism from workNowhere else and never I wasn't that bad. The authorities are a greedy horde Gnawing at me alive.<h2>Tag attribute </h2>The only attribute it has <a href="https://05fi.ru/en/tegi-v-html-odinarnye-i-parnye-tegi-html-elementy-odinochnye-i-parnye-tegi/">html tag</a> , called It tells the browser what to do with the line wrap if the text has to wrap around a so-called floating element, which could be, for example, an image with an attribute <a href="https://05fi.ru/en/vyravnivanie-h1-po-centru-css-atributy-i-zagolovki-v-html-i-nekotorye-drugie/">align</a>, using right/left values, or a block in CSS that has the float property.In the XHTML 1.0 / HTML 4.01 specifications, the clear attribute can only be used with Transitional, Frameset, and<!DOCTYPE>, otherwise the code will not work.<h2>Tag Attribute Properties</h2>The effect of the clear attribute depends on its value and the placement of the floated element. The attribute can take 4 values: <img src='https://i1.wp.com/fb.ru/misc/i/gallery/21147/458111.jpg' width="100%" loading=lazy loading=lazy>The left value prevents the left-aligned element from wrapping, so the text will trip over the tag , will be located below the image or other floating element.Exactly the same result will come from using the all argument, which will never allow either the right or the left.The right value prevents text from wrapping around the right-aligned element, so after the tag the text will have no choice but to go around the image, flowing around it to the right.The value none (“neither yours nor ours”) generally removes all powers from the clear attribute, and the tag silently moves the line down.The tag's clear attribute does not have a default value as such.<h2>Tag - this is a soft transfer</h2>The line break tag is very useful for creating the necessary spacing between paragraphs, within which it is used as a soft break, but not as a means of dividing text into paragraphs.<img src='https://i0.wp.com/fb.ru/misc/i/gallery/21147/458084.jpg' width="100%" loading=lazy loading=lazy>You shouldn't get too carried away with the newline tag for formatting text, because the results of using it are not always elegant.For example, if you use the tag to break lines within a paragraph, this may result in a "comb" appearing in the user's window if it is smaller than the window the webmaster was targeting. When displayed <a href="https://05fi.ru/en/tekstovaya-informaciya-model-dokumenta-tekstovye-formaty/">text documents</a> In the browser, the location of the line break within a paragraph is determined automatically depending on the size of the fonts and the size of the viewing window. Line breaks can only be carried out using word separator characters (for example, spaces). Sometimes in documents you need to set a forced line feed, which is implemented regardless of the browser settings. This is done using the forced line feed tag. , which does not have a corresponding closing tag. Enabling a tag into the document text will ensure that subsequent text is placed at the beginning of a new line. For example, this approach can be used to create list-type structures without using special list markup tags. Or, for example, this tag cannot be used to display poems, etc.<TITLE>Here is an example of using forced line feed (Fig. 1.8):

Using forced line feed

Over darkened Petrograd

November breathed the autumn chill.

Splashing with a noisy wave

To the edges of your slender fence,

Neva was tossing around like a sick person

Restless in my bed.

A.S. Pushkin. Bronze Horseman Tag
can be used to force a line feed

Unlike the paragraph tag

When using the tag
an empty string will not be generated.

Using a tag
requires caution - it is possible that the browser has already made a line break one or two words before it encountered your tag
. This happens if the reader's viewer window width is smaller than the same setting of the program with which you tested your document. In this case, it may turn out that only one word remains on a line in the middle of a paragraph, thereby ruining the beauty of the document layout.

Note

When using the tag
To break text around an image or table, you can set the CLEAR parameter to stop text wrapping. You can read about this in chapters 3 and 4.

Tags u

There are situations when you need to perform the opposite operation - disable line feed. There is a container tag for this . Text marked with this tag is guaranteed to fit on one line, regardless of its length. If the resulting line extends beyond the browser viewing window, then horizontal stripe

Note

scroll.

To ensure the continuity of text located in table cells, there is a special NOWRAP tag parameter. You can learn more about this in Chapter 4. Marking up text with a non-breaking line tag you can get very long lines . To avoid this, you can indicate to the reader's browser the location of a possible line feed, which will be performed only when necessary (the so-called "soft" line feed). This can be done by placing a tag in the right place in the text
(Word BReak), which is the same as the tag

Note

Tag , does not need a closing tag. is not supported at all by the Netscape browser. Browser Microsoft Internet .

Tag
Explorer recognizes this tag only in tagged text

sets a newline at the location where this tag is located. Unlike the paragraph tag
Using the BR tag does not add a blank space before the line. If text that uses a line break wraps around a floated element, then use the tag's clear parameter

you can make the next line start below the element.

Syntax
Text

text

Options

clear Tells the browser how to handle the next line if text wraps around a floated element.

Closing tag

Not required.

Example 1: Using a tag

Tag BR

R.L. Stevenson

Summer has arrived in the country

The heather is blooming again.

But there's no one to cook

Description of tag parameters

CLEAR parameter

HTML:

3.2

XHTML:

1.0

1.1

Description

The clear parameter tells the browser how to handle the next line if text wraps around a floating element. A floating element is an image that has an align parameter set or a layer to which it is applied. CSS property float

The effect of using the clear parameter depends on the edge to which the element is aligned and the value of the clear argument.
So, if the image is aligned to the left, and the value of the clear parameter of the tag
set to all or left , then the text after the tag

you can make the next line start below the element.

will be displayed below the picture. Any other value for clear will cause the text to appear to the right of the image and wrap around it.

Arguments
all Stops wrapping the element from both the right and left edges at the same time.

left Unwraps the left side of the element after the tag

.

right Cancels wrapping on the right side of the element.

none Cancels the effect of this property.

Default value

Similar to CSS

Example 2: Unwrap text

BR tag, clear parameter Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.