Skip to main content
M
martinl83372021
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

    M
    martinl83372021Author
    Inspiring
    May 5, 2021

    Super good! 

     

    Thanks very much, Everyone. Have a great day.

      Peter Grainge
      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.
        M
        martinl83372021Author
        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!

          S
          Community Manager
          Stefan GentzCommunity Manager
          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
          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.
          S
          Community Manager
          Stefan GentzCommunity Manager
          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.

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

            S
            Community Manager
            Stefan GentzCommunity Manager
            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.

            Terms & ConditionsAccessibility statement
            Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices