End tag a violates nesting rules

I validated my code on W3 and to come this warning End tag a violates nesting rules.

How have my Html code

<div class="container-fluid">
    <div class="row">
       
         <div class="col"> 
             
          <div class="product-grid">
                <a class="link" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php"> 
                <div class="product-image">
                   
                    <img alt=""  class="bild" src="photo/111.jpg">     
                
                    </a> 
                </div>
                   
                <div class="product-content">
                     <a class="links" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php">   
                    <p class="title">
                      Mochila doble tirantes Violeta
                    </p>
                      </a>
                      
                </div>
                    <div class="price">$16.00</div>
            </div>
                   
         </div>
    </div>
</div>

Can please someone help me with this problem, Thanks!

you a div inside an anchor… you have a block element inside an in-line element

don’t put a div inside an anchor

Very thanks for your answer! Not Understand the word anchor

the a element name is anchor

Thanks! my problem is

<div class="product-content">
                     <a class="links" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php">   
                    <p class="title">
                      Mochila doble tirantes Violeta
                    </p>
                      </a>
               </div>

Can’t closse a when a div also open it is ?

still the same error?
you can’t put a paragraph inside an anchor either

why can’t you put the anchor inside something else?

Thanks Now to do it

<div class="container-fluid">
    <div class="row">
       
         <div class="col"> 
             
          <div class="product-grid">
                <a class="link" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php"></a> 
                <div class="product-image">
                   <a class="link" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php">
                    <img alt=""  class="bild" src="photo/111.jpg">     
                   </a> 
                   
                </div>
                   
                <div class="product-content">
                     <a class="links" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php">
                    <p class="title">
                      Mochila doble tirantes Violeta
                    </p>
                    </a>     
                      
                </div>
                    <div class="price">$16.00</div>
            </div>
                   
         </div>
      </div>
   </div>

validated my code on W3 and now not to come more this warning … :grinning:

but now some of your anchor tags are useless. put some text in there or they can’t be clicked

thanks for your patience…

put some text in there or they can’t be clicked

With Css I do it…

.product-grid .product-content{
    
     text-align: left;
     z-index: 2;
     background-color: white;
    
    
}


.product-grid .title{
     font-size: 16px;
     font-weight: 500;
      padding-top: 30px; 
    
}

a

When the mouse is up to the image and word Mochila doble tirantes Violeta the both links working gut…

umm I’m sorry, I don’t understand what you are asking

no no, i not asking… because you say to me

put some text in there or they can’t be clicked

I mine answer to say that with CSS solve this problem with links…

this anchor is empty, for accessibility, and just sense, you need to put something inside it if you want to use it. Or delete it.

1 Like

Thanks! I forget that had to write two time the anchor…
How to show now my code,

<div class="container-fluid">
    <div class="row">
       
         <div class="col"> 
             
          <div class="product-grid">
                
                <div class="product-image">
                   <a class="link" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php">
                    <img alt=""  class="bild" src="photo/111.jpg">     
                   </a> 
                   
                </div>
                   
                <div class="product-content">
                     <a class="links" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php">
                    <p class="title">
                      Mochila doble tirantes Violeta
                    </p>
                    </a>     
                      
                </div>
                    <div class="price">$16.00</div>
            </div>
                 
         </div>
     </div>
</div>

don’t put the paragraph inside the anchor. put the anchor inside the paragraph

Thanks I do it as you to say …