CODEWITHSUNDEEP
htmlsemantic-markup
nickcoxdotme
nickcoxdotme

Reputation: 6697

Most semantic markup for a calendar: list of times, day container, and events

I'm writing some markup for a calendar (think Google Calendar or Apple's Calendar web app). Google's markup is a large table. Simplified, it's like this:

<table>
  <tr>(Entire Calendar week)
    <td>(times)</td>
    <td>Monday</td>
    ...
    <td>Friday</td>
  </tr>
</table>

In Apple's Calendar, pretty much every element on the page is just a <div>, which strikes me as less-than-semantic.

In my project, it's a one-day calendar. I just have a list of times on the left, marking each half hour from 9am to 9pm, and on the right, just the day with events in it. For now, I've just made the list of times a <table>, the day a <section>, and the events <div>s.

I'm not totally happy with the semantics of my approach, and Google's seems okay, except it's weird to me that it's a table with just a single row; if I were marking up a veritable table without dynamic events and the like (like the schedule of your classes you'd get in high school), each column would represent a day, and each row would represent a time division, like an hour.

But of course that complicates dynamic events that need to be positioned absolutely against their parent based on their time, and they likely won't fit in a table row perfectly.

So the question is, what's the most semantic markup for a one-day calendar with a list of times on the left and a day on the right? Extra points for linking to a spec, or at least a reputable blog post (of which I've been able to find none on the topic).

Upvotes: 1

Views: 1244

Answers (1)

albert
albert

Reputation: 8153

first of make the td for times a th. not sure where you are placing the section or div, but if you have more than one event in a day, like your times, you should use an ordered list. after that, each event should be marked up proper with microformats....at the very least an hcalendar (hevent), but you can double up your semantics by adding extra microformats where possible; so like, use hcard as much as possible too, etc.

really....no reputable blog posts? not one?
https://www.google.com/search?q=microformats+calendar&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a&channel=fflb#channel=fflb&q=calendar+semantic+markup&rls=org.mozilla:en-US:official

i don't think you tried. here's some:
https://developer.mozilla.org/en-US/docs/The_hCalendar_microformat
https://support.google.com/webmasters/answer/164506?hl=en
http://html5doctor.com/microformats/

Pro Tip: make sure the data can be exported to google calendar, and apple calendar. so do some ua sniff sniffs and convert the events to the proper formats. ;)

Upvotes: 0

Related Questions