为什么要添加<a> breaks the whole HTML structure?

Question

Here is my code:

$data['full'] .= "<li>".
                    "<a href='/myweb/qanda/".$end["id"]."/".$end["subject"]."'>".
                        '<div class="tools">
                            <div class="numb">'.$end["total_votes"].
                                '<div class="vote_text">رای</div>
                            </div>
                            <div class="numb_viewed">'.$end["total_viewed"].
                                '<div class="viewed_text">بازدید</div>
                            </div>
                        </div>'.
                        '<div class="context">'.
                            '<div class="sub_title">'.$end["cat"]."</div>
                            <h2 class='$paidQuestionSubjectCls'>".$end["subject"].'</h2>'.
                            "<h4>".strip_tags($end["body_html"])."</h4>".
                        '</div>'.
                    "</a>".
                "</li>";

Which will be generated like this:

一切都很好。所有内容都包含在a标记中。

现在我需要将此行添加到上面的代码中：

<a class="tag" href="somethin">برچسب1</a>

以下是生成的代码：

$data['full'] .= "<li>".
                    "<a href='/myweb/qanda/".$end["id"]."/".$end["subject"]."'>".
                        '<div class="tools">
                            <div class="numb">'.$end["total_votes"].
                                '<div class="vote_text">رای</div>
                            </div>
                            <div class="numb_viewed">'.$end["total_viewed"].
                                '<div class="viewed_text">بازدید</div>
                            </div>
                        </div>'.
                        '<div class="context">'.
                            '<div class="sub_title">'.$end["cat"]."</div>
                            <h2 class='$paidQuestionSubjectCls'>".$end["subject"].'</h2>'.
                            "<h4>".strip_tags($end["body_html"])."</h4>".
                            '<a class="tag" href="somethin">برچسب1</a>'. // this is added
                        '</div>'.
                    "</a>".
                "</li>";

但令人惊讶的是它会生成错误：

请参阅？ div.context元素已跳出a标记。如何将所有内容保留在a内？

Answer 1

因为你的锚中有一个锚点：

<a href="#first">first <a href="#second">second</a></a>
 ^------------- that one closes here ------------^   ^
                        ^-------- this closes here --^

对于锚点/内联元素，它不像div中的div。值得注意的是，如果遇到类似的问题，95％的情况都会出现这种问题。