Alphabetical list with letter headings

HTML

<!--<ul>
    <li>
        <h1>A</h1>
        <ul>
            <li>Addd</li>
            <li>Allo</li>
            <li>Arrr</li>
        </ul>
    </li>
    <li>
        <h1>B</h1>
        <ul>
            <li>Bob</li>
            <li>Bag</li>
            <li>Bin</li>
        </ul>
    </li>     
</ul>-->
<ul id="letters">
    
</ul>

CSS

ul h1{font-weight:bold;}
body ul ul {padding-left: 20px; list-style-type: bullet;}

JavaScript

var letters = document.getElementById('letters');
var names = ['Addd', 'Allo', 'Arrr', 'Bob', 'Car', 'Cool', 'Dog', 'Great', 'Hello', 'Hi'];
var arr = "";

for(var i=0; i<names.length; i++) {
    arr += '<li>' +names[i]+ '</li>';
}
letters.innerHTML = arr;