Skip to main content
Inspiring
May 5, 2021
Answered

Should I avoid "br" in HTML?

  • May 5, 2021
  • 5 replies
  • 1275 views

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? 

 

 

    This topic has been closed for replies.
    Correct answer Amebr

    <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?

    5 replies

    Inspiring
    May 5, 2021

    Super good! 

     

    Thanks very much, Everyone. Have a great day.

    Peter Grainge
    Adobe Expert
    May 5, 2021

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

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

     

    Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.
    Inspiring
    May 5, 2021

    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!

    Community Manager
    May 5, 2021

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

    Peter Grainge
    Adobe Expert
    May 5, 2021

    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

    Help others by clicking Correct Answer if the question is answered. Found the answer elsewhere? Share it here. "Upvote" is for useful posts.
    Community Manager
    May 5, 2021

    @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.

    AmebrCorrect answer
    Brainiac
    May 5, 2021

    <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?

    Community Manager
    May 5, 2021

    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.