how browser restructure invalid html structure ? is there is any rules or approach?

from below example

if an a tag nest an a tag. browser restructure html.. inside in a tag button tag not restructure . similar for a button tag . both are invalid html structure

I am looking for the concept or rules or approach and put source for study etc

Why I am looking for this ?

when I am worked for a client, sometimes I found invalid html structure and many types of html structure. sometime I need to redesign for invalid html structed. I think there must be some rules or logic or approach or something behind the scene of restructure.

follow those question Q1 and Q2

 let aTag = document.querySelectorAll('a')
    let buttonTag = document.querySelectorAll('button')
   
 console.log('===a tag===')
    aTag.forEach(function(item){
         console.log(item)
    })
     console.log('===button tag===')

      buttonTag.forEach(function(item){
         console.log(item)
    })

 .card{
      display: flex;
      flex-direction: column;
      padding: 10px;
      border: 1px solid slateblue;
       width: 200px;
      text-align: center;
 }

<a href="" class="parent a-tag">
    <div class="card">
        <h4>Title</h4>
        <p>Paragraph</p>
        <button>Add to Cart</button> 
        <a href="" class="child a-tag">Compare Product</a>
        
    </div>
</a>


<button>
    <a href="">A Tag</a>
   <button>Button</button>
</button>

Picture from console google chrome browser

from how browser restructure invalid html structure ? is there is any rules or approach?