By aPOST in CSS — 2023년 12월 23일

HTML5 표준 HTML 페이지의 헤더 메타 태그 작성 방법

HTML5는 표준 HTML 문서의 헤더에 작성하는 메타 태그들도 간소화되고 표준화되었습니다.

혼동을 주던 과거 XHTML의 잔재였던 부분들은 모두 정리되었고, 표준적인 사용방법이 적용되었습니다.

아울러 인터넷 익스플로러가 퇴출되면서 그에 따른 호환성 표기도 사실상 불필요해졌습니다.

아직 소수 남아있는 인터넷 익스플로러 호환, 또는 지원 표기를 위해 추가적으로 명시해주는 메타 태그 정도만 필요합니다.

인코딩 메타 태그

기본적으로 모든 HTML5 문서는 "UTF-8" 인코딩을 사용합니다.

과거 HTML 문서에 한글 인코딩을 위해서 표기했던 내용들은 모두 잊어버리고 다음 인코딩 메타태그만 사용하면 됩니다.

<meta charset="UTF-8">

인코딩 표기 중에 다음의 긴 인코딩 표기가 있는데 둘은 동일한 표현이며, 같은 의미입니다. 웹브라우저도 동일한 속성으로 받아들입니다. 그냥 짧은 표기를 사용하면 되며, 긴 표현은 구 웹 브라우저를 위한 호환성 용입니다.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

인터넷 익스플로러 호환성 표기

가장 애매한 부분입니다.

인터넷 익스플로러에 대한 지원이 사실상 종료되고 퇴출이 되고 있기 때문에, 또 마이크로소프트에서 구버전 웹 브라우저에 대한 호환성 지원을 신형 에지(Edge) 웹 브라우저에서 에뮬레이션 모드로 스위칭을 할 수 있도록 제공하겠다고 했기 때문에 웹 페이지의 호환성 문제는 사실 없다고 보면 됩니다.

다만, 아직 인터넷 익스플로러 사용자들이 남아있기 때문에 이 웹페이지가 어떤 인터넷 익스플로러 모드에서 실행되어야 하는지는 명시할 필요가 있기 때문에 메타 태그에 호환성 부분을 명시해야 합니다.

다음 메타태그는 유저 에이전트 IE로 인식되는 웹 브라우저는 지원 가능한 최신(edge) 버전으로 실행하라는 표시입니다.

인터넷 익스플로러에만 해당되는 메타태그입니다.

"edge"는 엣지 브라우저를 말하는 게 아니라 지원 가능한 최신 버전 실행 모드라는 뜻입니다.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

인터넷 익스플로러는 버전에 따라 지원 기능이 워낙 차이가 컸기 때문에 다양한 호환성 실행 모드가 필요했습니다.

최신이었던 인터넷 익스플로러 11의 경우 11 버전 최신으로 실행되도록 강제하려면 "IE=11"과 같이 메타 태그에 표시를 해줘야 했습니다. 다만 "edge" 속성 값이 가능해지면서 더 이상 버전별 표기를 해야 할 필요가 없어졌고 호환성 표기를 위해 "edge" 값만 사용하면 됩니다.

모바일 기기 지원

모바일 기기 지원을 위한 기본 메타태그는 다음과 같습니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

기본 표시 배율은 1.0으로 표시하고 컨텐츠 너비는 기기 너비에 맞춰서 표시한다는 뜻입니다.

대부분 모바일 기기에 적용되는 표준 모바일 기기 지원 메타태그입니다.

뷰포트(viewport) 메타태그가 없으면 모바일 기기에 맞춰진 화면이 표시되는 것이 아니라 데스크탑 표시 기준으로 표시되는 웹페이지가 모바일 기기 화면에 표시됩니다.

모바일 기기에 맞춘 반응형 레이아웃을 웹 페이지에 적용했다면, 메타태그로 모바일 기기 지원을 위한 뷰포트 속성을 정의해야 올바른 모바일 화면이 표시됩니다.

따라서 헤더 영역의 가장 콤팩트하고 간결한 기본 메타태그 사용 표현은 다음과 같이 작성하면 됩니다.

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>표준 문서</title>
</head>