<head> 태그의 정의 및 사용법

<head> 태그는
HTML 문서의 문자 인코딩, 타이틀, 설명, 스타일시트, 스크립트 등
문서 정보(메타데이터)에 관련된 다양한 요소를 모아둔 태그입니다.
이러한 정보들은 화면에 표시되지는 않지만 브라우저, 검색 엔진 및 다른 웹 기술 등 기계적 처리를 위한 정보들입니다.

여기에서 문서 정보(메타데이터, metadata)란,
HTML 문서를 다루고 기술적으로 처리하기 위해 필요한 코드화된 추가 정보를 의미합니다.

이 태그는 루트 요소인 <html>의 첫 번째 자식 요소이어야 하며, <html>의 두 번째 자식 요소는 <body>입니다.

<head> 태그를 이해하려면 HTML의 기본 구조를 알아야 합니다.

HTML 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> <!-- 문자 인코딩 -->
        <title>이 페이지의 타이틀</title> <!-- 문서의 타이틀 -->
        <meta name="description" content="이 페이지의 짧은 설명입니다."> <!-- 문서의 설명 -->
        <link rel="stylesheet" href="style.css"> <!-- 스타일시트 -->
        <script src="script.js"></script> <!-- 스크립트 -->
    </head>
    <body>
        <!-- 문서의 내용 -->
    </body>
</html>
  • <!DOCTYPE html>: 이 부분은 문서 유형을 선언하는 것으로, 브라우저가 최신 버전의 웹 표준 사양을 준수하고 올바르게 렌더링하도록 하는 역할을 합니다. HTML의 요소가 아닙니다.
  • <html>: HTML 문서의 최상위 요소인 루트(root) 요소입니다. 모든 HTML 요소는 <html> 요소 내에 포함되어야 합니다.
  • <head>: HTML 문서의 메타데이터와 헤더 정보를 정의하는 부분입니다. 이 부분은 브라우저에게 문서에 대한 정보를 전달하거나 외부 스타일시트, 자바스크립트 파일 등을 연결할 수 있습니다.
  • <body>: HTML 문서의 본문 내용을 정의하는 부분입니다. 웹 페이지에 실제로 표시되는 내용이 이 부분에 작성되며, 텍스트, 이미지, 링크, 표, 양식 등 다양한 요소들이 포함될 수 있습니다.

<head> 태그의 주된 목적은 브라우저, 검색 엔진 및 다른 웹 기술 등 기계적 처리를 위한 HTML 문서 정보(메타데이터, metadata)들을 모아두기 위해서입니다.
이 태그는 화면에 표시되지 않기 때문에,
이 문서의 최상위 제목이나 작성자 정보 등이 화면에 보여야 할 필요가 있다면 <header> 태그를 사용하세요.

기술적인 구문 요약

<head>는 HTML의 기본 구조에 반드시 필요한 필수 태그입니다.

HTML 문서에는 <head> 태그가 하나만 존재해야 합니다.

필수 부모 요소 - <html>

<head> 태그는 반드시 <html> 요소의 첫 번째 자식 요소이어야 합니다.

필수 형제 요소 - <body>

<head> 태그는 반드시 <body> 요소를 형제 요소로 두고 있어야 합니다.
이때, <head> 태그가 먼저 위치해 있어야 합니다.

필수 자식 요소 - <title>

<head> 태그는 현재의 문서가 상위 문서(예를 들어, <iframe> 문서)를 가지고 있어서 문서의 타이틀 정보를 제공하는 경우가 아니면,
반드시 <title> 요소를 자식 요소로 두고 있어야 합니다. 이 요소는 해당 HTML 문서의 타이틀을 제공합니다.

<title> 요소에서 제공하는 HTML 문서의 타이틀은 브라우저의 제목 표시줄이나 페이지 탭에 보이는 제목으로 사용되며, 시각장애인을 위한 스크린 리더에서도 읽을 수 있는 HTML 문서에서 필수적으로 제공해야 하는 정보입니다.

잘못 마크업한 사례

다음은 <head> 태그를 잘못 마크업한 사례들입니다.

올바르지 않은 HTML 구조

HTML 
<!DOCTYPE html>
<html>
    <body>
        <head> <!-- 올바르지 않은 HTML 구조 -->
            <!-- 문서의 정보(메타데이터) -->
        </head>
        <!-- 문서의 내용 -->
    </body>
</html>

<head>는 HTML 기본 구조를 구성하는 중요한 태그입니다.
<head> 태그는 반드시 <html> 요소의 첫 번째 자식 요소이어야 합니다.

자식 요소로 <title>이 반드시 있어야 함

HTML 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!-- 문서의 타이틀을 나타내는 title 요소가 없음 -->
        <meta name="description" content="이 페이지의 짧은 설명입니다.">
        <link rel="stylesheet" href="style.css">
        <script src="script.js"></script>
    </head>
    <body>
        <!-- 문서의 내용 -->
    </body>
</html>

이 사례에서는 <head> 태그의 자식 요소로 문서의 타이틀을 나타내는 <title> 요소가 없습니다.

<head> 태그는 현재의 문서가 상위 문서(예를 들어, <iframe> 문서)를 가지고 있어서 문서의 타이틀 정보를 제공하는 경우가 아니면,
반드시 <title> 요소를 자식 요소로 두고 있어야 합니다.

명세서

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

브라우저 호환성

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

참고문헌

같이 보기