HTML <head> 요소 사용법: 웹페이지 메타데이터 완벽 가이드

웹사이트에서 HTML <head> 요소를 사용하는 방법을 알아보세요.

HTML <head> 요소는 페이지 제목, 스타일, 스크립트 등 웹 페이지에 관한 메타데이터(정보)를 담는 컨테이너 역할을 합니다.

<head> 요소 안의 내용은 사이트 방문자가 아니라 주로 브라우저 같은 기계가 읽고 처리한다는 점이 특징입니다.

<head> 요소는 용도가 전혀 다른 <header> 요소와 혼동해서는 안 됩니다.

<head> 요소는 여는 <html> 태그 바로 아래, 그리고 여는 <body> 태그 바로 앞에 위치합니다:

<!DOCTYPE html>
<html>
  <head>
    <!-- 주로 기계가 처리하는 메타데이터 포함 -->
  </head>
  <body></body>
</html>

다음과 같은 HTML 요소들을 <head> 요소 안에 넣을 수 있습니다:

<title>
<link>
<style>
<meta>
<script>
<base>
<noscript>

활용 예제

<head> 요소 안에 자주 사용되는 메타데이터 요소들을 함께 넣어 활용하는 몇 가지 예제를 살펴보겠습니다.

<title> 요소

<title> 요소는 HTML 문서의 제목을 정의하며, 이 제목은 브라우저의 페이지 탭에 표시됩니다:

<!DOCTYPE html>
<html>
  <head>
    <title>문서 제목</title>
  </head>
  <body></body>
</html>

팁: 아무 웹사이트의 페이지 탭 위에 마우스를 올려두고 몇 초만 기다리면, 전체 페이지 제목이 담긴 작은 팝업이 나타나는 것을 확인할 수 있습니다.

<style> 요소

<style> 요소는 CSS로 작성된 HTML 문서의 스타일 정보(타이포그래피, 간격, 색상, 애니메이션 등)를 담습니다:

<!DOCTYPE html>
<html>
  <head>
    <title>문서 제목</title>
    <style type="text/css">
      body {
        background-color: red;
      }

      p {
        font-size: 18px;
        line-height: 1.5;
      }
    </style>
  </head>
  <body></body>
</html>

<link> 요소

HTML 문서에 스타일을 적용하는 더 현대적인 방식은 <link> 요소를 사용해 외부 CSS 스타일시트를 불러오는 것입니다:

<!DOCTYPE html>
<html>
  <head>
    <title>문서 제목</title>
    <link href="/styles/main.css" rel="stylesheet" />
  </head>
  <body></body>
</html>

알아두면 좋은 점: 같은 문서에서 <style>과 <link> 요소를 함께 사용하면, 문서에 포함된 순서대로 스타일이 적용됩니다. CSS는 계단식(cascading)으로 동작하기 때문에, 동일한 HTML 요소를 대상으로 하는 스타일이라면 나중에 선언된 것(위에서 아래 방향)이 앞선 스타일을 덮어쓰게 됩니다.

<script> 요소

<script> 요소는 다음 두 가지 방식으로 JavaScript를 실행할 때 사용됩니다:

JavaScript 코드를 문서 안에 직접 삽입하는 방식(앞서 <style> 요소에서 본 것과 유사합니다).
src 속성을 통해 외부 JavaScript 파일을 불러오는 방식.

JavaScript 코드를 문서 안에 직접 삽입하는 예제:

<!DOCTYPE html>
<html>
  <head>
    <title>문서 제목</title>
    <script>
      // 배경색을 빨간색으로 변경
      document.body.style.backgroundColor = "red"
    </script>
  </head>
  <body></body>
</html>

외부 JavaScript 파일을 불러오는 예제:

<!DOCTYPE html>
<html>
  <head>
    <title>문서 제목</title>
    <script src="/scripts/main.js"></script>
  </head>
  <body></body>
</html>

그 밖의 head 요소들

앞서 소개한 요소 외에도 <head> 안에는 아래와 같은 요소들이 사용될 수 있습니다:

<meta>: 문자 인코딩, 뷰포트 설정, 페이지 설명 등 문서에 관한 다양한 메타 정보를 정의합니다. SEO와 모바일 대응에 필수적입니다.
<base>: 문서 내 모든 상대 URL의 기준이 되는 기본 주소를 지정합니다.
<noscript>: 브라우저에서 JavaScript가 비활성화되어 있을 때 표시할 대체 콘텐츠를 담습니다.