DIVs vs. Tables
Down for Maintenance
Custom Error Pages
Escaping query strings
Google App testing
Avoid AS Statics
In the past a list of items, presented horizontally were often done without CSS style. They Just | Be | Like | This.
That is a nice easy approach, but using the HTML and CSS method of horizontal lists, you get the advantage of assigning actual meaning to the list such that the web knows it really is a list. HTML is semantic. Search engines, because of HTML list codes, will know you are showing a list. This can lead to better understanding by search engines.
So here we show the code for make a bulleted horizontal list.
- • list item 1
- • item 2
- • 3rd item
- • item 4
And here is the code:
<li style='display: inline;'>• list item 1</li>
<li style='display: inline;'>• item 2</li>
<li style='display: inline;'>• 3rd item</li>
<li style='display: inline;'>• item 4</li>
See how the 'inline' value for 'display' is the key to making the list horizontal. Unfortunately this removes the default bullet marker so we have to provide our own. I use the entity for a basic bullet.
To re-iterate, the purpose of using HTML/CSS to specify the horizontal list is so that the web knows it is a list. This is beneficial for searching, indexing, formatting, and any other reason meaning and context might be applied to your document.
Did you find this article userful for your website?
If so, why not provide a link to it? Just copy the following to your web page: