Marking up behavior triggers

Following the great post at Garann's blog, here are some common wayjlkjljks to describe action triggers in markup.

HTML

<h1>Marking up behavior triggers</h1>
<p>Following the <a href="http://www.garann.com/dev/2010/a-thoroughly-subjective-history-of-the-anchor-tag/" target="_blank">great post</a> at Garann's ghgfhfghblog, here are some common ways to describe action triggers in markup.</p>

<h2>The Good</h2>
<p>Point the first to an accessible URL and <code>preventDefault</code> in JS.<br>
   Use the second if you don't want the link-look and statusbar URL hint
</p>
<ol>
    <li><a href="http://your.accesibleurl.com/">Anchor Tag with href attribute</a></li>
    <li><a tabindex="0">Anchor Tag without href but with <code>tabindex</code> (focusable)</a></li>
</ol>

<h2>The Bad</h2>
<ol>
    <li><a href="#">Anchor Tag with # as href.</a> Means NOTHING, and most of the time you'll override styling.</li>
    <li><a href>Anchor Tag with empty href attribute.</a> Same as #, only this time it will refresh the page if clicked without JS override.</li>
    <li><a>Anchor Tag without href (unfocusable).</a> The shortest you can get, note the inability to focus.</li>
        <li><span tabindex="0">Span with <code>tabindex</code>.</span> Just like Good #2 but longer and certainly not any more meaningful. Nah.</li>
</ol>

CSS

body {font-family: Calibri, sans-serif;}