How to write a link with complex content inside it so that it will be valid and correct
-
21-04-2021 - |
Question
w3 html validator will tell me that this is wrong:
<a href="http://www.bla.com>
<div>something</div>
<ul>
<li>first</li>
<li>second</li>
</ul>
</a>
in order to get a validated as HTML 4 strict (or just for writing things correctly)
What is the better way to write it:
no div's and ul's - just span's with classes that I need to design:
<a href="http://www.bla.com>
<span class="div">something</span> <span class="ul"> <span class="li">first</span> <span class="li">second</span> </span> </a>
without
<a>
<div id="actAsLink" onclick="javascript:window.open('http://www.bla.com')>
<div>something</div>
<ul>
<li>first</li>
<li>second</li>
</ul>
</div>
=========================
sorry that the code doesn't look at its best - I had troubles handling the "code sampler" on this website.
Solution
I vote for option 1: Anchor + descriptive class names:
- The link will work, even when JavaScript or pop-ups are disabled. (this is the most important feature to me.)
- The class attributes describe their role, as a substitute for the
<ul>
,<li>
elements. These elements can be styled using CSS.
Your structure looks a bit odd though: Why do you want to nest a list in an anchor?
OTHER TIPS
Really you should have <a>
tags inside each of the div
, ul
and li
tags:
<div><a href="#"></a></div>
<ul>
<li><a href="#">first</a></li>
<li><a href="#">second</a></li>
</ul>
This is valid markup, but obviously with the downside that you have three links instead of one. I'm not sure why you want to have a list inside a link though - it's more common to see a list of links.