How to maintain the HTML semantics when HTML is used for drawing diagrams (like organizational chart)

Question

I have created an organizational chart using ASP.NET on web page. The web page is using strict DOCTYPE and following W3C standards.

The chart has a hierarchical layout decided by the manager field in the table that contains employees in the organization.

The chart layout has nodes with employee image and other details like job title, department and contact details. Nodes are beautifully arranged and connected by lines (only horizontal or vertical or both).

A lot of DIV elements are used (to avoid table) for connecting lines and arranging the chart properly. As suggested by my friend, using DIVs for connecting lines in the chart is semantically wrong. Also, a lot of DIVs are used to arrange the chart.

Is there a way by which I can make it semantically correct? Or, am I using HTML for the wrong purpose?

Answer 1

It looks like you're using HTML for something you shouldn't. Having said that,DIVs are supposed to be for division (sections) of the document. If each node is conceptually a unit, then a DIV is probably appropriate. If the nodes are not a unit, you may want to use a SPAN instead.