CODEWITHSUNDEEP
htmlcss
Sowmya
Sowmya

Reputation: 26989

p tag as parent is getting weird

I am using p tag as parent and adding few elements in it. But the problem is, when you look at inspect code p tag is displaying individually and it is not holding the childs inside.

Her is the html

<div class="createapp_div">
                 <p><h1>Select</h1> <button class=""></button> <button class=""></button></p>
                 <p><span>Name</span> <input type="text" /></p>
                <button>Create</button>
            </div>

FIDDLE

Upvotes: 1

Views: 425

Answers (2)

Alex Marinov
Alex Marinov

Reputation: 191

You shouldn't place headers inside a <p> element.

Upvotes: 0

Jeff Noel
Jeff Noel

Reputation: 7617

Explanation

The p DOM Element can only contain inline elements. (MDN) (W3C HTML5)

The start tag is mandatory. The end tag may be omitted if the <p> element is immediately followed by an <address>, <article>, <aside>, <blockquote>, <div>, <dl>, <fieldset>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <menu>, <nav>, <ol>, <pre>, <section>, <table>, <ul> or another <p> element, or if there is no more content in the parent element and the parent element is not an <a> element.

Permitted tags

Here is an exhaustive list of the permitted tags inside a p element.

Content:

<abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> and plain text (not only consisting of white spaces characters).

Upvotes: 9

Related Questions