head란?
head는 웹 페이지의 메타 데이터 포함하는 역할을 하며 body와 다르게 웹 페이지에 표시되지 않는다. 여기서 메타 데이터란, html의 데이터를 구성하는 데이터이며 meta요소를 이용해 적용될 수 있다.
head에 내포될 수 있는 요소
- title: html 문서 전체의 타이틀을 표현하기 위해 사용된다.
예시
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "utf-8">
<title>타이틀</title>
</head>
</html>실행 결과
메타 데이터
메타 데이터는 위에서 언급했듯이 html 내부 데이터를 설명하기 위해 만들어진 것으로 meta 요소의 속성으로 정해져 있으며 다양한 종류의 메타 데이터 속성이 존재한다.
메타 데이터의 종류
- charset: 해당 문서에서 허용하는 언어를 표시하는 역할을 한다. "utf-8"이라는 속성값을 사용할 경우 전 세계의 대부분의 언어가 적용이 가능하므로 가능하면 이 속성값을 사용하는 것이 좋다. 만약에 한국어로 작성하려고 하는데 한국어를 포함하지 않는 속성값을 사용하면 내용이 깨질 수 있다.
- name: 메타 데이터가 가지고 있는 정보의 형태(ex. 이름, 키워드, 문서에 대한 간략한 설명)
- content: 해당 정보에 관한 내용
content는 설명할 정보의 내용을 나타내기 때문에 다른 메타 데이터와 같이 사용되는 편이다.
name에 자주 포함되는 속성값은 "author"(페이지의 저자 기재시), "description"(페이지에 대한 설명 기재시), "keyword"(검색 키워드, keyword와 함께 content에 키워드를 많이 포함시킬 시 검색 엔진에 영향을 줄 수 있었다. 그러나 스팸과 관련된 악용사례로 인해 현재 이 기능은 검색엔진에서 무시되고 있다.) 등이 있다.
example
<meta name = "author" content = "jaejeong">
<meta name = " Description" content ="html 연습용 페이지">
<meta name = "keyword" content = "test, meta_test, html">- http-equiv: 주로 웹 페이지의 리다이렉트(새로고침)시키는데 사용된다. 아래와 같이 작성 시 페이지가 자동으로 새로고침되는 시간을 정할 수 있다.
<meta http-equiv = "refrsh" content = "10">혹은 다른 특정 시간이 지나면 다른 페이지로 전환시켜야 할 경우
<meta http-equiv = "refrsh" content = "10;페이지주소">어떤 메타 데이터들은 특정 사이트(ex:트위터)에서만 고유하게 사용되기도 한다.
초짜 개발자의 개발일지