Home > database >  Right element/style for words of buttons, options and so on in instructions
Right element/style for words of buttons, options and so on in instructions

Time:12-27

I read the difference between <b> and <strong>, <i> and <em> and some other sources, but am still not sure which element to choose when I write instructions like the following:
Go to the page > right-click Download > Save link as. What are right elements for Download and Save link as? Or should I simply use CSS to style them? Then should I use font-weight: bold or font-style: italic? I guess I should use <strong> because they are key words in my sentence, but I'm not sure. Here's a real-world example: Download a file.

CodePudding user response:

In linguistics, italics are often used when we are using a word of the language to talk about the language, not to represent a meaning, as is often the case in ordinary speech. With this in mind, I think that you should mark with italics all the words in your instructions that are not part of the explanation but refer to words that the user will see on the screen. With this in mind I recommend that you add those marks in the HTML, that is, using <em> instead of a CSS class and properties since this practice is more accessible to accessibility tools.

CodePudding user response:

Important part of semantics is context. If your whole article for example can be replaced with this single line, you probably should use strong. And if your article is not about downloading files and this line doesn't have so much strong importance, but you still want to draw reader's attention, you probably should use b.

According to MDN:

  • strong indicates that its contents have strong importance, seriousness, or urgency.
  • b is used to draw the reader's attention to the element's contents, which are not otherwise granted special importance.

Source: docs/Web/HTML/Element/strong and docs/Web/HTML/Element/b

In my opinion you should find out usage cases, read formal definition of the element from web docs (for example MDN) or web specs and find out which fits you better. You should keep in mind that everyone's case is different. There is no 100% percent correct answer or algorithm which you could use to determine if you need to use strong, b, em, i or something else. What is the topic of the site and the context of the article? In which part of the article is this line placed? So.. basically what am I trying to tell you is that you better know which semantic meaning this text have.

Edit: And SO question you referenced is a bit outdated (answer was written in 2008 which is the year when HTML5 was not so widely used). So it's better to reference web docs or web specs as I mentioned above.

  • Related