[HTML] 시맨틱 태그(Semantic tag) (3) - <figure>, <figcaption>, <audio>, <source>, <embed>

<figure> 태그

- 이미지, 일러스트레이션, 다이어그램, 코드 조각 등의 미디어를 캡슐화

<figure>
  <img src="overwatch.jpg">
</figure>

 

 

 

<figcaption> 태그

- 미디어를 설명하는 데 사용

<figure>
  <img src="overwatch.jpg">
  <figcaption>This picture shows characters from Overwatch.</figcaption>
</figure>

 

 

 

<audio> 태그

- 오디오 콘텐츠를 문서에 포함하는 데 사용

 

• controls : 재생 및 음소거와 같은 오디오 컨트롤을 브라우저에 자동으로 표시
• autoplay : 자동 재생

 

 

 

<source> 태그

- <audio> 요소나 <video> 요소, <picture> 요소에서 사용할 수 있는 다중 미디어 자원을 정의할 때 사용

 

• src : 오디오 파일의 URL을 지정

<!-- 자동 재생과 오디오 컨트롤 -->
<audio autoplay controls>
  <source src="audioFile.mp3" type="audio/mp3">
</audio>

 

 

 

<embed> 태그

- 외부 소스의 비디오, 오디오 파일, GIF를 포함한 모든 미디어 콘텐츠를 포함

- 자체적으로 닫는 태그

- 거의 안 쓰임

<embed src="download.gif"/>