How to dynamically append li to ul?

What purpose does this particular ul list serve? The links themselves don't show on the page

• <li><a title="RSS" href="http://fblog.futurebrand.com/feed/rss" class="rss"></a></li>             <li><a title="Twitter" href="https://twitter.com/FutureBrand" target="_blank" class="twitter"></a></li>             <li><a title="Facebook" href="https://www.facebook.com/FutureBrand" target="_blank" class="facebook"></a></li>             <li><a title="LinkedIn" href="http://uk.linkedin.com/company/futurebrand" target="_blank" class="linkedin"></a></li>             <li><a title="Flickr" href="http://www.flickr.com/photos/42417209@N03" target="_blank" class="flickr"></a></li>             <li><a title="YouTube" href="http://www.youtube.com/futurebrand" target="_blank" class="youtube"></a></li>

• Answer:

  The bottom line is, this is bad coding practice. Most likely the person creating this is adding a background images in these links via css. For example a{ background-image: url( ... ) ...} But you should always have some text inside the anchor elements and replace it using css. ------------   just as a good practice example ----------- So the reason why you see nothing is because there is nothing inside the elements. To see something, you need to add something <li><a title="RSS" href="Page on futurebrand.com..." class="rss">EXAMPLE OUTPUT (CLICK ME)</a></li> Then there are two ways to replace that text with an image, to get the illusion that there isn't any content in side it. a{ background: url("myimage") 0 0 no-repeat; text-indent: -9999px; // with this - just move it way off screen } or the new way (which is better) a{ text-indent: 100%; white-space: nowrap; overflow: hidden; background: url("myimage") 0 0 no-repeat; } Use the new way is much better. This is what it does the content is moved 100% off the container, the content is not allowed to wrap (so it's one long line of text then anything outside the container (which is the content we indented) is hidden. Giving you the same effect as having nothing! There are people with different accessibility needs which as a result they don't use css in their browsers (ie screen readers) as a result they wouldn't get the background-image therefore that's the main reason why your code above (without any content within the anchor) is bad coding