I have never used list before. I have created a website with over 30 000 LOC and never use a single list-element. But when I look at the source code of other say Twitter they use list all the time. What is the advantage of using list-elements? Most of the time I can achieve the same result with div-elements in terms of lay-out
Semantics. Items in a list are typically related by their meaning, not just their layout.
Chances are if you're using a table with one column you are using the table for layout, this is a good candidate to replace with a list
You should use lists when they are semantically the best choice. When you're creating some HTML, ask yourself the following question:
Am I making a list of things?
If your answer is yes, you want to use the list element, or if it's a list with two or more columns of related information, a table.
By comparison, a list of items created using divs has no meaning. Take the following example of a list:
Sausages
Bacon
Pork
Gammon
That is a list of pig meat products, and normally, your HTML should look like this:
<ol>
<li>Sausages</li>
<li>Bacon</li>
<li>Pork</li>
<li>Gammon</li>
</ol>
This tells us and the browser that all the items in that list are related. They all have a common attribute (in this case, that they are pig meats). If however you were to use this code:
<div>Sausages</div>
<div>Bacon</div>
<div>Pork</div>
<div>Gammon</div>
That tells us (and the browser) nothing about the content, only that they exist on the page. From a styling point of view (i.e. CSS), it doesn't make much difference, and may even make life easier, but it's (a) an abuse of the div element (see: Divitis), and (b) bad for accessibility, since screen readers and other similar software will not be aware that the data is related. Your search engine optimisation can also suffer (in theory).
Do bear in mind that it doesn't have to just be a list of text data, like above. A list of navigation links is still a list, and you should mark it up as such. For example:
<ul class="site-navigation">
<li>Home</li>
<li>About Us</li>
<li>Log in</li>
</ul>
It used mostly for creating menus, but the same results can be easily achieved with div elements.
It is more easy to control your menu if it's a simple list, and I think search engines also prefer them
I'm with Giles on this one, but wanted to expand a bit. A list of items holds semantic value. Anything you list in a page most likely belongs in a list. Examples are:
Products
Navigational menu items
Share links (e.g. Facebook, Twitter, LinkdIn, reddit, etc)
This list itself belongs in a list :)
Also, imagine a scenario in which styles are not applied or are applied differently (very common on mobile browsers, especially those not on newest/advanced smartphones), or if someone using Firefox goes into View -> Page Style and selects No Style to. You still want your page to make sense. If you're listing items on a page, you still want them to appear as some sort of list, not just a bunch of DIVs. DIVs have no semantic meaning except to organize things in separate containers and layout control.
Related
I have seen several tutorials explaining how to create a nav bar, and they all went ahead by first adding an unordered list, then removing the standard style of it and the list items (in particular the bullet points and the margins). Is there an advantage to using lists instead of just using a elements or span elements directly which don't have any style which needs to be removed?
You should always markup a page based on the purpose (or semantics) of the elements and then style for the appearance.
Alternative containers such as for example divs have no semantic meaning and can group any unrelated elements - they offer no clue to what the contents, how they are related and what purpose they might serve. Lists indicate an inherent relationship between the elements as more than just a random collection of items.
Logically (and even visually) a navigation menu is a list of links - whether they are displayed horizontally or vertically, they are still a list of related items. The default styling for a list is not always suitable for every type of list, but that doesn't mean that the list element isn't suitable.
Lists allow for hierarchy to be easily defined for sub-menus (and sub-sub-menus etc) - this is a huge advantage of using lists for navs. This is because of the inherent relationship, as well as the ability to have a list item that contains other full list.
It also allows for better accessibility, as keyboard navigation and screen readers an recognise this relationship more easily and offer much more effective navigation through the list.
I have a simple datatable with less than 100 rows. I've currently been displaying the data in a series of nested DIVs. Each row has a container div, with nested divs representing the columns of data within it. (This was in reaction from my earliest coding days when there wasn't anything like a div).
The first column of data is formatted as an image link, while the other two columns are text.
Does it make sense to return to using a table?
Also, as an experiment, I'd thought about using nests ULs. An UL to contain all the rows, and a separate horizontal UL for each row.
As a further note/question, I have another block of data that can result in thousands of rows. Would that amount of data result in a different answer for 'best practice' in this case?
Realistically, you can use any container you'd like. Best practice is to use the elements for what they were meant to be used for. If you are displaying tabular data, by all means use a table! There are great plugins to make the experience for the user better, and it's really easy to read and copy/paste.
The question that I always ask myself is if that data would be best shown in a Word or Excel file. If Excel, then it's a table. If Word, it's div's.
If you're using thousands of rows you'll probably want to give the user control on sorting, filtering, and pulling in more information to aid usability. I'd use a table with some jQuery plugins like tablesorter, hovertable and tableFilter to help make this easy.
In this case a table is fine. Tables are for displaying tabular data, like a row in the db. You should avoid using tables for page layout though....
As for having thousands of rows, you may want to look into pagination. I don't think there is a better "best practice"
Lists are for lists, tables are for tabular data, and divs are for layouts. So if you want to go the best practices route; I think you should be using a table here.
That being said; using divs as opposed to tables isn't all that bad. I wouldn't worry about rewriting if you're already using divs instead of a table. The one caveat being you're clearing your floated column divs. ex:
<div class="row">
<div class="column" style="float:left;"><!-- Some stuff --></div>
<div class="column" style="float:left;"><!-- Some stuff --></div>
<div class="column" style="float:left;"><!-- Some stuff --></div>
<div style="clear:both;"><!-- Leave empty --></div>
</div>
What you should avoid is the opposite (using tables where divs should be used).
Also, even though you may be able to get some kind of table structure using list elements, this is NOT the route you want to go. I've never done it before...to be honest out of the hundreds of examples I've looked at I don't think I've ever seen anyone use them for such a purpose. I guess the best reason here is why would you? Since I've never seen it before I don't have any examples handy which illustrate why you shouldn't do it. But to me this is akin to telling someone not to use a pipe to loosen a bolt when they have a wrench handy. I mean sure....maybe the pipe could get the job done but the wrench is right there...
If I need to show data in a table liked manner I mostly use the <table> element. You should think about user friendliness when showing a 1000 rows or more. The jqGrid plugin is good solution for that and has features like paging, sort, search, etc.
lists are for one dimension data.
tables are for more than one dimension data.
divs are to separate things or include something in others.
if each item of your data has a relation of owner to some others you should use table.
I have a list of newsletters like this:
Newsletter Jan
Newsletter Feb
Newsletter Mar
Newsletter May
I logically order them by date but the numeration does not really mean anything. So my question is what is semantically correct? to use <ol> or ul?
Thanks.
If they are listed in order, then <OL>. Although I don't think it is a huge deal either way.
From a UI perspective, there's no need to have a number and a date, it's just confusing. If you're going to be super anal about definitions though, I guess an appropriately styled ol would be better. But don't do that.
From a strictly semantic sense, any list of items that has an ordering to it (dates included) should be marked up as an <ol>, since the <ol> tag indicates it's contents are an ordered list.
That being said, I agree with #Dave that the numeric list indicators are unlikely to be needed (depending on the rest your design, of course), and could be hidden with CSS. Depending on the browsers you are targeting, adjusting the margin and/or padding will hide them.
The reason it matters is because non-visual browsers, such as screen readers or text-based browsers like Lynx can offer their users additional functionality for an ordered list than an unordered one. For example, it makes much more sense for a user to jump to the 8th item in an ordered list, since they are more likely to know what that item is based on ordering, than it does to jump to the 8th item in an unordered list. (ie. they can do a binary search on an ordered list, but not an unordered one)
I've noticed a variation of convention when it comes to using DIV tags instead of TABLE to separate/organize content on a web-page. In what situation is one more appropriate to use than the other?
Clarification: This question is both general, and specific in that I'm mainly looking for which would be more ideal for page layout.
As a rule of thumb — if every cell in a row has something in common, and every cell in a column has something in common, then you should use a table. If you don't have a thead with some th elements providing column headings, then there is a good chance you are doing something wrong. If you don't have multiple data rows and multiple data columns, then … ditto.
The choice is, however, not between a div and a table. Use the markup that has the semantics that best describes the content. There are plenty of elements in HTML: http://www.w3.org/TR/html4/index/elements.html
Use tables only with semantically tabular data. Is each row other than the header representing the same "type" of "thing"? Does each column header have below it a set of items that are described accurately by the column header? If yes to both, then use a table. Avoid tables for styling whenever possible.
Table should be used to display tabelaric data ( like in excel for example) When Div tag is a container and should be used to organize content.
You can drive a nail with a screwdriver but proper tool is a hammer.
Simple.
Use a table for tabular data.
Use a div to separate content.
IMHO, a table is for the display of tabular data and related things, not for general layout of a page itself.
Some do not hold this purist opinion, and so use tables for laying things out because they seem easy to use.
Use div when you want to make your page more syntactically correct, use less bandwidth, make changes easily,make sites more accessible and more search engine friendly. In all other cases use tables (well except when you want to show some tabular data). Here are more details.
What I see a lot (and my biggest pet peeve), is people using a single column table to separate page elements or lists. Like:
<table>
<tr><td>
List item 1
</td></tr>
<tr><td>
List item 2
</td></tr>
</table>
instead of using
<li>, <p> or <div> (if its more like content)
The moral, its fine to use table where thy make sense- tabular data, etc. Never for lists, blocks. People complain about using it for layout, but sometimes it just works so that is the only place I make an allowance for abusing tables.
i use table only to display database fields and records.
i mainly use div for page layout.
Probably the only scenario where I'd use a table for layout over a div (other than for tabular data) is when creating HTML for an email. Emails clients aren't great at displaying HTML properly, so often using tables is the only way to get pages to display consistently.
It makes me die a little every time I have to do it :(
It does concern me that people are suggesting that table should be used for anything except tabular data, even in IE6. I think the only legitimate use of tables for non tabular data is in html emails, it's not the correct usage but the rendering in email clients is so awful you have little choice.
Semantics on your HTML have always been important, but I think it is only going to get more so especially with the new HTML5 tags that are being proposed... I can see more confusion over the use of article and section
Well, as far as I know, a table is used to organize a group of objects into set places ... say three pictures side by side all separated by some text.
And a is a "section" of a webiste. This can include anything, even tables!
So I guess the answer to your question would be: if you need to set up an organized array of images, text, etc. you might want to use a table (like an excel spreadsheet), but if you simply want to divide your website into sections, use tags.
By the way, as of late, tables are being used less and less and there seems to be a tendency to using different CSS layout techniques instead of tables.
Good luck!
I am working on an django application that will return what historically was a table of information:
ISSUE DESCRIPTION INITIATOR INITIATEDDATE ASSIGNEE FORECASTDATE STATUS REMARKS
That will be the entrance point for users to sort / filter, etc the list of issues.
The columns like ISSUE, DATES, NAMES are of relatively fixed width, but others can be a paragraph or more.
What is the best way to render this in HTML? As HTML Tables, lists or with a lot of CSS spans/divs?
I eventually hope to make the issues list sortable or filterable with javascript as well.
The whole argument made by the CSS purists is that you need to keep your code semantically relevant to the information it contains. What you need to show is tabular data and you use the <table> tag to do that. The only "problem" with tables is when they are used to control the layout, like making your two column layout two <td>s as opposed to two <div>s. In this case, however, tables would be adequate.
If the information you're trying to display is tabular (as it appears to be), then go with tables.
Also, see these questions for even more debate!
Tables instead of DIVs
Why not use tables for layout in HTML?
As both answers say, tabular data should be displayed using a <table> tag.
To put it into perspective, when tables are used to do layout, that is an abuse of the table tag. When div tags are used to do tabular layout, that's abuse in the opposite direction. Don't use one to do the other's job.