In a HTML form, should an italicized "(required)" get <i>, <em> or <span class="italic">?

Question

With the intent of catering to screen readers and being semantically correct, which is the correct way to display an italicized "required" or "optional" label in a HTML form?

1. <i>*required</i>
2. <em>*required</em>
3. <span class="italic">*required</span>

*<span class="italic"> equating to font-style="italic" in CSS

Answer 1

Arguably, neither <em> nor <i> is semantically correct. Your question already presumes that you want the text to visually be italic, not that you want it to be emphasized nor recognized as foreign text, the name of a ship, and so on.

That being said, a neutral element is likely your best bet, such as <span>, to avoid imparting semantic meaning where this none. Also, a screen reader will not announce the text any differently if you use<em> or <i>.

You can take it another step and skip adding an element altogether and use CSS to add the content for you (provided you support only one language and/or have an easy way to do CSS per language):

input[required] + label::after,
textarea[required] + label::after {
  content: " (required)"
}

Or the inverse:

input:not([required]) + label::after,
textarea:not([required]) + label::after {
  content: " (optional)"
}

Screen readers announce CSS generated content, in case you are worried that might be an issue.

Answer 2

<i> means "italic", and it's meant for quotes and foreign words (such as Latin and French expressions). For example:

I had a deja vu.

<em> means "emphasis" and it's meant for emphasizing one word. Example:

The food was really good!

It's up to you which one use. In your case I would suggest <em>.

Answer 3

It doesn't matter much to be honest. What does matter, is HTML5 required attribute on input itself.

Source: https://www.w3.org/wiki/HTML5_form_additions#required