Joomla adds closing tags in HTML

Question

i'm trying to copy some html to joomla. yesterday it worked fine, but today i saw that something was wrong, i looked in google Chrome and saw that the line of code that should be like this:

     <div class="caption" id="five">
       <a href="#"><h5>Windows 10 <p>Lorem ipsum dolor sitamet</p></h5></a>
        </div>                  

Was now:

     <div class="caption" id="five">
       <a href="#"><h5>Windows 10 </h><p>Lorem ipsum dolor sitamet</p></a>
        </div>  

I tried to change filtering etc, but i can not fix it. Also it was very strange to me that it worked perfectly yesterday but today it did not. Can someone help?

(i'm using JCE editor)

Answer 1

Even though they are both block elements, you should not be using <p> tags inside <h*> tags as it's not semantically correct. Thing like this may cause editors such as your JCE to throw a hissy fit.

Also, <a> is an inline elements, therefore inless you specify it as a block element, your <h5> tag should be the parent, not the child

Instead, what you should be doing is:

HTML:

<div class="caption" id="five">
    <h5><a href="#">Windows 10 <span>Lorem ipsum dolor sitamet</span></a></h5>
</div> 

CSS:

.caption > a {
    display: block;
}