Current Location：How HTML > HTML Articles > Content

The HTML br Tag

The HTML br Tag

In HTML, the <br> tag is used to insert a single line break. It is an empty tag which means that it does not have a closing tag.

Basic Usage

The <br> tag is most commonly used to insert line breaks in text, such as when creating a new paragraph or separating different elements. Here is an example of how the <br> tag can be used:

<!DOCTYPE html>
<html>
<body>
    <p>Hello, how2html.com!<br>Welcome to our website.</p>
</body>
</html>

Output:

The HTML br Tag

In the above example, the <br> tag is used to create a line break between “Hello, how2html.com!” and “Welcome to our website.”

Multiple Line Breaks

You can also use the <br> tag multiple times to insert more than one line break. For example:

<!DOCTYPE html>
<html>
<body>
    <p>First line<br><br>Second line</p>
</body>
</html>

Output:

The HTML br Tag

In this example, there are two <br> tags used to create two line breaks between “First line” and “Second line.”

Using <br> with Inline Elements

The <br> tag can be used with inline elements, such as <span>, to create line breaks within the inline content. Here is an example:

<!DOCTYPE html>
<html>
<body>
    <p>Hello, <span>how2html.com<br>Welcome</span> to our website.</p>
</body>
</html>

Output:

The HTML br Tag

In this example, the line break created by the <br> tag is inserted within the <span> element.

Positioning <br> with CSS

You can also control the positioning of line breaks created by the <br> tag using CSS. For example, you can set the line height of the <br> tag to create more space between lines. Here is an example:

<!DOCTYPE html>
<html>
<head>
    <style>
        br {
            line-height: 3em;
        }
    </style>
</head>
<body>
    <p>Line 1<br>Line 2<br>Line 3</p>
</body>
</html>

Output:

The HTML br Tag

In this example, the CSS code sets the line height of the <br> tag to 3em, creating more space between each line break.

Nesting <br> in Other Tags

You can also nest the <br> tag within other tags, such as <div> or <span>, to create line breaks within specific elements. Here is an example:

<!DOCTYPE html>
<html>
<body>
    <div>This is a line with a line break<br><span>This line also has a<br>line break</span></div>
</body>
</html>

Output:

The HTML br Tag

In this example, the <br> tag is nested within a <span> element to create a line break within that specific element.

Using <br> with <pre>

The <pre> tag in HTML is used to define preformatted text. When using the <pre> tag, the <br> tag can be used to insert line breaks within the preformatted text. Here is an example:

<!DOCTYPE html>
<html>
<body>
    <pre>
        Line 1<br>
        Line 2<br>
        Line 3
    </pre>
</body>
</html>

Output:

The HTML br Tag

In this example, the <br> tag is used within the <pre> tag to create line breaks within the preformatted text.

Using <br> in Lists

The <br> tag can also be used in lists to create line breaks between list items. Here is an example:

<!DOCTYPE html>
<html>
<body>
    <ul>
        <li>Item 1<br></li>
        <li>Item 2<br></li>
        <li>Item 3</li>
    </ul>
</body>
</html>

Output:

The HTML br Tag

In this example, the <br> tag is used after each list item to create a line break between items.

Adding Margins with <br>

You can also use the <br> tag in combination with CSS to add margins between lines of text. Here is an example:

<!DOCTYPE html>
<html>
<head>
    <style>
        br {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <p>First line<br>Second line<br>Third line</p>
</body>
</html>

Output:

The HTML br Tag

In this example, the CSS code adds a margin of 10px below each line break created by the <br> tag.

Using <br> in Tables

The <br> tag can be used in table cells to create line breaks within table content. Here is an example:

<!DOCTYPE html>
<html>
<body>
    <table>
        <tr>
            <td>Row 1<br>Row 2</td>
            <td>Col 2</td>
        </tr>
    </table>
</body>
</html>

Output:

The HTML br Tag

In this example, the <br> tag is used within a table cell to create a line break between “Row 1” and “Row 2.”

Wrapping Text with <br>

You can use the <br> tag to wrap text within a specific width. For example, if you have a long string, you can insert <br> tags at specific intervals to break the text into multiple lines. Here is an example:

<!DOCTYPE html>
<html>
<body>
    <p>This is a long string that needs to be wrapped with line breaks<br>
    at specific intervals to fit within a certain width of the page.</p>
</body>
</html>

Output:

The HTML br Tag

In this example, <br> tags are used to break the long string into multiple lines to fit within a certain width.

Using <br> with HTML Forms

The <br> tag can also be used within HTML forms to create line breaks between form elements. Here is an example:

<!DOCTYPE html>
<html>
<body>
    <form>
        <label for="name">Name:</label><br>
        <input type="text" id="name" name="name"><br>
        <label for="email">Email:</label><br>
        <input type="email" id="email" name="email">
    </form>
</body>
</html>

Output:

The HTML br Tag

In this example, <br> tags are used to create line breaks between form elements, making the form more readable and organized.

Conclusion

In conclusion, the <br> tag is a simple yet versatile tag that is commonly used to insert line breaks within HTML content. It can be used in a variety of ways to format text, create space between elements, and improve the readability of a webpage. By understanding how to use the <br> tag effectively, you can enhance the layout and presentation of your HTML documents.

Like(0)

HTML Articles