Search code examples
htmlcsssemantic-markup

What is the best way of indicating the type of work cited by a `<cite>` element?


Per MDN:

The <cite> HTML element is used to describe a reference to a cited creative work, and must include the title of that work.

MDN then provides a big long list of different types of work that one may wish to cite using <cite>. However, depending on the styleguide followed, different types of work will produce different-looking citations (e.g., the title of a film may be italicised, whilst the title of an article may use a normal font but be wrapped in double quotes).

Given that the purpose of <cite> is to provide semantic markup, what is the best way of marking what type of work is being cited so they can be styled differently? Is it okay to use CSS classes (e.g., .cite--film, .cite--article), or something like microdata or RDF?

This is not covered in either the W3C or WHATWG specs, nor have I been able to find any instances of this question being asked previously.


Solution

  • The <cite> element is all that is needed to properly denote a reference to a creative work from an end-user perspective. They'll likely be able to tell what it is from surrounding content. You can add or suppress any necessary styling with CSS as needed—including adding quotation marks, if desired.

    If you need the specific type of work documented for ingestion by other technology, applying structured Schema.org data via HTML item* attributes is a widely-used approach.