The distinction is exactly that between <p><b>some text</b></p> and <style type="text/css"> .emphasized { font-weight: bold; } </style>

The distinction is exactly that between <p><b>some text</b></p> and <style type="text/css"> .emphasized { font-weight: bold; } </style> <!-- [...] --> <p class="emphasized">some text</p> One specifies "this text shall be bold"; the other specifies "the semantics of this text require that it be emphasized", with precisely what 'emphasized' means handled elsewhere, in the CSS which defines how the class 'emphasized' shall be rendered -- which, given appropriate media queries, might appear entirely differently depending on whether the document is rendered to a large screen, a small screen, to print, &c., &c.