HTML 문서에서 <head>태그는 <body> 태그와는 다르게 웹페이지에 보이지 않는 내용을 담고 있습니다.
웹페이지의 주된 Content(내용)가 아닌, 해당 웹페이지를 설명해주는 메타데이터가 기록되는 곳이 바로 <head> 태그입니다.
메타데이터란?
메타데이터의 가장 단순한 정의는 데이터들을 위한 데이터라고 하며, 문서의 직접적인 내용이 아닌 문서의 작성자, 문서의 설명, 문서의 대표 이름과 같은 데이터를 설명해주는 데이터의 모음을 뜻한다.
그럼 <head> 태그에서 사용되는 대표적인 기능들을 알아보겠습니다.
1. <title>
문서 전체의 제목을 표현하기 위한 메타데이터, 웹브라우저 탭에 표현되며 다양한 검색 엔진(구글, 야후)에서 검색 결과 요소로 사용된다.
2. <meta>
html에서 메타데이터를 저장하기 위해 기본적으로 제공하는 키워드이다. 여러 가지 속성을 이용하여, 다양한 메타데이터를 지정할 수 있다.
- <meta charset = "uft-8"> : 해당 웹페이지의 문자들을 인코딩할 때 참조하는 문자셋을 설정, UTF-8은 전 세계 거의 모든 언어를 표현할 수 있다.
- <meta name = "description" content = "this is description"> : name 부분에는 해당 메타데이터가 어떠한 메타데이터인지를 표현하고(author 등), content에는 해당 메타데이터의 내용이 들어간다. 날짜, 저자 등을 기입해서 해당 게시글에 대한 정보를 입력할 수 있고 이러한 정보를 자동으로 추출해서 사용할 수 있다. 또한 이러한 메타데이터에 게시글에 대한 키워드를 입력한다면, 검색 엔진에서 보다 효과적으로 노출시킬 수 있다.
3. <link> 태그를 이용한 파비콘(favicon)을 설정
파비콘이란, 웹브라우저에 표시되는 웹사이트, 웹 페이지를 대표하는 작은 아이콘을 뜻한다. html에서는 아래에 태그를 사용해서 해당 웹 페이지의 파비콘을 설정할 수 있다.
<link rel = "shortcut icon" src = "favicon.jpg">
← 웹페이지 주소 왼쪽에 표시되는 작은 아이콘을 파비콘이라고 한다.
4. CSS 및 javascript 연결하기
웹페이지는 해당 웹페이지를 더 아름답게 꾸미기 위해, Html 뿐만 아니라 javascript, CSS를 사용하는데, 이때 <head>에서 연결할 수 있다. CSS는 <link> 태그를 이용해서 항상 <head>에서 이루어지지만, javascript는 반드시 <head>에서 이루어지지는 않는다. javascript는 해당 웹페이지를 모두 로드한 후 읽히는 게 가장 이상적이기 때문이다.
'WEB > HTML, CSS' 카테고리의 다른 글
| rem, em (0) | 2023.09.28 |
|---|---|
| (CSS) Box model, Inline, Block (0) | 2022.06.30 |
| Semantics HTML? (0) | 2022.06.28 |