1

I'm working on some markup for an internal site, and laying out a list of contacts in a series of rows. Right now, I'm laying this out with <div> tags:

<div class="row">
    <div class="col-md-5">
        <button type="button" id="createNewContact" class="btn btn-lg btn-success">
            <span class="glyphicon glyphicon-plus-sign"></span>
            Create
        </button>
    </div>
</div>

and I get the sort of markup you'd expect. You know, exactly what I typed in to Visual Studio. I'd like a bit more breathing room between rows, and I want to switch to <p> tags:

<p class="row">
    <div class="col-md-5">
        <button type="button" id="createNewContact" class="btn btn-lg btn-success">
            <span class="glyphicon glyphicon-plus-sign"></span>
            Create
        </button>
    </div>
</p>

Whenever I do that, my markup craps out in the browser:

<p class="row">
    </p><div class="col-md-5">
        <button class="btn btn-lg btn-success" id="createNewContact" type="button">
            <span class="glyphicon glyphicon-plus-sign"></span>
            Create
        </button>
    </div>
<p></p>

This happens no matter what browser I use. I've experimented with moving the <p> tags around, and putting them around <div> and <fieldset> tags (at least) produce this markup.

Am I missing something here?

Razvan Dumitru
  • 11,815
  • 5
  • 34
  • 54
jwheron
  • 2,553
  • 2
  • 30
  • 40
  • Is there a reason you want to switch to the paragraph tag? Also If you want to add some spacing you can always just add a break tag () it'll add a line break with some spacing. – Samuel Bergeron Jun 12 '15 at 14:45
  • I dislike `
    ` tags. I'd rather have the formatting baked into the structure of my markup.     – jwheron Jun 12 '15 at 14:58

1 Answers1

2

Because a <p> cannot contain a <div> or other block elements the browser will always take out the <div> out of the <p>

A <p> is created to contain text or other inline elements like <span>.

This has nothing to do with VS or Bootstrap, is it just html

Also check this answer

Community
  • 1
  • 1
Bobby Tables
  • 2,953
  • 7
  • 29
  • 53
  • Sigh. You're right -- I misread the spec. I was looking at the tag omission section here (http://www.w3.org/TR/html5/grouping-content.html#the-p-element) and interpreted the "element's end tag may be omitted" section as some kind of syntax error I was running into. – jwheron Jun 12 '15 at 14:54
  • And, of course, as soon as I switch them to `` tags, it works as expected. Goes to show that even an someone who's done this for a long time can have a major lapse. Thanks. – jwheron Jun 12 '15 at 15:00