HTML <meta>: 메타데이터 요소

HTML <meta> 요소는 <base>, <link>, <script>, <style>, <title> 등 다른 메타 요소로 나타낼 수 없는 메타데이터를 나타냅니다.

<meta> 요소가 제공하는 메타데이터는 다음 네 유형 중 하나입니다.

  • name 특성을 지정하면 페이지 전체에 적용되는 “문서 레벨 메타데이터”를 제공합니다.
  • http-equiv 특성을 지정하면 유사한 이름의 HTTP 헤더가 제공하는 정보와 동일한 “프래그마 지시문”이 됩니다.
  • charset 특성을 지정하면 문서 인코딩에 사용한 문자 인코딩을 나타내는 “문자 집합 선언”이 됩니다.
  • itemprop 특성을 지정하면 “사용자 정의 메타데이터”를 제공합니다.

특성

전역 특성을 포함합니다.

name 특성은 <meta> 요소에서 특별한 의미를 가지며, <meta>에는 전역 itemprop 특성을 charset, http-equiv, name 특성과 함께 지정할 수 없습니다.

charset

페이지의 문자 인코딩을 선언합니다. HTML5 문서의 유효한 인코딩은 UTF-8 뿐이므로, charset 특성이 존재할 경우 그 값은 반드시 문자열 “utf-8”의 대소문자 구분 없는 ASCII 표현이어야 합니다. 문자 인코딩을 선언하는 <meta> 요소는 문서의 첫 1024 바이트 내에 위치해야 합니다.

content

http-equiv 또는 name 특성에 지정한 키에 대한 값을 담습니다.

http-equiv

프래그마 지시문을 지정합니다. 특성의 이름(HTTP equivalent)에서 알 수 있듯이, 가능한 값은 일부 HTTP 헤더입니다.

content-security-policy

현재 페이지의 콘텐츠 정책을 정의할 수 있습니다. 대부분의 콘텐츠 정책은 허용하는 서버 출처와 스크립트 엔드포인트를 지정해 교차 사이트 스크립트(XSS) 공격 방어에 도움을 줍니다.

content-type

지정할 경우, content 특성의 값은 반드시 “text/html; charset=utf-8”이어야 합니다. 참고: text/html MIME 유형으로 제공하는 문서에서만 사용할 수 있으며, XML MIME 유형의 문서에서는 사용할 수 없습니다.

default-styles

기본 CSS 스타일 시트 세트의 이름을 지정합니다.

x-ua-compatible

지정할 경우, content 특성의 값은 반드시 “<code>IE=edge</code>”여야 합니다. 사용자 에이전트는 이 프래그마를 무시해야 합니다.

refresh

다음을 지정합니다.

  • content 특성에 양의 정수 값을 지정한 경우, 지정한 시간(초 단위)만큼 대기한 후 페이지를 새로고침합니다.
  • content 특성에 순서대로, 양의 정수 값, 문자열 ;url=, 유효한 URL을 이어 붙인 값을 지정할 경우, 지정한 시간(초 단위)만큼 대기한 후 해당 URL로 이동합니다. (e.g. content="5;url=https://sorto.me/)
name

name과 content 특성을 함께 사용하면 문서의 메타데이터를 이름-값 쌍으로 제공할 수 있습니다. name은 이름, content는 값을 담당합니다.

표준 메타데이터 이름 문서에서 HTML 명세가 포함한 표준 메타데이터 목록을 확인하세요.

접근성 고려사항

http-equiv 특성에 refresh를 지정한 경우에는 대기 시간이 너무 짧지 않도록 조심해야 합니다. 스크린 리더와 같은 접근성 보조 기술의 사용자는 페이지가 자동으로 바뀌기 전에 페이지의 내용을 미처 다 읽지 못할 위험이 있습니다. 또한 저시력 사용자는 갑작스러운 페이지 콘텐츠의 변경으로 인해 혼란을 느낄 수 있습니다.

명세

HTML Living Standard

브라우저 호환성

IEEdgeChromeSafariFirefoxiOS SafariAndroid WebViewAndroid ChromeAndroid FirefoxSamsung Internet
meta
charset
content
http-equiv
content-language
content-security-policy
content-type
refresh
name
color-scheme
referrer
theme-color
scheme
MDN browser-compat-data