Dev edition: Distinguish the typographic conventions each other

[momdo]

https://html.spec.whatwg.org/dev/introduction.html#typographic-conventions

Currently, the following typographic conventions are the same style (italic):

This is an example.
The defining instance of a term is marked up like this.
Variables are marked up like this.

Following styles are the same (normal), too:

This is a definition, requirement, or explanation.
This is a note to authors describing the usage of an interface.

These are also the same (monospace):

The defining instance of an element, attribute, or API is marked up like this.
Other code fragments are marked up like this.

Because these styles can't be distinguished, I feel that they are preferably different each other like the spec.

[domenic]

I'd be happy to accept a PR for either making these more distinguishable, or tweaking that section with w-nodev so that it's less confusing. Ideally it'd come from someone with design sense.

Personally I think it's OK as-is:

• The difference between examples and variables/definitions is pretty clear as examples are longer
• Variables and definitions can be distinguished by context usually (but I am less sure on this particular point)
• Notes to authors describing usage are basically the same thing as definitions/requirements/explanations in the dev edition.
• It seems OK for all code, whether it's a definition or a usage, to use monospace.

But I'd be happy to with changes as well.

[tigt]

Examples would probably be best styled like they are in the full edition: put “Example” in front of them. The italics can be hard to read for multiple paragraphs, but the examples are usually mercifully short.

“Note” styles are as of today indicated with a slight gray background, but for screens in sunlight and High-Contrast Mode, it might be best to also prefix them with “Note”.

Open issues and warnings may also want symbols or prefixes for High-Contrast Mode users, as well.

What about bold and monospace for defining instances of code?

The defining instance of an element, attribute, or API is marked up like this.
Other code fragments are marked up like this.

---

I’d be happy to make a PR for this if you think it makes sense.

[domenic]

A pull request seems great.