정의 및 사용 방법

<embed> 태그를 사용하면
HTML 문서 안에 외부 플러그인이나 미디어 컨텐츠를 단순히 삽입하여 문서에서 제공할 수 있습니다.

이 태그는 외부 리소스를 단순히 문서에 삽입해서 활성화하는 용도로 사용됩니다.

특징

  • <embed>는 외부 콘텐츠를 문서에 포함하여 활성화하기 위한 단순 삽입용 태그입니다.
  • 초기 웹 환경에서 브라우저 자체 기능이 제한적이었을 때, 외부 애플리케이션이나 플러그인이 필요한 콘텐츠(예: 어도비 플래시, 비디오, 오디오, PDF 등)를 삽입하기 위한 용도로 고안되었습니다.
  • HTML5 이후 브라우저가 자체적으로 비디오, 오디오 등을 지원하고 보편화되면서, 이 태그의 사용 필요성은 현저히 줄었으며, 제한적으로만 사용됩니다.
  • 그러나 여전히 PDF 문서, 비디오, 오디오 등 다양한 외부 콘텐츠를 삽입시키는 용도로 사용될 수 있습니다.

<embed> 태그는 하위 콘텐츠를 가질 수 없는 빈 요소(Void element)입니다. 이는 닫는 태그(</embed>)가 없다는 의미입니다.

기본 예제

<embed> 태그는 지정된 src 속성을 통해 이미지, 미디어 파일 등 다양한 형식의 외부 콘텐츠를 웹 문서에 포함시키고 활성화할 수 있습니다. 다음은 그 예시입니다.

이미지 삽입

HTML 
<embed src="flower.jpg" width="200" height="130">
브라우저에서 실제 표시된 모습

비디오 삽입

HTML 
<embed src="flower.mp4" width="200">
브라우저에서 실제 표시된 모습

관련 속성

<embed> 태그는 모든 글로벌 속성을 사용할 수 있으며,
이 태그에 특화된 관련 속성들도 있습니다.

embed 태그의 관련 속성
속성간략 설명
src 삽입하려는 리소스의 경로(URL)를 지정합니다.
type 선택적으로 type 속성을 사용하여 리소스의 미디어(MIME) 타입을 명시할 수 있습니다.
width 비디오의 너비를 픽셀(px) 단위로 지정합니다.
height 비디오의 높이를 픽셀(px) 단위로 지정합니다.

예전에는 이 태그만을 위한 다음의 속성들이 있었지만
이제는 명세서에서 삭제된 비표준으로 더 이상 사용되지 않으며 사용해서는 안 됩니다.
아직 많은 학습서나 기존 코드에서 사용하고 있으므로 관심사를 위해서만 아래에 나열합니다.

  • align
  • name

이 속성들을 각 브라우저별로 아직까지 지원할 수 있지만 모든 사용자에게 적합하지 않을 수도 있습니다. 구현 간에 호환되지 않는 부분이 많을 수도 있으며 향후 동작이 변경될 수도 있습니다.

src 속성

삽입하려는 리소스의 경로(URL)를 지정합니다.
이 속성은 필수 속성이며, 실제로 삽입할 파일의 경로를 지정해야 합니다. 예를 들어, 이미지나 비디오, PDF 파일 등의 경로를 지정합니다.

HTML 
<embed src="flower.jpg">
<embed src="flower.mp4">

type 속성

선택적으로 이 속성을 사용하여 리소스의 미디어(MIME) 타입을 명시할 수 있습니다.

HTML 
<embed src="flower.jpg" type="image/jpeg">
<embed src="flower.mp4" type="video/mp4">

미디어(MIME) 타입 목록을 참고하세요.

  • type 속성은 <embed>가 과거 플러그인 기반 콘텐츠를 처리할 때 브라우저에게 어떤 플러그인을 사용해야 할지 알려주는 핵심적인 역할을 했습니다.
  • 현재는 브라우저가 src로 지정된 파일의 확장자나 서버 응답을 통해 MIME 타입을 유추할 수 있어 type 속성이 필수는 아니지만, 명시적으로 지정하면 브라우저가 콘텐츠를 더 빠르고 정확하게 인식하고 렌더링(활성화)할 수 있습니다.

width 속성

