4. 인라인 시맨틱: <strong>, <em>, <figure>
시맨틱 마크업은 블록 수준뿐만 아니라 인라인 텍스트 수준에서도 의미를 부여하여 스크린 리더와 검색 엔진에게 더 정확한 정보를 전달합니다.
4.1. <strong>과 <em>
<strong>은 중요한 콘텐츠를, <em>은 텍스트의 강조(Emphasis)를 나타냅니다. 시각적 스타일(굵게/이탤릭체)을 위해서 <b>나 <i> 대신 사용하는 것이 권장됩니다.
<p>이 정보는 <strong>절대 놓쳐서는 안 될</strong> 핵심 내용입니다.</p>
<p>그는 <em>정말로</em> 그 말이 맞다고 생각했습니다.</p>
4.2. <figure>와 <figcaption>
<figure>는 이미지, 도표, 코드 블록 등 문서의 주요 흐름에서 독립적으로 배치될 수 있는 콘텐츠를 감싸고, <figcaption>는 그에 대한 캡션을 제공합니다.
<figure>
<img src="semantic.jpg" alt="시맨틱 태그 구조 다이어그램">
<figcaption>그림 1. HTML5 문서의 시맨틱 구조.</figcaption>
</figure>
이러한 구조는 콘텐츠와 캡션을 의미적으로 연결하여 접근성을 향상시킵니다.