Several options I've thought of
Having them as classes and using something like Isotope to hide and show episodes by tag (also being able to select multiple tags). The problem with this is I think it only works with direct child elements, so the tags would have to be by season only.
Going on the above option, I could write my own JS to select elements with the class .episode
and hide them if they don't also have the classes of any tags selected, such as maybe .character-quark
, .species-klingon
, or mood-serious
. This could help people find good episodes fast. It would also be useful if I put all series on one page for this. Perhaps I could have them separated, then have an 'all' page where I could dump episodes and have the h2 heading be something like "VOY - Season 2" instead of the current "Season 4" style.
This could be done using something like this.
There would also need to be a search function in this case; there are too many tags for buttons. I'm thinking you'd be able to search a library of tags stored as a JS object (which would be displayed with human readable names). Then search results would appear in bubbles, similar to Bing Image search 'search tags' (mobile version only). Selecting one would darken it and make it visible at the front even when searching for something else. It would of course also apply the filter. The search results could be shown using CSS Grid with a fallback to float if Grid isn't available.
Another option is to have tags simply displayed within .episode
elements. In this scenario, it wouldn't be possible to search for tags though, unless you use CTRL-F, but not everyone knows about that, and it's not that clean.