HTML의 <meta> 요소는 웹 문서에 대한 메타데이터(metadata), 즉 페이지 설명, 키워드, 문서 작성자 등의 정보를 정의하는 데 사용됩니다. 이러한 메타데이터는 화면에는 직접 표시되지 않지만, 검색 엔진이나 웹 브라우저가 문서를 해석하고 처리하는 데 중요한 역할을 합니다.
또한 <meta> 태그를 활용하면 웹 페이지의 크기를 지정하는 뷰포트(viewport)도 설정할 수 있습니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta> 태그에서 사용할 수 있는 주요 속성은 다음과 같습니다.
| 번호 | 속성 및 설명 |
|---|---|
| 1 | name 메타데이터 항목의 이름을 지정합니다. keywords, description, author, revised, generator 등 원하는 값을 자유롭게 사용할 수 있습니다. |
| 2 | content name 속성으로 지정한 항목의 실제 값을 정의합니다. |
| 3 | scheme (더 이상 사용되지 않음) content 속성에 선언된 값을 해석하는 방식(scheme)을 지정합니다. 현재는 폐기된(deprecated) 속성입니다. |
| 4 | http-equiv HTTP 응답 메시지 헤더를 대체하는 용도로 사용됩니다. 예를 들어 페이지 자동 새로고침이나 쿠키 설정에 활용할 수 있으며, 값으로는 content-type, expires, refresh, set-cookie 등이 있습니다. |
| 5 | charset 문서의 문자 인코딩(character encoding) 방식을 지정합니다. |
예제
다음은 <meta> 태그를 실제로 구현한 예제 코드입니다.
<!DOCTYPE html> <html> <head> <meta name="description" content="Learn for free"> <meta name="keywords" content="Video tutorials, free tutorials, learn, web"> <meta http-equiv="refresh" content="20"> <meta name="author" content="Jack Sparrow"> </head> <body> <h2>Tutorials</h2> <p>Programming tutorials for free:</p> <ol> <li>Java</li> <li>C++</li> <li>C</li> <li>C#</li> </ol> </body> </html>
실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
