html for a simple musical keyboard

keyboard.html

<style>
    #keyboard {
        height: 300px;
    }
    .key {
        float: left;
        height: 320px;
        width: 100px;
        border: 1px solid black;
        display: block;
    }

    .sharp {
        background: black;
        height: 200px;
        width: 60px;
        margin-left: -31px;
        margin-right: -31px;
    }

    #audio {
        display: none;
    }
</style>

<script>
    function playNote(note) {
        document.getElementById('note'+note).play();
    }
</script>

<div id="keyboard">
    <a class="key" onclick="playNote('C')"></a>
    <a class="key sharp" onclick="playNote('Csh')"></a>
    <a class="key" onclick="playNote('D')"></a>
    <a class="key sharp"></a>
    <a class="key"></a>
    <a class="key"></a>
    <a class="key sharp"></a>
    <a class="key"></a>
    <a class="key sharp"></a>
    <a class="key"></a>
    <a class="key sharp"></a>
    <a class="key"></a>
</div>
<div id="audio">
    <audio id="noteC">...</audio>
    <audio id="noteCsh">...</audio>
    <audio id="noteD">...</audio>

</div>