[HTML5 시맨틱태그 완전정복]⑤ 미디어 및 멀티미디어 시맨틱 태그 완벽 가이드

웹 콘텐츠에서 이미지, 오디오, 비디오 등 멀티미디어 요소는 시각적/청각적 정보를 전달하는 핵심 수단입니다. 웹접근성과 의미 있는 구조를 위해 HTML5에서는 다음과 같은 시맨틱 태그를 제공합니다.

1. <figure>와 <figcaption>

• <figure>: 이미지, 다이어그램, 코드, 미디어 등 독립적인 콘텐츠 묶음에 사용
• <figcaption>: 해당 콘텐츠에 대한 설명을 제공하는 캡션

<figure>
  <img src="product.jpg" alt="2025년형 스마트워치 디자인">
  <figcaption>최신 스마트워치 제품 이미지</figcaption>
</figure>

TIP: <figure>는 문서 흐름에서 독립적으로 배치할 수 있어, 기사나 블로그 본문 외부에도 활용 가능

2. <audio>와 <video>

• <audio>: 오디오 콘텐츠 삽입 (예: 음악, 인터뷰, 효과음)
• <video>: 영상 콘텐츠 삽입 (예: 제품 소개, 강의 영상)
• 두 태그 모두 controls, autoplay, loop, muted 속성 지원

<audio controls>
  <source src="intro.mp3" type="audio/mpeg">
  브라우저가 오디오를 지원하지 않습니다.
</audio>

<video controls width="640" poster="thumbnail.jpg">
  <source src="promo.mp4" type="video/mp4">
  브라우저가 비디오를 지원하지 않습니다.
</video>

TIP: poster 속성은 영상 로딩 전 썸네일 역할을 하며, 접근성 및 시각적 완성도를 높입니다.

3. <picture>와 <source>

• 반응형 이미지 제공 시 사용
• 뷰포트 너비나 지원 포맷에 따라 다양한 이미지 소스를 지정 가능

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="default.jpg" alt="제품 이미지">
</picture>

TIP: <picture>를 사용할 때 <img>는 반드시 포함해야 하며, alt 속성은 필수입니다.

4. 미디어 콘텐츠 접근성 고려 사항

시각장애 및 청각장애 사용자를 위한 접근성 체크리스트

• 이미지: alt 속성 필수. 의미 없는 장식 이미지라면 alt=""
• 오디오: 스크립트 또는 텍스트 요약 제공
• 비디오:
  • 자막 제공 (.vtt 파일 또는 내장 자막)
  • 설명 음성 또는 대체 설명 제공
  • 시작 시 자동 재생/autoplay 지양

5. 올바른 시맨틱 구조 내 미디어 배치

• 미디어는 콘텐츠 맥락 내 적절한 위치에 배치
• 제목/본문과 관련 있는 설명 포함
• <section>, <article>, <aside> 내 <figure> 구조 추천
• 미디어만 단독 삽입할 경우에도 alt, figcaption, 자막 등 설명 정보 필수

웹 접근성과 콘텐츠 전달력을 동시에 높이는 미디어 구성, 지금 바로 적용해보세요!

이 글이 도움이 되셨다면 댓글로 활용 사례나 질문을 남겨주세요.