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

`<figcaption>` 태그

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

<figcaption> 태그를 이해하기 위해서는 사전 지식으로 <figure> 태그에 대해 알고 있어야 합니다.

<figure> 태그는
주변 콘텐츠의 이해나 흐름과 관련된 이미지, 그림, 도표, 사진, 코드 목록 또는 기타 관련 콘텐츠 등의 독립된 콘텐츠를 나타내는 태그입니다. 선택적으로 <figcaption> 태그를 사용해서 이 콘텐츠를 참조할 수 있는 캡션(설명)을 추가할 수 있습니다.

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

HTML

<p>인류가 살고 있는 지구는 아름답습니다.</p>
<figure>
    <img src="earth.jpg" alt="우주에서 둥글고 푸른빛으로 빛나는 지구">
    <figcaption>우주에서 바라본 지구</figcaption>
</figure>

구문

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

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

다음은 <figcaption> 태그가 <figure> 태그와 상관없이 사용된 예제입니다.

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

HTML 잘못 사용한 예

<img src="earth.jpg" alt="우주에서 둥글고 푸른빛으로 빛나는 지구">
<figcaption>우주에서 바라본 지구</figcaption>

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

다음은<figure> 태그에서 <figcaption> 태그를 사용하지 않은 예제입니다.
<figcaption> 태그는 필요할 경우에 선택적으로 사용하면 됩니다.

HTML

<p>인류가 살고 있는 지구는 아름답습니다.</p>
<figure>
    <img src="earth.jpg" alt="우주에서 둥글고 푸른빛으로 빛나는 지구">
</figure>

`<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>