CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
Xiaojing Lu
Xiaojing Lu

Reputation: 15

redundant <p></p> show in browser

I am practicing writing a html using bootstrap. I am a beginner. There is a strange error when i open my html file in my browser: there are no paragraph tags <p></p>in the source code, but they show in the browser.

Part of source code:

<div class="header" style="background-image: url(http://www.cnblogs.com/skins/WebLoad/images/o_header.jpg">
        <header id="top" class="navbar navbar-static-top bs-docs-nav">
            <div class="container topbar">
                <div class="navbar-header">
                    <h1><b>Welcome to our home page！</b></h1>
                </div>
                <nav class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a id="signin-out" class="cd-signin header-item" href="#0">login/register</a></li>
                        <li><a class="cd-signup header-item" href="#0">know more</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <div id="name" class="bs-docs-header" tabindex="-1">
            <div class="container">
                <h1>team name</h1>
                <p>team desciption</p>
            </div>
        </div>
    </div>
Browser shows : screenshot of display with paragraph space at top

When i use firebug to inspect it, it shows code including paragraph tags redundant <p></p>

Upvotes: 0

Views: 93

Answers (2)

Yogesh Chauhan
Yogesh Chauhan

Reputation: 348

@Yogesh Chauhan: Main reasons for empty p tags could be:

  1. You are using online visual text editor for writing your code and hitting enter for a new line
  2. While writing HTML code you are hitting enter for a new line
  3. Usage of :empty CSS property in HTML

If you still have empty p tags in your HTML, then you can use javascript or jQuery to check for empty p tags and remove them.

Here is the code example for removing empty p tags usings jQuery. To implement this follow point:

  1. Include latest jQuery library in the header part of HTML
  2. Before closing body tag write the code
    <script> $('p:empty').remove(); </script>

This will remove all the empty p tags from your page.

$('p:empty').remove();
p { height: 30px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<p>Before empty p tags</p>
<p></p>
<p></p>
<p></p>
<p>After empty p tags</p>

<div class="header" style="background-image: url(http://www.cnblogs.com/skins/WebLoad/images/o_header.jpg">

  <header id="top" class="navbar navbar-static-top bs-docs-nav">
    <div class="container topbar">
      <div class="navbar-header">
        <h1><b>Welcome to our home page！</b></h1>
      </div>
      <nav class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          <li><a id="signin-out" class="cd-signin header-item" href="#0">login/register</a></li>
          <li><a class="cd-signup header-item" href="#0">know more</a></li>
        </ul>
      </nav>
    </div>
  </header>
  <div id="name" class="bs-docs-header" tabindex="-1">
    <div class="container">
      <h1>team name</h1>
      <p>team desciption</p>
    </div>
  </div>
</div>

Upvotes: 0

nkweb
nkweb

Reputation: 163

Are you sure you do not have anything on your body tag ?

Maybe it's just the cache of your browser that needs refresh (crtl + shift + R or cmd + shift + R)

You can also check if you do not have in your code a javascript plugin that adds code (in this p tag).

Upvotes: 1

Related Questions