<a> 标签的奇怪关闭[重复]答案

【问题标题】：Strange closing of <a> tag [duplicate]<a> 标签的奇怪关闭[重复]
【发布时间】：2018-12-15 17:44:39
【问题描述】：

        <a href="<?php echo $url_werkwijze['url']; ?>" modal="modal_werkwijze_1" id="werkwijze_1" class="one-half first proces">
        <div class="title">
            <?php echo 'het proces'; ?>
        </div>
        <div class="proceslijn">
            <img class="line" src="<?php echo $background_iconen['url']; ?>"/>
            <?php
            if( have_rows('icons') ){
                $k = 1;
                // loop through the rows of data
                while ( have_rows('icons') ) {
                the_row();
                $icon_afbeelding = get_sub_field('icon');   
                $icon_title = get_sub_field('title');
                $url_icon = get_sub_field('url_icon');  
                ?>
                <a href="<?php echo $url_icon['url']; ?>" class="icons" id="icon_<?php echo $k++; ?>">

                    <img src="<?php echo $icon_afbeelding['url']; ?>"/>

                    <span><?php echo $icon_title; ?></span>
                </a>    

                <?php
                }
            }
            ?>
         </div>

    </a>

但不知何故，它会在浏览器中生成此代码：

<a href="https://somewebsite.nl/werkwijze-stappen/#het-proces" modal="modal_werkwijze_1" id="werkwijze_1" class="one-half first proces" style="width: 50%;">
        <div class="title" style="top: 30vh;">
            het proces          </div>
        </a>
<div class="proceslijn"><a href="https://somewebsite.nl/werkwijze-stappen/#het-proces" modal="modal_werkwijze_1" id="werkwijze_1" class="one-half first proces" style="width: 50%;">
            <img class="line" src="https://somewebsite.nl/wp-content/uploads/2018/05/lijn_proces.png">
                                </a><a href="https://somewebsite.nl/werkwijze-stappen/#luisteren" class="icons" id="icon_1">

                    <img src="https://somewebsite.nl/wp-content/uploads/2018/05/luisteren.png">

                    <span>...Luisteren</span>
                </a>    

                                    <a href="https://somewebsite.nl/werkwijze-stappen/#denken" class="icons" id="icon_2">

                    <img src="https://somewebsite.nl/wp-content/uploads/2018/05/denken.png">

                    <span>...Denken</span>
                </a>    

                                    <a href="https://somewebsite.nl/werkwijze-stappen/#doen" class="icons" id="icon_3">

                    <img src="https://somewebsite.nl/wp-content/uploads/2018/05/doen.png">

                    <span>...Doen</span>
                </a>    

        </div>

奇怪的是它在 div class="title" 之后生成了一个标签。

它变得更加陌生，因为当我将父标签替换为 div 时。生成的代码符合预期。大家有什么解决办法吗？

【问题讨论】：

我怀疑您生成的 HTML 无效，浏览器正在向您显示正确的解释。如果我没看错，您的代码最终会在另一个链接中嵌套一个链接。
这是发送到浏览器时的源代码，还是您在嵌入元素时在 DOM 中看到的结果？

标签： php html

【解决方案1】：

出现这种奇怪的行为是因为你的代码中有嵌套的锚点，这是不允许的（你可以找到解释in this post）

以不同方式重构您的 html 代码以避免嵌套锚点。

【讨论】：

第一部分是正确的，但第二部分是错误的。 a 元素不能有任何 interactive content 作为后代元素，这是用户可以与之交互的任何元素，例如 button、input、a、audio、label、...（此在您链接的问题的答案之一中也提到了）
哦，是的，我的错 - 已更正
谢谢！我仍然需要嵌套链接，所以我现在用 jquery 解决了它。