• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Should I avoid "br" in HTML?

Contributor ,
May 04, 2021 May 04, 2021

Copy link to clipboard

Copied

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"):

 

what is br.PNG

 

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

 

 

Views

313

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , May 04, 2021 May 04, 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 t

...

Likes

Translate

Translate
Community Expert ,
May 04, 2021 May 04, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
May 05, 2021 May 05, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 05, 2021 May 05, 2021

Copy link to clipboard

Copied

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 or Like if helpful. Found your answer elsewhere? Share it here.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
May 05, 2021 May 05, 2021

Copy link to clipboard

Copied


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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 05, 2021 May 05, 2021

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
May 05, 2021 May 05, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 05, 2021 May 05, 2021

Copy link to clipboard

Copied

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 or Like if helpful. Found your answer elsewhere? Share it here.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
May 05, 2021 May 05, 2021

Copy link to clipboard

Copied

LATEST

Super good! 

 

Thanks very much, Everyone. Have a great day.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation
Download Adobe RoboHelp