I am creating reference material to help users complete an online form, and need to refer to the form's choices within the referencing text.
Taking the following form item:
<select multiple name="animal">
<option value="cats">Cats</option>
<option value="dogs">Dogs</option>
<option value="fish">Fish</option>
</select>
The accompanying text may be something like:
For lovers of felines, please select Cats. Canine fans should choose Dogs.
It was suggested that I use <strong>
to highlight them, but semantically it's not great:
For lovers of felines, please select <strong>Cats</strong>. Canine fans should choose <strong>Dogs</strong>.
Which HTML(5) tag should be used to highlight the item choices "cat" and "dog" in the text? I've been through the ones at W3Schools and found <var>
which seems appropriate, but is there a correct semantic approach?
For lovers of felines, please select <var>Cats</var>. Canine fans should choose <var>Dogs</var>.
Of course you could simply use quotation marks:
<p>For lovers of felines, please select "Cats". Canine fans should choose "Dogs".</p>
But if you want to use markup here, you could use kbd
together with samp
:
When the
kbd
element contains asamp
element, it represents input based on system output, for example invoking a menu item.
So it would look like this:
<p>For lovers of felines, please select <kbd><samp>Cats</samp></kbd>. Canine fans should choose <kbd><samp>Dogs</samp></kbd>.</p>
(Unless you make sure that the visual styling conveys this, also when printing the document or when color cannot be perceived etc., you may want to use quotation marks in addition.)