Question Details

No question body available.

Tags

html css semantic-markup

Answers (5)

June 9, 2026 Score: 1 Rep: 19,666 Quality: Medium Completeness: 60%

I don't think HTML semantics play a role here. What you need is explanatory text that describes what the user needs to do, and what it means. For example:

Please choose a name and select your department to build your machine's host name, which will be in the form name.department.company.com.

Your intended audience matters a lot, too. If people with technical knowledge will be filling out this form, the above explanatory text will probably suffice. If non-technical people will be filling this out, consider adding a second sentence to describe a concrete example:

Please choose a name and select your department to build your machine's host name, which will be in the form name.department.company.com.

For example, if you choose "Delivery Services" for a name and "Fullfillment" as the department, your machine name would be deliveryservices.fullfillment.company.com.

HTML wasn't designed for these kinds of semantic connections, where some part of a sentence is used to reference another part. Instead, treat this as a usability issue, and give your users abstract or concrete examples, depending on the kind of users you expect to have. Afterall, it's the people that will be using this.

June 9, 2026 Score: 1 Rep: 12,872 Quality: Medium Completeness: 80%

HTML has a element for "variables" in general, element for content from user-supplied input, and element for the demonstrations of some resulting output.

Depending on the context, some combination of these three could make sense; if it was for a static documentation detached from the app, then something like

kbd { font-style: italic; }

Please choose a name and select your department to build your machine's hostname name.department.company.com

could work. (Not 100% sure about the kbd here, though.)

I guess elements would be perfectly fine there either: in my book, the idiomatic shift is sufficient argument for them.


If it is to be used in the app, directly accompanying the form it refers to, I would consider binding the words to corresponding inputs using regular labels, or toss the input directly in the prose (what usually is not advisable, but I guess depends on the constraints in the concrete context.)

June 9, 2026 Score: 1 Rep: 84,693 Quality: Low Completeness: 70%

The real question is "why are you calling those parts out and in what context?"

  • seems unlikely as you're probably not implying a different voice.
  • might work if you want to stress emphasize those parts.
  • could be used if nothing else seems to fit.
  • is also a possibility. This implies bringing it to the user's attention without suggesting that it carries any extra importance.
  • would only be appropriate if you consider the name.department bit to actually be more important. That's possible, depending on context, but unlikely.
  • is also a candidate, depending on exactly what the context is.
June 9, 2026 Score: 1 Rep: 9,454 Quality: Low Completeness: 10%

Thank you. The tag had somehow escaped my thought process. Since the semantics of it are described as

It signals to browsers, search engines, and screen readers that the enclosed text is a programmatic variable or placeholder value, rather than just emphasized text

and I would describe our use as a placeholder, I think this is a well-justifiable choice.

June 9, 2026 Score: 0 Rep: 9,454 Quality: Low Completeness: 0%

Thanks for your reply. I tried to make the example here as small as possible to convey my question. The actual page has more context for the user.