삽입되는 리소스의 너비를 픽셀(px) 단위로 지정합니다. 백분율(%)을 사용할 수 없습니다.
픽셀 단위를 함께 작성해도 문제는 없지만, 단위는 일반적으로 생략합니다.

이 속성을 생략하면 브라우저가 콘텐츠에 따라 기본 크기를 자동으로 결정합니다.

HTML 
<embed src="flower.mp4">
<embed src="flower.mp4" width="200">
<embed src="flower.mp4" width="200" height="150">

height 속성

삽입되는 리소스의 높이를 픽셀(px) 단위로 지정합니다. 백분율(%)을 사용할 수 없습니다.
픽셀 단위를 함께 작성해도 문제는 없지만, 단위는 일반적으로 생략합니다.

이 속성을 생략하면 브라우저가 콘텐츠에 따라 기본 크기를 자동으로 결정합니다.

HTML 
<embed src="flower.mp4">
<embed src="flower.mp4" height="150">
<embed src="flower.mp4" width="200" height="150">

고려할 점

<embed> 태그를 사용할 때는 다음 사항들을 함께 고려해야 합니다.

외부 플러그인 지원 여부

<embed> 태그는 초창기 웹 환경에서 브라우저의 기능이 제한적이던 시절, 외부 애플리케이션이나 플러그인이 필요한 콘텐츠(예: 어도비 플래시, PDF, 비디오, 오디오 등)를 문서에 삽입하기 위해 고안되었습니다.

그러나 현대의 브라우저는 대부분 이러한 외부 플러그인을 지원하지 않습니다.
보안상의 이유와 함께 브라우저 자체가 미디어 재생 및 렌더링 기능을 내장하게 되었기 때문입니다. 현재는 PDF 문서와 같은 일부 예외를 제외하고는 대부분의 플러그인 기반 콘텐츠가 더 이상 지원되지 않습니다.

더 이상 지원되지 않는 대표적인 예
  • Java Applets 및 관련 플러그인
  • ActiveX 컨트롤
  • 어도비 플래시(Adobe Flash)

언급된 것 이외에도 브라우저 보안 정책으로 인해 외부 플러그인 사용을 위해 <embed> 태그를 사용하는 것은 바람직하지 않습니다.

더 적절한 태그의 사용 확인

<embed> 태그는 외부 콘텐츠를 단순히 문서에 삽입해서 활성화하는 역할에 초점이 맞춰져 있으며, 의미론적 측면에서 해당 콘텐츠를 나타낼 수 없는 한계가 있습니다. 또한 현대의 브라우저는 비디오, 오디오 등의 미디어를 자체적으로 지원하고 내장 기능이 풍부해졌기 때문에, 이러한 콘텐츠를 <embed>로 삽입하는 것은 더 이상 바람직하지 않습니다.

더 적절한 태그의 제안
  • 이미지 파일을 삽입하려면, <picture>나 <img> 태그를 사용하세요. 의미론적 측면이나 반응형 스타일을 다룰 때 더 적절합니다.
  • 외부의 웹 페이지(예: HTML 문서)를 삽입하려면 <iframe> 태그를 사용하세요. 의미론적 측면이나 보안 관리 측면에서 더 적절합니다.
  • 비디오나 오디오 콘텐츠를 삽입하려면 <video>나 <audio> 태그를 사용하세요. 의미론적 측면뿐만 아니라, 자막, 컨트롤 UI, 자동 재생 등 미디어 전용 속성과 기능을 제공하여 훨씬 유연하게 제어할 수 있습니다.

접근성

<embed> 태그에 aria-label이나 title 속성으로 삽입된 콘텐츠를 간결하게 설명하세요.
이렇게 하면 스크린 리더나 보조 기술을 사용하는 사용자가 삽입된 콘텐츠의 목적이나 종류를 인식하기 쉬워집니다.

HTML 
<embed src="flower.mp4" aria-label="꽃 몽우리가 활짝 피는 비디오 영상">

기술적인 문법 요약

embed 태그의 기술적인 문법 요약
허용되는 부모 요소 외부 리소스 삽입을 허용하는 모든 요소
허용되는 콘텐츠 없음
암시적인 role 속성 값 없음
허용된 role 속성 값 application, document, img, none, presentation

브라우저 호환성

embed 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<embed> 1 12 1 4

명세서

embed 태그의 명세서 사양
명세서 사양
<embed> HTML
#the-embed-element

참고문헌

같이 보기