[HTML] head의 요소들

html은 일반적으로 크게 head와 body로 나뉜다. head에는 보통 겉으로 잘 드러나지 않는 웹사이트에 관한 정보인 메타데이터(metadata)들이 들어가는데, 그 중에 어떤 요소(element)들이 있는지 일부를 알아보겠다.

title

<title>제목명</title>

title은 웹사이트의 제목(최상단에 뜨는 이름)을 설정한다.

meta

meta는 웹사이트에 대한 다양한 메타데이터(metadata)를 정의할 때 사용한다. 부여되는 속성(attribute)에 따라 다양한 정보(메타데이터)를 설정한다.

• 빈 요소이다.

charset

<meta charset="문자 인코딩 방식">

문자 인코딩 방식을 지정한다. 일반적으로 한국에선 한글 지원을 위해 UTF-8이 가장 많이 사용된다.

문자 인코딩(Encoding)이란?

어떤 숫자(2진수)가 어떤 문자에 해당하는지 정해놓은 규칙. 아스키코드/유니코드 등이 여기에 해당한다.

name

<meta name="이름" content="값">

아래의 content와 쌍으로 쓰여 name-content로 쓰면 문서의 메타데이터를 name-content 쌍으로 제공한다.

자주 쓰이는 이름

• keyword : 검색 엔진의 키워드
• description : 문서의 설명
• author : 문서의 저자

content

단독으로 쓰이지는 않으며 위의 name이나 http-equiv 등의 속성과 같이 쓰인다. 해당 특성의 값을 담는다.

link

link는 html 파일 외부 리소스를 가져올 때 사용한다.

• 빈 요소이다.

href

<link href="주소">

연결한 리소스의 절대 및 상대 URL, 상대 경로 등을 적을 수 있다.

rel

<link rel="관계" href="주소">

연결한 리소스와의 관계(relationship)을 나타낸다.

자주 쓰이는 관계

• stylesheet : 스타일시트(css 파일)
• icon : 파비콘(favicon)(창 상단에 뜨는 아이콘)

style

<style>
  [CSS 스타일]
  ...
</style>

style은 CSS 스타일을 작성할 때 쓰인다. 태그 안쪽에 CSS 문법에 맞춰 스타일을 지정해주면 된다. 꼭 head에만 사용할 수 있는 것은 아니나 일반적으로 head에 작성하는 것이 권장된다.