P closing before the / P tag

Question

P closing before the / P tag

Navigation

#1 by (5 votes)

2

I have the following code to generate an owl carousel inside a div of the site I'm developing, but I'll see in the html the  tag closes before the carousel div, leaving the layout totally wrong. Below is the code that is present in php:

<p class="htlfndr-hotel-thumbnail">
    <div class="owl-carousel-search owl-theme htlfndr-hotel-thumbnail">
        <div class="item">
            <a href="#" data-toggle="modal" data-target="#imgModal" onclick="atualizaModal(\'thumb.php?src='.$strUrlSistema . $arrItemQuartoDisponivel['imagem'].'\');" >
              <img src="thumb.php?src=' . $strUrlSistema . $arrItemQuartoDisponivel['imagem'] . '&x=260&y=155&q=100&fill=false" alt="pic" />
            </a>
        </div>
        <div class="item">
            <img src="thumb.php?src=' . $strUrlSistema . $arrItemQuartoDisponivel['imagem'] . '&x=260&y=155&q=100&fill=false" alt="pic" />
        </div>
     </div>
</p>

And below is the code as shown on the web (Code seen by inspect element):

The tag  was previously a <a href> and I replaced it because I thought that what caused the error was to have an equal tag inside it, but after its replacement the error of the tag closing before continued, someone would have some idea of what it can be?

php html

asked by anonymous 01.01.2018 / 18:04

1 answer

How to add a line break after a certain amount of characters? How to use the SUM aggregation function in a NHIBERNATE query?

score 5 · Accepted Answer

The tag  does not allow <div> inside. As W3C informs in this documentation :

The P element represents a paragraph. It can not contain block-level   elements (including P itself).

The element P represents a paragraph. Can not contain elements    block-level (including P itself).

The div is considered a block-level element ( according to this documentation , also from W3C).

When you insert a div into a p element, p is closed when div is opened, and the browser still adds another  after. Example:

This code:

<p>
    <div>
       texto texto texto
    </div>
</p>

It will result in this:

<p>
</p>
<div>
    texto texto texto
</div>
<p>
</p>

To work around this, instead of  , use the div tag itself:

<div class="htlfndr-hotel-thumbnail">
    <div class="owl-carousel-search owl-theme htlfndr-hotel-thumbnail">
        <div class="item">
            <a href="#" data-toggle="modal" data-target="#imgModal" onclick="atualizaModal(\'thumb.php?src='.$strUrlSistema . $arrItemQuartoDisponivel['imagem'].'\');" >
              <img src="thumb.php?src=' . $strUrlSistema . $arrItemQuartoDisponivel['imagem'] . '&x=260&y=155&q=100&fill=false" alt="pic" />
            </a>
        </div>
        <div class="item">
            <img src="thumb.php?src=' . $strUrlSistema . $arrItemQuartoDisponivel['imagem'] . '&x=260&y=155&q=100&fill=false" alt="pic" />
        </div>
     </div>
</div>