How to correctly combine font-weight: bold with <b> or <strong> tags?

From a aesthetic consideration, I gave this CSS command:

article p:first-child {
	font-weight: bold;
}

My problem is that this makes <b> and <strong> tags inside any first <p> paragraph of articles not visually unusual.

How would you suggest to cope with that, CSSwise or JavaScriptwise?

You may confusing html with the way in which something looks but html is the structure and css applies the visuals. Therefore you can style the b and strong to be what you want. You could for example make them italic but only if inside the first child.

e.g.

article p:first-child b,
article p:first-child strong {
  font-style: italic;
}

Obviously you can’t make them bolder unless you have a font that supports multiple weights and then you could use different weights of bold.

Note that the b element is semantically neutral these days but the strong element is a semantic tag (like em) that adds emphasis to the meaning of the text. This has nothing to do with the visual look of course as that is handled by css. Visuals should not be the only method to convey information as screen readers don’t see anything at all.:wink:

2 Likes

Indeed, HTML semantics can mean more than visually seen.

1 Like