HTML: The Br Tag

0
419
HTML br tag

The <br> tag is used to generate an end of line.

The <br> tag has no end tag. It should not have a closing forward slash to represent its signature:

This is wrong <br/>
So is this <br />

When you have text content that needs to be separated on a separate line, this is how you should do it:

<p>System status: Online<br>
12:00AM Sunday March 15, 2016</p>

Another example:

Theme: The Cool Theme<br>
Company: Joe's Coding Workings<br>
URL: joescoding.com

Don’t use the <br> tag to separate groups of content meant for different lines that can represented semantically in a better way:

<h2>My To Do List</h3>
<p><a href="eat">Eat</a><br>
<a href="play">Play</a><br>
<a href="sleep">Sleep</a></p>

Rather it should be in a list like this:

<h2>My To Do List</h2>
<ul>
<li><a href="eat">Eat</a></li>
<li><a href="play">Play</a></li>
<li><a href="sleep">Sleep</li>
</ul>

In HTML forms, sometimes web developers use the <br> tag to make each field appear on a separate line like this:

<form id="formLogin" action="login.php">
  <label>Username</label><input type="text"> name="username"><br>
  <label>Password</label><input type="text"> name="password"><br>
  <button type="submit">Login</button>
</form>

But that is bad practice because it is being used for presentational purposes rather than semantical. Rather, it should be changed to be like this:

<form id="formLogin" method="post" action="login.php">
<p><label>Username</label><input type="text" name="username" required></p>
<p><label>Password</label><input type="text" name="password" required></p>
<p><input type="submit" value="Login"></p>
</form>
#formLogin label {
  margin-right: 1em;
}
#formLogin input {
  display: inline-block;
}

Or even better without labels and the use of placeholders like this:

<form id="formLogin2" method="post" action="login.php">
  <p><input type="text" name="username" placeholder="Type username" required></p>
  <p><input type="text" name="password" placeholder="Type password" required></p>
  <p><input type="submit" value="Login"></p>
</form>

Web developers should not use the no longer supported clear attribute:

<br clear="both">

Rather use it this way:

.clear {
  clear: both;
}
 
<br class="clear">

Of Interest