Semantic HTML and Calendars
Written on February 28th, 2007 by .
I'm currently working for a fairly large "travel" company. It seems like most of the projects I've worked on since starting there have required some sort of calendar functionality to display ticket price, hotel availability, etc. I'm a strong proponent for using semantic markup (as I hope all of our web developers are) and have been wondering - how do you semantically represent a calendar using HTML and CSS?
I've come across a few different representations within my company's sites. Some used tables to display the calendars, others used lists of unordered lists (a list of weeks in the month - where each week element contained a list of days in that week), and I've created a calendar using a single ordered list.
Using an ordered list to represent a calendar
My original thinking was no...a calendar is not tabular data, it's just a list of days in a month!
I came up with a great way to style the ordered list - specifying a width for the "calendar container" and a width for each day li element, then floating all of the lis left but specifiying an offset for the first day of the month. This worked great - the days just floated next to each other and automatically "jumped" to the next line/week after they reached the edge of the container (Saturday). It did, however, require a few not so pretty css additions (see: not hacks) for IE6 because it doesn't support the :first-child pseudo-element or id and class selectors.
The benefits of using the ordered-list were:
- At the time, it seemed to make sense semantically.
- The calendar was to be used in an AJAX application and used very little markup.
- There's the possibility to style the calendar to display the digits in the list (
list-style-type) as the days of the month.
Semantics vs. Accessibility.
So I had light-weight, clean markup and it seemed fairly semantic. But after building it out, I realized that it wasn't very accessible. Would a vision-impaired user be able to view the page? Could the information in my calendar be conveyed using a screen reader? I doubt it. There was no semantic link between the "day-of-the-week headers", the month name, or the days. The only clues that you were looking at a calendar came from the (amazing :)) CSS I had created. Granted, all of the calendar information was grouped together within the same div, so I guess one could argue that they were related information because they were grouped together.
Using tables, you could use the caption to display the current month the calendar is displaying, and then relate the day headers (th!!!) to the actual days in the table cells using the headers attribute of each cell. This will make your calendar accessible.
Microformats and Exporting Calendar Information
I've tried reading about and understanding the benefits of microformats, but didn't really grasp the big picture until today after reading Roger Costello's Tutorials. Besides contributing to the growth of a "semantic web," one of the immediate benefits of supporting microformats is the easy export of our calendar information. Rather than creating a separate xml or iCal feed for each calendar, any calendar coded using the hCalendar microformat could easily be exported into vCalendar or the iCalendar format. (There are links to examples within Roger's tutorials as to how this is done, but I can't seem to find them at the moment.)
Personal Reflections
After reading the microformats tutorials, I'm pretty excited. They sound like a great idea to link information between websites and create a (somewhat) semantic web. While it doesn't sound the catch-all solution, it definitely appears to be a step in the right direction.
From a "web-standards" standpoint, I'm leaning more towards using tables to display calendar information, but I think the correct elements depend upon the situation. Suppose, for instance, that you are creating an international calendar widget. In the US, the calendar week begins on a Sunday, but in France, it begins on a Monday. Should you rely on javascript or a server side scripting language to display the calendar in the correct format when it can be done using some creative markup and CSS? What if you don't have access to a server side scripting language?
Each option needs to be evaluated on the purpose of the calendar. Does it need to be accessible? Does the weight of the markup really matter that much? All of these answers will vary on a cas-by-case basis and hopefully will lead to the best choice. But never just use divs and spans!
Where do others stand on this?
Anybody who has ever done work involving time sensitve data must have encountered this situation. And I feel like that is pretty much any web developer. What did you do? Why did you choose the HTML elements you did? How did you style them to convey that the user was looking at a calendar? (If you just read those three questions, I expect a comment below!!!)
Comments
Post new comment