Logo

HTML 문서의 head 영역을 살펴보기

모든 HTML 문서는 크게 head 영역과 body 영역으로 나누어 집니다. 이번 포스팅에서는 웹 개발을 하면서 간과하기 쉬운 head 영역에 대해서 살펴보려고 합니다.

head 요소

HTML의 <head> 요소(element)는 <body> 요소와 함께 HTML 문서의 최상위 요소인 <html> 바로 아래 위치합니다. 브라우저 화면에 보여지는 영역을 감싸고 있는 <body> 요소와 달리 <head> 요소는 화면에 보여지지는 않지만 브라우저가 해당 HTML 문서에 대해서 알아야 할 정보를 감싸고 있습니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <!-- head 영역 -->
  </head>
  <body>
    <!-- body 영역 -->
  </body>
</html>

그럼, head 영역에는 구체적으로 어떤 정보들을 넣을 수 있을까요? <head> 요소 하위에 자주 쓰이는 요소에 대해서 다음 섹션부터 살펴보도록 하겠습니다.

title 요소

많은 분들에게 가장 친숙한 <head>의 하위 요소는 <title>일 것입니다. <title> 요소는 브라우저 상단의 제목 표시줄이나 페이지 탭에 표시되는 웹페이지의 제목을 정의하기 위해서 사용됩니다.

<title>웹페이지 제목</title>

당연한 얘기이겠지만 <title> 요소는 <head> 요소 아래에 반드시 하나만 와야한다는 점 주의바랍니다.

script 요소

<script> 요소는 웹페이지에서 필요한 자바스크립트 코드를 추가하기 위해서 사용됩니다.

HTML 문서 외부에서 작성된 자바스크립트 코드를 불러오려면 <script> 요소의 src 속성을 통해 자바스크립트 파일 경로를 지정합니다.

<script src="script.js"></script>

<script> 요소 아래에 자바스크립트 코드를 HTML 문서 내부에 인라인(inline)으로 작성할 수도 있습니다.

<script>
  console.log("Hi!");
</script>

참고로 <script> 요소는 반드시 <head> 요소 하위에서 사용해야하는 것은 아닙니다. 원하는 스크립트 로딩 시점에 따라 <body> 요소 아래에서도 사용할 수 있습니다.

<link> 요소는 현재 HTML 문서의 외부에 위치하고 있는 리소스를 불러올 때 사용되는데요. rel 속성에는 현재 웹페이지와 외부 리소스의 관계(relationship)을 명시하고, href 속성에는 외부 리소스의 경로(hyper text reference)를 명시합니다.

<link> 요소가 가장 많이 사용되는 사례는 HTML 문서 외부에서 작성된 CSS 파일을 불러오는 것입니다.

<link rel="stylesheet" href="style.css" />

웹페이지 제목과 함께 브라우저의 제목 표시줄에 표시되는 사이트 아이콘(favicon)을 불러오기 위해서 사용되는 것도 자주 볼 수 있습니다.

<link rel="icon" href="./favicon.png" />

style 요소

<link> 요소를 이용하여 외부 CSS 파일을 볼러올 수도 있지만 HTML 문서 내부에 CSS 코드를 작성하고 싶다면 <style> 요소를 사용하면 됩니다.

<style>
  p {
    color: red;
  }
</style>

meta 요소

마지막으로 살펴볼 <meta> 요소는 위에서 살펴본 <head>의 하위 요소로 표현할 수 없는 추가적인 메타 데이터를 명시하기 위해서 사용됩니다. 이러한 메타 데이터는 웹페이지가 브라우저에 어떻게 표시되는데는 아무 영향을 주지 않지만 검색 엔진 최적화(SEO) 측면에서 매우 중요합니다.

charset 속성은 웹페이자가 어떤 문자 인코딩을 사용하는 명시하기 위해서 사용됩니다.

<meta charset="UTF-8" />

http-equiv 속성은 HTTP 헤더(HTTP headers)를 HTML 문서 내부에서 명시하기 위해서 사용됩니다.

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

name 속성은 그 밖에 다른 메터 데이터를 명시하기 위해서 사용되는데요. 예를 들어, 다음 코드는 모바일 환경에서 웹페이지가 어떻게 표시되야 하는지를 정의하고 있습니다.

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

검색 엔진 최적화(SEO) 측면에서 중요한 메타 태그는 별도의 포스팅에서 다루었으니 참고바랍니다.

마치면서

웹 개발을 하다보면 자연스럽게 유저에게 보여지는 body 영역에 신경을 쓰느라 head 영역에는 소홀히 하기 쉬운 것 같습니다. 이번 기회에 대부분의 경우 복사해서 붙여넣기하는 head 영역에 어떤 내용들이 있는지 정리하실 수 있으셨으면 좋겠습니다.

This work is licensed under CC BY 4.0

messageCircle