admin管理员组文章数量:1026989
I have a div where if you click anywhere on the div it opens another webpage. So essentially the whole div is a giant hyperlink. Because of this, I have a div, then inside that I have an a element then inside that I have all the elements of the div(so some ul, some p etc.).
My Problem: When I try to validate my HTML in the w3 Markup validator, I get errors because I have an ul, p, etc. inside of an a element.
Actual Error:
document type does not allow element "p" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
How can I make my HTML valid & still keep my div as one big link?
<div id="rentalAnnc">
<a class="sidebarLink" href="facilitiesForHire.html">
<p>KAZCARE has a range of Education Facilities available for Lease & Hire at its Bowral location.</p>
<!--<p>Click here for more information.</p>-->
</a>
</div>
I have a div where if you click anywhere on the div it opens another webpage. So essentially the whole div is a giant hyperlink. Because of this, I have a div, then inside that I have an a element then inside that I have all the elements of the div(so some ul, some p etc.).
My Problem: When I try to validate my HTML in the w3 Markup validator, I get errors because I have an ul, p, etc. inside of an a element.
Actual Error:
document type does not allow element "p" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
How can I make my HTML valid & still keep my div as one big link?
<div id="rentalAnnc">
<a class="sidebarLink" href="facilitiesForHire.html">
<p>KAZCARE has a range of Education Facilities available for Lease & Hire at its Bowral location.</p>
<!--<p>Click here for more information.</p>-->
</a>
</div>
5 Answers
Reset to default 3You can only include block level content inside an anchor in HTML 5. You can't in any non-draft version. If you want it to conform* to a specification, switch to HTML 5.
Note that doing so causes problems.
* Let's not talk about the <ins> hack which lets you do it in a valid but non-conformant way as DTDs aren't expressive enough to forbid it but the text of the spec is
If possible add an onclick attribute to the div instead of using an a tag.
E.g.:
<div id="rentalAnnc" onclick="window.location.href='facilitiesForHire.html'" style="cursor: pointer">
<p>KAZCARE has a range of Education Facilities available for Lease & Hire at its Bowral location.</p>
<!--<p>Click here for more information.</p>-->
</div>
In anchors all you can have are other inline elements. Check out W3C documentation:
http://www.w3/TR/html401/struct/links.html#h-12.2
This kind of link can only be validated using HTML5, as “Quentin” says in his reply. To do this, change the definition of your document (the very first line of your HTML) to:
<!DOCTYPE html>
Doing this, your HTML will be now HTML5 (magic!), and block elements as [h1] and [p] will be allowed inside a href tags, sticking to standards:
<a href=”Destination.html”>
<h3>Cool link</h3>
<p>The coolest link in the world.</p>
</a>
There’s a problem with this, of course, because you would probably have a previous document definition like the the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-strict.dtd">
Changing the doc type from “strict” to “Transitional” or HTML5 can make the browser to render the elements slightly different (specially if they are in quircks mode), so you should check again how the page is rendered with the new doctype.
I hate that HTML doesn’t allows to do this since HTML5, because if the semantic of your HTML needs to have a header and a parragraf as a link, the standard should allows you to do.
Anyway, take care of thinking in how this “block levels inside anchor” will affect accessibility, as very long content inside a link can be an issue for blind people using screen readers.
Now, provide a nice css styling for your anchor with block elements inside and enjoy it! :)
You can set display to block for <a> element and use it instead of <div>.
So if you have something like:
<a href="#"><div style="width: 100px; height: 100px; background-image: url('xyz.png');"></div></a>
Use instead:
<a href="#" style="display: block; width: 100px; height: 100px; background-image: url('xyz.png');"></a>
I have a div where if you click anywhere on the div it opens another webpage. So essentially the whole div is a giant hyperlink. Because of this, I have a div, then inside that I have an a element then inside that I have all the elements of the div(so some ul, some p etc.).
My Problem: When I try to validate my HTML in the w3 Markup validator, I get errors because I have an ul, p, etc. inside of an a element.
Actual Error:
document type does not allow element "p" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
How can I make my HTML valid & still keep my div as one big link?
<div id="rentalAnnc">
<a class="sidebarLink" href="facilitiesForHire.html">
<p>KAZCARE has a range of Education Facilities available for Lease & Hire at its Bowral location.</p>
<!--<p>Click here for more information.</p>-->
</a>
</div>
I have a div where if you click anywhere on the div it opens another webpage. So essentially the whole div is a giant hyperlink. Because of this, I have a div, then inside that I have an a element then inside that I have all the elements of the div(so some ul, some p etc.).
My Problem: When I try to validate my HTML in the w3 Markup validator, I get errors because I have an ul, p, etc. inside of an a element.
Actual Error:
document type does not allow element "p" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
How can I make my HTML valid & still keep my div as one big link?
<div id="rentalAnnc">
<a class="sidebarLink" href="facilitiesForHire.html">
<p>KAZCARE has a range of Education Facilities available for Lease & Hire at its Bowral location.</p>
<!--<p>Click here for more information.</p>-->
</a>
</div>
5 Answers
Reset to default 3You can only include block level content inside an anchor in HTML 5. You can't in any non-draft version. If you want it to conform* to a specification, switch to HTML 5.
Note that doing so causes problems.
* Let's not talk about the <ins> hack which lets you do it in a valid but non-conformant way as DTDs aren't expressive enough to forbid it but the text of the spec is
If possible add an onclick attribute to the div instead of using an a tag.
E.g.:
<div id="rentalAnnc" onclick="window.location.href='facilitiesForHire.html'" style="cursor: pointer">
<p>KAZCARE has a range of Education Facilities available for Lease & Hire at its Bowral location.</p>
<!--<p>Click here for more information.</p>-->
</div>
In anchors all you can have are other inline elements. Check out W3C documentation:
http://www.w3/TR/html401/struct/links.html#h-12.2
This kind of link can only be validated using HTML5, as “Quentin” says in his reply. To do this, change the definition of your document (the very first line of your HTML) to:
<!DOCTYPE html>
Doing this, your HTML will be now HTML5 (magic!), and block elements as [h1] and [p] will be allowed inside a href tags, sticking to standards:
<a href=”Destination.html”>
<h3>Cool link</h3>
<p>The coolest link in the world.</p>
</a>
There’s a problem with this, of course, because you would probably have a previous document definition like the the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-strict.dtd">
Changing the doc type from “strict” to “Transitional” or HTML5 can make the browser to render the elements slightly different (specially if they are in quircks mode), so you should check again how the page is rendered with the new doctype.
I hate that HTML doesn’t allows to do this since HTML5, because if the semantic of your HTML needs to have a header and a parragraf as a link, the standard should allows you to do.
Anyway, take care of thinking in how this “block levels inside anchor” will affect accessibility, as very long content inside a link can be an issue for blind people using screen readers.
Now, provide a nice css styling for your anchor with block elements inside and enjoy it! :)
You can set display to block for <a> element and use it instead of <div>.
So if you have something like:
<a href="#"><div style="width: 100px; height: 100px; background-image: url('xyz.png');"></div></a>
Use instead:
<a href="#" style="display: block; width: 100px; height: 100px; background-image: url('xyz.png');"></a>
本文标签： javascriptValid HTML ulPdiv inside 39a39 elementStack Overflow
版权声明：本文标题：javascript - Valid HTML: ul, p, div inside 'a' element - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745074593a2133037.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论