Should I avoid "br" in HTML?

[martinl83372021]

Hi, Everyone.

Here's an HTML ignorant question for you. In my RH 2020 project, I've been trying to keep the HTML clean. I understand "clean" to mean the line ends in "</p>."

But in this case, I've been unable to produce that. Instead, the HTML ends  in:

• <p><br />

Thank you.  Here's a screenshot of the page (which looks like what I want, except for the "br"):

Googling tells me that "br" means "line break." Should I try to avoid that? 

[Amebr · Accepted solution]

<br /> is fine. You shouldn't use it to create text that looks like paragraphs. But sometimes you might want to force a sentence or word within a paragraph to start on a new line, but still be within the paragraph. That's what the br is for.

I think your example it fine, and RH just inserts a br when the paragraph is currently empty. It should disappear as soon as you type a character. I'm not sure why it does it - perhaps because HTML treats white space as though it doesn't exist, so adding the br ensure you get a paragraph sized gap, if you pressed Enter again and started typing in a new paragraph?

[Stefan Gentz]

Yes, <br/> is just a placeholder when you create a new paragraph. It goes away as soon as you start typing. If you hit Return twice or multiple times, you will also notice that the <br/> goes away and is replaced by a non-breaking space (Unicode 00A0): <p> </p>

This is because browsers tend to "hide" completely empty paragraphs <p></p>, therefore RoboHelp "fills" the empty paragraph with a non-breaking space which forces Browsers to render an "empty" paragraph.

A word of caution:

It is not recommended to use empty paragraphs for purely visual purposes. From an accessibility point of view, this is not good. E.g., a screen reader would announce a new paragraph which is then followed by: Nothing. Maybe even multiple times, the screen reader would read: Paragraph. Paragraph. Paragraph. Which gives the listener a bad experience.

It is better to create space between paragraphs with CSS margin-above or margin-below.

[Peter Grainge]

I think Stefan will confirm where it can usefully be used is to avoid the space below a paragraph and in lists.

• Say your style has, to go to an extreme, 18pts below it but you want a "paragraph" below without that space. Technically it is not a new paragraph but it looks like one.
• In lists you may want a second paragraph within the list item. Shift Enter will give you a fresh line without the bullet or number. 

In the code, both will show the BR tag.

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

[Stefan Gentz]

---

@Peter Grainge wrote:

• In lists you may want a second paragraph within the list item. Shift Enter will give you a fresh line without the bullet or number. 

---

I would say "it depends" 😉

In case you want to have two paragraphs in one list item (or maybe even a block image or a table), I would prefer to wrap the "paragraphs" into <p> elements.

That is, instead of this:

<ul>
    <li>First "Paragraph"<br/>
    Second "Paragraph"</li>
    <li>second item</li>
    <li>third item</li>
</ul>

I would do it like this:

<ul>
    <li>
        <p>First "Paragraph".</p>
        <p>Second "Paragraph".</p>
    </li>
    <li>
        <p>Please note these specifications:</p>
        <table>
            <thead>
                <tr>
                    <th>Key</th>
                    <th>Value</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Power</td>
                    <td>100 W</td>
                </tr>
            </tbody>
        </table>
        <p>This is another paragraph below the table in this list item.</p>
    </li>
    <li>
        <p>Last list item.</p>
    </li>
</ul>

With this approach, you always get a clear separation of elements and PCDATA.

But I tend to say, it depends on the content. Is that break intended to "form" two paragraphs? If yes, I would use <p>s. If it is just a visual break within a paragraph (as one information unit), that a <br/> is fine.

[martinl83372021]

Excellent. Everyone, thank you so much. Great primer. 

Amber and Peter, your recommendations jibe with my most common needs. Great to know about the SHIFT + ENTER shortcut. 

Stefan, I so appreciate you drawing my attention to the accessibility issues. I have a visually impaired reviewer who will soon be holding me to task for accessbility. I love now knowing to avoid empty paragraphs. It's a habit of mine. I'll need to go back and change them. 

But I've Googled "margin-above" and "margin-below" (CSS to create white space between paragraphs). The closest I've found is "margin top" and "margin bottom." Is that the same thing?

Thank you!

[Stefan Gentz]

Sorry, I accidentally wrote "margin-above" and "margin-below". Of course, correct is "margin-top" and "margin-bottom".

[Peter Grainge]

Above and below is colloquial. Top and bottom in CSS.

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

[martinl83372021]

Super good! 

Thanks very much, Everyone. Have a great day.