What’s an HTML line break?

Print anything with Printful



HTML line breaks can be created using the BR tag or CSS properties to define spacing around block-level elements. The use of the BR tag is generally accepted for minor formatting, but the paragraph tag is preferred for separating text areas. Increasing the size of a text box with CSS properties can also create a line break. The CLEAR modifier can be used to specify line breaks around inline images.

In HyperText Markup Language (HTML), a line break is a cascading style sheet (CSS) tag or property that causes the HTML viewer or web browser to immediately scroll down to the next available line and draw the next element, a start from the edge. There are two generally accepted ways to insert an HTML line break in a document. The first is to use the break (BR) tag, forcing the browser to start subsequent items on the next line, aligned to the left edge. The other option is to use different CSS properties to define borders, gutters, or spacing around block-level elements to create open space, although this method doesn’t affect word wrap in a document.

One of the design principles of HTML is that the browser can usually have some control over the layout of web pages. This allows well-designed sites to look very smooth, regardless of display size. When drawing a paragraph, the browser is usually tasked with finding the right place to end a line, usually at the right edge of a block. Using an implicit HTML line break breaks this process.

The BR tag is the simplest way to end a line and move down. The use of the tag is generally accepted for some minor formatting, although its use is frowned upon as the only way to define paragraphs in a document. The paragraph tag is preferred for separating text areas, because it creates a block that can be manipulated with CSS or other tags, while the HTML line break tag stands alone and does not enclose a block. The break tag can be used within a paragraph block, mainly to prevent the browser from using two breaks between paragraphs, which is the default behavior.

Another method used to cause a line break is to increase the size of a text box with CSS properties. This effectively extends the bottom of a container so that an empty space is left after it. This may look the same as using a break or paragraph tag, except that the text inside the container is not changed, so word wrapping is still largely controlled by the browser.

One area where you may need to specify an HTML line break is when text wraps around an inline image. An easy way to create cleanly formatted paragraphs that sit alongside an image is to use the CLEAR modifier for the HTML line break tag. This allows you to specify whether a line break should continue normally or go to the next available line after an image. It’s also possible to create CSS styles that mimic this behavior, although it may not be as smooth under certain circumstances.




Protect your devices with Threat Protection by NordVPN


Skip to content