Thursday, May 21, 2009

Hiragana tutor

An evening spent with Unicode charts, HTML, CSS, and JavaScript resulted in this:

The online Hiragana tutor

If you find any errors, please tell me.


megoth said...

A nice piece of work=)

You requested feedback, so here it is:

1. The span-tag aren't closed properly, it seems (you should have (span)(/span) instead of (span /)).

2. You've used the tbody-tag for the whole table. You should use tbody to encase the td-tags, while the thead should encase the th-tags.

3. The caption-tag is normally located right after the (table), but it seems that it's ok to have right before (/table) too (although it doesn't say so on

4. Although not wrong, you should strive for unobtrusive javascripting (

That's all I could find=)

Good luck on your exams;)

Vegard said...


1. About the span-tags, does that really matter? I tried the validator now, and it doesn't complain about it.

2. Removed the tbody-tags completely. I don't think these are really needed for anything anyway?

3. Yup, moved the captions.

4. Unobtrusive JavaScript... Yes, I agree with the principle. I'll try to make this work, but I'm not sure if it can pass events (I need to get the keycode that was pressed -- it's passed as an argument to the handler function), because the example didn't have this.

Thanks for the comments :-)

megoth said...

1. The validator's quite accommodating, even in strict mode. It's not necessary to end span-tags properly (most tags don't have to), but in regard to its purpose (contain some text, and possibly style it with classes or an id), it should be closed properly (i.e. after its content).

2. I've never have had any need for tbody, thead or tfoot. It probably can be useful if you have a very tight stylesheet.

3. =)

4. My experience with unobtrussive javascripting is that it's harder to implement (since you can't directly apply event listeners to tags). But if you use jQuery, it's not very hard, it just requires some shifting in mindset. Also, when functionality is implemented, its much easier to reuse code, since all functionality is removed from the html-document.

Good principles within webdesign is always nice to share=)