6

Possible Duplicate:
Is putting a div inside an anchor ever correct?

When we write some kind of 'product list', you need only one link, but it should contain product image, product name, product title etc. can we use a contain p or some other tag? is there any cross browser issue?

I heard in html5, a tag can contain p tag, but still with no confidence about using it.

some code like so:

<ul class="xxx_list">  
<li class="hproduct">  
    <a href="#" class="url" title="" target="_blank">  
        <img class="photo" src="shoujike.jpg" alt="手机壳">  
        <p>  
            <span class="price_wrap">&yen;<span class="price">88.00</span</span>  
            <span class="fav">收藏</span>  
        </p>  
        <p><a class="fn" href="">基本商品单元的商品名称</a></p>  
    </a>  
</li>  
</ul>
Community
  • 1
  • 1
jiguang
  • 352
  • 1
  • 2
  • 7

2 Answers2

27

In HTML 4.x (and earlier) and XHTML 1.x — No. <a> elements may not contain <p> elements.

In HTML 5 — <a> elements may contain <p> elements, but browsers are a bit flaky about it and you may find you have to explicitly set the <a> to display: block in your stylesheet.

The code in the question also includes an <a> inside that <p>. This is not allowed. An <a> element may not be a descendant of another <a> element.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • It is weird and it shall be forbidden. html block element inside inline element. I can understand block inside inline-block but not inside inline... Then... `
    ` can be inside `` tag in html5?     – 18C Dec 21 '17 at 04:14
  • 2
    Don't confuse CSS display styles with the HTML 4 grouping of elements into "block" and "inline" (which no longer exists in HTML 5). – Quentin Dec 21 '17 at 08:51
  • I don't confuse it. I comment it due HTML4 definition of "inline and block" elements. The idea of HTML5 is backward compatibility with HTML4. In HTML4 is the `

    ` "inline" element to be able put it into ``?     – 18C Dec 21 '17 at 10:53
  • HTML 5 is backwards compatible in the sense that (almost) anything you can do in HTML 4 you can also do in HTML 5. The reverse is not true. – Quentin Dec 21 '17 at 10:54
  • Thus... the HTML5 site can be badly shown in old browsers... Part of old browsers badly interpret the "block" elements inside "inline" elements. "inline-block" I named here `` element. – 18C Dec 21 '17 at 10:58
5

Inside a tag can be tags with default display: inline or inline-block. tags like span, em, strong etc.

You can change your p to span with some class and write some styles in CSS for this class.

P.S.: You can't use a inside a.

UPDATE:

<ul class="xxx_list">  
    <li class="hproduct">  
        <a href="#" class="url" title="" target="_blank">  
            <img class="photo" src="shoujike.jpg" alt="手机壳">  
            <span class="some-class-name">  
                <span class="price_wrap">&yen;<span class="price">88.00</span</span>  
                <span class="fav">收藏</span>  
            </span>  
            <span class="fn">基本商品单元的商品名称</span>  
        </a>  
    </li>  
</ul>
Belyash
  • 752
  • 4
  • 18