<div data-role="page">
    <div data-role="header" data-position="fixed" data-id="foo">
        <h1>Navigation Application</h1>
    </div><!-- /header -->

    <div data-role="content">
        <ul data-role="listview">
            <li data-role="list-divider">A</li>
            <li><a href="index.html">Adam Lambert</a></li>
            <li><a href="index.html">Adele</a></li>
            <li><a href="index.html">Amy Winehouse</a></li>

            <li data-role="list-divider">B</li>
            <li><a href="index.html">Beyonce</a></li>

            <li data-role="list-divider">C</li>
            <li><a href="index.html">Chris Brown</a></li>

            <li data-role="list-divider">D</li>
            <li><a href="index.html">David Guetta</a></li>
            <li><a href="index.html">Drake</a></li>

            <li data-role="list-divider">E</li>
            <li><a href="index.html">Ed Sheeran</a></li>
            <li><a href="index.html">Eric Benet</a></li>

            <li data-role="list-divider">F</li>
            <li><a href="index.html">Far East Movement</a></li>

            <li data-role="list-divider">H</li>
            <li><a href="index.html">Hope</a></li>
            <li><a href="index.html">Hot Chelle Rae</a></li>
        </ul>
    </div><!-- /content -->

    <div data-role="footer" data-id="foo1">
        <div data-role="controlgroup" data-type="horizontal">
            <a data-role="button" href="index.html">Playlist</a>
            <a data-role="button" href="section1.html">Music</a>
            <a data-role="button" href="section2.html">Artist</a>
        </div><!-- /navbar -->
    </div><!-- /footer -->
</div><!-- /page -->