jQuery plugin usage: href or data-url

Question

I am creating a jQuery that will transform some li to folder tiles.

I can't decide which one is better for the plugin usage:

url in href

<ul id="folders">
    <li><a href="http://ggg.net/content/?folder=hospital">Hospital Folder</a></li>
    <li><a href="http://ggg.net/content/?folder=school">School Folder</a></li>
    <li><a href="http://ggg.net/content/?folder=house">House Folder</a></li>
</ul>

or

url in data-url

<ul id="folders">
    <li data-url="http://ggg.com/content/?folder=hospital">Hospital Folder</li>
    <li data-url="http://ggg.com/content/?folder=school">School Folder</li>
    <li data-url="http://ggg.com/content/?folder=house">House Folder</li>
</ul>

the output HTML after the plugin kicked:

<div id="folders">
    <div class="row">
        <div class="col-md-3 folder">
            <a href="http://ggg.com/content/?folder=hospital">
                <i class="fa fa-folder"></i>
                <p>Hospital Folder</p>
            </a>
        </div>
        <div class="col-md-3 folder">
            <a href="http://ggg.com/content/?folder=school">
                <i class="fa fa-folder"></i>
                <p>School Folder</p>
            </a>
        </div>
        <div class="col-md-3 folder">
            <a href="http://ggg.com/content/?folder=house">
                <i class="fa fa-folder"></i>
                <p>House Folder</p>
            </a>
        </div>
    </div>
</div>

Answer 1

When the JavaScript doesn't run, which one is better? The links which work as links or the data attributes which do nothing?

Use the version with real links. Make your JavaScript unobtrusive. Use progressive enhacement.

---

For that matter, there doesn't seem to be any need to use JavaScript to transform the DOM at all. Just writing the HTML the way you want it to end up will avoid a flash as JavaScript rewrites it later.