FE/HTML

[html기본요소] head의 역할

지네123 2020. 12. 22. 20:33

html문서는 head와 body 이 두가지로 구분된다.

말 그대로 html문서가 우리 몸이라고 생각했을때, 머리(head)와 몸(body)으로 구분된다고 생각하면 쉬울 것이다.

 

head의 역할

head의 정의는 문서의 메타데이터 집합이다.

head는 단어 그대로 html문서 머리부분에 속하며 body와 다르게 head안에 작성된 모든 내용은 페이지에 직접적으로 노출되지 않는다.

즉 우리의 정보가 입력되어있는 뇌처럼 보이지 않는 정보들을 저장하는 곳이다.

head안에는 이 페이지가 검색엔진에 노출이 될 것인지 말 것인지, 이 페이지의 제목이 무엇인지, 이 페이지의 소개하는 글, 작성한 사람 등에 대한 굳이 노출이 필요하지 않은 정보들이 작성되어 있으며, html문서를 이쁘게 꾸며주기 위한 css파일과 역동적으로 표현할 수 있는 js파일을 연결하는 부분도 포함되어 있다 :)

 

 

 

1. title

<!DOCTYPE html>
<html>
  <head>
    <title>개블리셔 블로그</title>
  </head>
  <body></body>
</html>

title요소는 단어 그대로 html문서의 이름/제목을 나타낸다.

 

검색엔진에서 검색했을 때 페이지의 이름으로, 브라우저 창에 보이는 제목으로 사용된다.

 

예전에는 html문서 제목을 이쁘게 꾸미고자 특수문자를 사용하는 경우가 많았다.

하지만 최근 브라우저에서 특수문자 또는 길게 사용할 경우 다양한 문제점이 생긴다.

<!DOCTYPE html>
<html>
  <head>
    <title>★★개블리셔★★ 사이트에 오신걸 환영합니다 ♥♡♥♡</title>
  </head>
  <body></body>
</html>

 

  1. 최근 브라우저들은 다 탭을 사용한다.
    탭이 많이 열리게 되면 그만큼 제목이 잘려보이게 되는데, 이런식으로 길게 작성을 했거나 특수문자로 작성했을 경우 특수문자나 한글자만 노출 될 수 있다.
  2. 특수문자를 많이 사용했을 경우 시각장애인 분들을 위한 스크린리더기에 읽히는 내용이 조금 이상하게 변질 될 수 있다.
    그리고 title내용까지 길어진다면, 스크린리더기가 다 읽기전에 아마 페이지를 나가는 경우가 생기지 않을까?
  3. 검색엔진이 사이트를 읽을때는 title을 먼저 읽게 된다.
    title을 읽고 목적에 맞게 인식을 하는데, 검색엔진이 엉뚱하게 사이트를 읽을 수 있다는 문제점이 있다.

이러한 이유들로 title에 들어가는 이름/제목은 간결하고 명료한 것이 가장 좋다.

 

 

 

2. meta tag

 

head의 메타정보를 담은 meta태그는 속성의 값으로 정보를 나타낸다.

<!DOCTYPE html>
<html>
  <head>
    <title>개블리셔</title>
    <meta 속성="값" />
  </head>
  <body></body>
</html>

한마디로 머리(head)속에 입력되어 있는 나(html문서)의 정보(meta)를 말한다.

 

 

1) charset은 페이지의 인코딩에 대한 정보를 담고 있다.

<meta charset="utf-8">

위와 같이 작성이 된 경우 현재 페이지의 인코딩이 utf-8 방식으로 작성되어 있다는 것을 뜻한다.

utf-8은 전세계적인 character집합으로 많은 언어들의 문자들을 포함한다.

한마디로 웹 페이지에서 어떤 문자라도 취급할 수 있다는 것을 의미한다. 국내에서도 가장 많이 쓰인다.

 

 

2) description은 페이지에 대한 설명을 담고있다.

제목 아래 페이지를 소개하는 내용으로, 주로 검색엔진에서 확인이 가능하다.

길이제한은 특별히 없지만 각 검색엔진마다 권장 길이가 존재한다.

예를들면 네이버의 경우 45자 이내를 권장한다 :)

 

<meta name="description" content="페이지 설명" />

 

 

3) keywords는 페이지의 주요 키워드를 담고있다.

키워드들을 나열해서 적어놓으면 검색엔진이 저장해놓았다가 해당 관련 검색어와 키워드를 대조하여 노출시켜준다.

(sns태그와 비슷한 역할)

검색에 많이 노출되기 위해 관련 없는 키워드를 적는 경우도 더러 있는데, 이럴 경우 검색엔진에서 스팸으로 인식하여 노출이 안되거나 최하위에 노출될 수 있으므로 주의해야 한다.

키워드의 개수는 200개 미만으로 제한을 두는 게 좋고 대략 20~30개 정도가 적당한 것 같다.

<meta name="keywords" content="키워드, 키워드, 키워드" />

 

 

4) viewport는 웹 페이지가 사용자에게 보여지는 영역을 조정해주는 meta태그이다.

다양한 기기들이 생겨나면서 생겨난 뷰포트는 스마트 기기 상에서 최초의 페이지를 로딩 할 때 확대정도, 최대 확대 비율, 최소 확대 비율 등을 다룬다.

예를 들어 모바일에서 PC버전인 페이지에 접속하였을 때, 모바일 너비에 맞춰 한화면에 쏙 들어오게 보여질 수 있다.

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

속성

값

초기값

특징

width

 auto | device-width | 1 | 2

  

device-width를 넣었을 때 페이지 너비를 기기의 너비와 동일하게 한다.

height

auto | device-height | 1 | 2

  

device-height을 넣었을 때 페이지 높이를 기기의 높이와 동일하게 한다.

user-scalable

no | yes

yes

사용자가 브라우저 확대 축소를 가능하게 할 것인가 정의한다.

initial-scale

1 ~ 10

1

초기 확대 값

minimum-scale

0 ~ 10

0.25

최소 축소 값

maximum-scaler

0 ~ 10

1.6

최대 확대 값

 

이 외에 author 등 다양한 메타태그 속성들이 있다.

 

 

 

저작자표시 비영리 변경금지 (새창열림)