Search code examples
htmlsemantic-markup

Appropriate use of HTML's VAR tag

I have a webpage that combines static and dynamic content. The dynamic content comes from user input supplied on another webpage. The dynamic content must be visually different (italics, underlined, different font, etc. -- using CSS, of course) from the static content, as in:

I reside in Athens.

Is it semantically appropriate to use the VAR tag around the dynamic content? For example:

I reside in <var>Athens</var>.

The documentation on the W3C and MDN sites seems to indicate that this may be misusing VAR.

If VAR is not appropriate, is there another suitable tag, or should I just use SPAN?

Solution

  • The var element is not appropriate.

    It doesn’t matter how your content is produced technically; it only matters what it represents. While there are cases where var can be used in contexts other than formulas/code ("a placeholder in prose"), your example doesn’t seem to be one of those.

    For deciding which element to use instead, it is important to know the specific case. Good questions to ask:

    • Why exactly do I want to highlight the dynamic content?
    • What am I trying to convey by this?

    As the specific case is not known, there are only two possible candidates:

    • span: doesn’t change the meaning, doesn’t mean anything.
    • b: doesn’t change the meaning, only draws attention to the content (but doesn’t make it more important by that).

    About elements others suggested as alternative:

    • em: Only to be used for "stress emphasis". For example, when someone says that she resides in Bern, she could answer: I reside in <em>Athens</em>. Don’t use this in the general case.
    • ìns: Only to be used when the content was added to the document; again, the technical side doesn’t matter (every content gets added somehow, right?), it only matters what it represents. Examples: corrections, "[sic]" in quotes, new incidents in a newspaper article, etc.
    • kbd: Only to be used when content is to be input by the user somehow (something to type into a search field, something to click on in a software etc.); it doesn’t matter how the content managed to find its way into the document (the whole document was user input at some point!), but what it represents now. As "Athens" is not something the reader should input anywhere, kbd is not appropriate.