How do I wrap an a tag around a div tag?

Question

I'm modifying a WordPress theme and I have this piece of code:

// Product link
$product_link_atts = ' href="' . esc_url( get_permalink() ) . '"';

<a<?php echo $product_link_atts; ?>><!-- Begin my a tag -->
    <div class="nm-shop-loop-details">
        <?php if ( $nm_globals['wishlist_enabled'] ) : ?>
        <div class="nm-shop-loop-wishlist-button"><?php nm_wishlist_button(); ?></div>
        <?php endif; ?>

        <h3><a<?php echo $product_link_atts; ?>><?php the_title(); ?></a></h3>
        <?php 
            /**
             * Hook: woocommerce_shop_loop_item_title.
             */
            do_action( 'woocommerce_shop_loop_item_title' );
        ?>

        <div class="nm-shop-loop-after-title <?php echo esc_attr( $nm_theme_options['product_action_link'] ); ?>">
            <div class="nm-shop-loop-price">
                <?php
                    /**
                     * Hook: woocommerce_after_shop_loop_item_title.
                     *
                     * @hooked woocommerce_template_loop_price - 10
                     */
                    do_action( 'woocommerce_after_shop_loop_item_title' );
                ?>
            </div>

            <div class="nm-shop-loop-actions">
                <?php
                    if ( $quickview_enabled ) {
                        echo apply_filters( 'nm_product_quickview_link', '<a' . $quickview_link_atts . '>' . esc_html__( 'Show more', 'nm-framework' ) . '</a>' );
                    }

                    /**
                     * Hook: woocommerce_after_shop_loop_item.
                     *
                     * @hooked woocommerce_template_loop_add_to_cart - 10
                     */
                    do_action( 'woocommerce_after_shop_loop_item' );
                ?>
            </div>
        </div>
    </div>
</a><!-- Close my a tag -->

I'm trying to wrap an a tag around this piece of code (starts line 4).

<a<?php echo $product_link_atts; ?>><!-- Begin my a tag -->

But somehow the a tag is broken when it's compiled.

This is how it looks like when inspected via Chrome:

As you can see the a element is being closed before it wraps itself around the div. I've done some research and I read that since HTML5 it's possible to wrap a elements around div elements.

I'm not really sure what I'm missing here, am I just missing something stupid, or am I actually trying to do something that doesn't work.

Answer 1

HTML forbids nesting anchor tags inside other anchor tags.

This is why you won't be able to do it and this is why it closes itself before it happens.

Why are nested anchor tags illegal?

Answer 2

We need to see the output of some of the php values there to get a better idea of what html really looks like. If you could take a screenshot of the sourcecode (ctrl+U) it would be more helpful than what was interpreted by chrome.

However, I've noticed you have an anchor element inside another one.

Avoid doing this.

https://www.w3.org/TR/2011/WD-html5-20110525/text-level-semantics.html#the-a-element