HTML <figcaption> 태그 – 올바른 이해와 사용 방법

`<figcaption>` 태그

<figcaption> 태그는
오직 부모 요소인 <figure> 태그의 콘텐츠를 참조할 수 있는 캡션(설명)이나 범례을 나타내기 위해 사용하는 태그입니다.
선택적으로 사용할 수 있지만, 사용할 경우에는 <figure> 태그의 첫 번째 자식 요소나 마지막 자식 요소로만 사용되어야 합니다.

다음의 예제는 <figure> 태그의 콘텐츠를 참조할 수 있는 캡션(설명)을 <figcaption> 태그로 나타냈습니다.

HTML

<p>인류가 살고 있는 지구는 아름답습니다.</p>
<figure>
    <img src="earth.jpg" alt="우주에서 바라본 지구 사진">
    <figcaption>우주에서 바라본 지구</figcaption>
</figure>

HTML <figure> 태그

`<figcaption>` 태그의 구문

부모 요소가 반드시 <figure> 태그이어야 합니다.
<figure> 태그에서 반드시 사용해야 하는 것은 아닙니다. 선택적으로 사용할 수 있습니다.
<figure> 태그에서 사용할 경우 첫 번째 자식 요소나 마지막 자식 요로서만 사용되어야 합니다.
<figure> 태그에는 소스에 대한 추가 정보가 포함될 수 있습니다.

부모 요소가 반드시 `<figure>` 태그이어야 합니다.

다음은 <figcaption> 태그가 <figure> 태그와 상관없이 사용된 예제입니다. <figcaption> 태그의 사용 목적은 <figure> 태그의 콘텐츠를 참조할 수 있는 캡션(설명)이나 범례을 나타내기 위해 사용하는 태그입니다. 부모 요소가 반드시 <figure> 태그이어야 합니다.

`<figure>` 태그에서 선택적으로 사용할 수 있습니다.

다음은 <figure> 태그에서 <figcaption> 태그를 사용하지 않은 예제입니다. <figcaption> 태그는 선택적으로 사용할 수 있습니다.

`<figure>` 태그에서 사용할 경우 첫 번째 자식 요소나 마지막 자식 요로서만 사용되어야 합니다.

<figure> 태그에서 사용할 경우 첫 번째 자식 요소나 마지막 자식 요로서만 사용되어야 합니다. 이것은 사용자들이 스크린 리더 및 보조 기술을 통해 웹 페이지를 이해하고 상호 작용할 수 있도록 돕습니다.

아래의 예제는 <figure> 태그가 두 번째 자식 요소로 잘못 사용된 예제입니다.

HTML 잘못 사용한 예

<figure>
    <img src="earth.jpg" alt="우주에서 바라본 지구 사진">
    <figcaption>우주에서 바라본 지구</figcaption>
    <p>인류가 살고 있는 지구는 아름답습니다.</p>
</figure>

`<figure>` 태그에는 소스에 대한 추가 정보가 포함될 수 있습니다.

다음의 예제에서 첫 번째 <figcaption> 블록은 오리 이미지와 관련된 설명과 출처 정보를 제공합니다. 이러한 방식으로 웹 페이지에서 미디어나 정보 요소와 관련된 추가 정보를 구조화하여 제공할 수 있습니다.

HTML

<figure>
    <img src="duck.jpg" alt="오리 이미지">
    <figcaption>
        <p>이 사진은 귀여운 오리를 보여줍니다.</p>
        <p><small>사진 제공: 🌟 뉴스</small></p>
    </figcaption>
</figure>