4. Inline Semantics: <strong>, <em>, <figure>
Semantic markup assigns meaning not just at the block level, but also at the inline text level, delivering more accurate information to screen readers and search engines.
4.1. <strong> and <em>
<strong> indicates important content, while <em> denotes emphasis in the text. It is recommended to use these instead of <b> or <i> if the purpose is semantic meaning rather than just visual style (bold/italic).
<p>This information is a <strong>critical point</strong> you should not miss.</p>
<p>He <em>truly</em> believed that statement was correct.</p>
4.2. <figure> and <figcaption>
<figure> wraps content like images, diagrams, or code blocks that are referenced from the main flow, and <figcaption> provides a caption for it.
<figure>
<img src="semantic.jpg" alt="Diagram of Semantic Tag Structure">
<figcaption>Figure 1. Semantic structure of an HTML5 document.</figcaption>
</figure>
This structure semantically links the content and its caption, improving accessibility.