Use smaller text-level HTML elements such as `mark`, `abbr`, `kbd`, `del`, `ins`, `dfn`, `progress` and `meter` so your content becomes clearer, more precise and more intentional.
Inline semantics become useful when the text is doing more than just existing on the page.
`mark` highlights contextually relevant text. `abbr` explains abbreviations. `kbd` represents keys or shortcuts. `del` and `ins` show editorial changes more explicitly than plain styling.
These choices help the page communicate nuance instead of flattening everything into visually similar text.
Both show values, but they describe different situations.
`progress` represents how far a task has advanced. `meter` represents a value inside a range, such as battery level, quality or risk.
This is a good example of why semantic choice matters even when two elements look similar at first glance.