<div data-role="page" id="foo" data-theme="$${JQMTheme|'c'}">
    <div data-role="header" data-position="fixed" data-theme="$${JQMTheme|'a'}">
        <h1>Navigation Application</h1>
    </div><!-- /header -->

    <div data-role="content" data-theme="$${JQMTheme|'c'}">
        <ul data-role="listview" data-dividertheme="$${JQMTheme|'b'}" style="margin-top: 0;">
                    <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="fool" data-position="fixed" data-theme="$${JQMTheme|'a'}">
        <div data-role="navbar">
            <ul>
                <li><a href="index.html" >Play List</a></li>
                <li><a href="section1.html">Music</a></li>
                <li><a href="section2.html" class="ui-btn-active">Artist</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->
</div><!-- /page -->