Geek Answers Handbook

Best practice for defining a large, complex HTML structure as links?

Consider the following HTML:

<ul>
    <li>
        <h2>Item 1</h2>
        <p class="subline">Meta information bla bla</p>
        <div class="description">
            <p>Paragraph one</p>
            <p>Paragraph two</p>
        </div>
    </li>
    <!-- More ... -->
</ul>

I want to link each of liwith a link. As a proof of concept, I give you this invalid code:

<ul>
    <li>
        <a href="http://www.google.com/search?q=test+1">
            <h2>Item 1</h2>
            <p class="subline">Meta information bla bla</p>
            <div class="description">
                <p>Paragraph one</p>
                <p>Paragraph two</p>
            </div>
        </a>
    </li>
    <!-- More ... -->
</ul>

Obviously, this will not be checked because I cannot have block-level elements inside inline elements.

EDIT: As it turned out, the above code is valid in HTML5. The problem is resolved.

I need to find another solution:

Insert a tag ain each block level item

I considered adding identical tags h2 > a, p.subline > aand div > p > a, but I would like to have a hang state using :hoverthat affects the entire link area, so this will not work.

Using the onclick event

Javascript (li.onclick = function() { window.location.href = ...), . , Javascript , , .

inline:

<ul>
    <li>
        <a href="http://www.google.com/search?q=test+1">
            <span class="title">Item 1</span>
            <span class="subline">Meta information bla bla</span>
            <span class="description">
                <span>Paragraph one</span>
                <span>Paragraph two</span>
            </span>
        </a>
    </li>
    <!-- More ... -->
</ul>

, display: block , .

HTML, .

- , ?

+5
4

HTML5:

http://davidwalsh.name/html5-elements-links

HTML5 HTML, XHTML. , , . , DIV, H- P A. : A.

. , , .

+4

. , . , .

-, , (!) . !... , .

http://jsfiddle.net/peteorpeter/J4sT9/

, , . , . , .

, , , , :

  • ,
  • -,
  • JS <li>
  • JS ( CSS 2+) <li>

:

<ul>
    <li>
        <h2>Item 1</h2>
        <p class="subline">Meta information bla bla</p>
        <div class="description">
            <p>Paragraph one</p>
            <p>Paragraph two</p>
        </div>
        <a class="link-for-no-JS" href="buystuff">Item 1</a>
    </li>
    <!-- More ... -->
</ul>

, . ( , ); .

+3

, , li Javascript. , , JS , . , . , HTML. .

// psuedocode
on document ready {
   els = getElementsByClassName("mylinks")
   for el in els {
      li = el.parentNode.parentNode;
      li.onclick = function() {window.location = el.href}
      li.className = "liHover";
   }
}
+1

There is another hack that can work depending on the situation. Pull an element afrom the natural rendering stream with position: absoluteand make its height and width large enough to cover the area in question. A high value z-indexmay also come in handy. This is a hack, though.

0
source

More articles:


All Articles