Line Break Tag HTML5

 

Note: The W3C does not accept the trailing slash   with the br tag

All attributes of the br tag are obsolete in HTML5.

The line break should only be used within text elements like the paragraph to break lines of text at desired locations.

In the past, lazy designers like myself used the br tag with the clear attribute for help in structuring web pages. Improper use, but it validated until HTML5 was released.

If you are converting to HTML5 and need a replacement to keep elements of your web page from running together, I've provided a simple fix below.

Break Clear all HTML5 Replacement

Using HTML4 to break your page elements at desired locations, you would simply place a br clear all tag and the page would line up as desired.

You can still use the tag to get the result in HTML5 but when you validate your code, you'll get errors every where you place a br tag with a clear attribute.

There are a couple of simple fixes.

Use this:  

CSS for the class:

p.clear {
	clear:both
}

To render this web page:

like this:

If W3C validation is important to you, here's an easy fix to keep your text from backing up into places you don't want it.

Place the   shown above before the H2 tags that produce the headings Monochromatic, Triads and Next Stop.

This will validate and it keeps the H2 tags from backing up to the available empty space.

Replacement for br tag used to create space.

Don't want your content laying on your footer?

Here's a little code for lazy designers to replace the br tags at the bottom of your web page content.

 

You could also create a paragraph class like this:
 

The CSS:

p.spacer {
line-height: 200% }

Free Tools We Recommend

Free Ebook How to Code in HTML5 and CSS3: "How to Code in HTML5 and CSS3" is a free e-book about making websites in HTML5 and CSS for absolute beginners. It doesn't require any experience in IT to start....
Free Logo Generator Turbologo.com: If you are building a website for business you need to begin thinking about creating a brand identity. An unforgettable logo could be just the start you need. You can create it free at Turbologo.com. They also provide generators for business cards and letterheads.
FREE HTML Editor (Windows): NoteTab Light: All the features of a commercial HTML editor.
FREE Apache Server (Windows): IndigoAmpp: Set up a real time server environment right on your PC. Test forms and scripts before uploading to your web space.
Linux Users: If like us, you've left the insane world of Microsoft Windows for the even worse experience of Linux, we recommend the BlueFish HTML editor. You'll find it in your software repository. It does have some QUIRKS, but it's FREE.; For image resizing we've found the easiest Linux tool to be Krita.