How browser restructure the invalid html structure, is there any rules or approach?

Question

Note:

answer will be like this .. yes ..there are rule and approach.. it's depend on adoption agency algorithm etc. you can follow those (links) etc. and your short description . i am not looking for any algorithm or more..

from example if an a tag nest an a tag. chrome browser restructure html . similar for a button tag . both are invalid html structure

I know a and button tag are both interactive element. interactive elements(a,button,input etc) are related to the user's activity.

From the comment:

it’s too broad question.

1. Only answer for below example code or scenario.

I think every browser should work same way from somewhere one point... That means should follow some basic rules or approach. If anyone found something like this please mention.

why I am looking for this ?

when I work for a client . I find many invalid html structure . many types of html structure. sometime I need to redesign for invalid html structure. I think I need to understand the concept of browser restructure for further web development..

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

Answer 1

The first of all you can read specification and try to find cases which you interested:

https://html.spec.whatwg.org/multipage/parsing.html#parsing-main-inbody

In ideal world all browsers should implement described in spec algorithms how to deal with different situations. But spec could not cover all cases and because we all people we can make mistakes/misinterpretations etc so I recommend to look at Chromium source code where you may find solution for some quirk cases which not covered by the spec but could be covered by particular browse engine:

https://source.chromium.org/chromium/chromium/src/+/master:third_party/blink/renderer/core/html/parser/html_tree_builder.cc;l=688;drc=fb051a0f9d7f7b5695e9ba33c30d174702eae7d0;bpv=0;bpt=1