헤드
페이지에 표시되지 않는 부분. 페이지에 대한 metadata를 포함
제목 달기
<title> : HTML문서 전체의 타이틀. 문서의 컨텐츠 아니다. (<=> <h1>: 페이지 내용물의 제목)
메타데이터(<meta>요소)
데이터를 설명하는 데이터. <meta>요소를 이용한다.
character 인코딩 특정하기
<meta charset="utf-8">"utf-8"대신에 "ISO-8859-1"처럼 직접 설정도 가능
저자와 설명 추가
name : 메타 요소가 어떤 정보의 형태를 가지고 있는가
content: 실제 메타데이터의 컨텐츠
<meta name="author" content="gartenhi">
<meta name="description" content="This content is based on MDN Learning Area"일부 컨텐츠 관리 시스템에는 페이지 작성자 정보를 자동으로 추출해서 사용할 수 있는 기능이 있다.
콘텐츠 관련 키워드를 포함시키면 검색엔진에서 이 페이지를 표시할 확률이 높아진다
맞춤 아이콘 추가
커스텀 아이콘 레퍼런스를 메타 데이터에 추가하고, 특정 콘텐츠에서 이를 보여줄 수 있다.
favicon 추가 방법
- 사이트의 인덱스 페이지와 같은 디렉터리에
.ico포맷의 파일을 저장한다.
(대부분 브라우저는.gif,.png형식의 favicon을 지원하지만, 오래된 브라우저에서는 지원되지 않는 경우가 있다.) HTML <head>에 다음 줄을 추가한다.<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
이 밖에도 다양한 아이콘 타입이 있다.
문서에 CSS, JavaScript 추가하기
<link>와 <script>요소를 이용해 웹 페이지에 CSS나 JavaScript를 적용할 수 있다.
<link>는 항상 문서의 head에 위치한다. rel과 href의 2가지 속성을 내포한다.<link rel="stylesheet" href="style.css"><script>는 head에 들어갈 필요가 없고,</body>태그 바로 앞 문서 본문의 맨 끝에 넣는 것이 좋다. JavaScript를 적용하기 전에 모든 HTML 내용을 브라우저에서 읽었는지 확인하는 것이 좋다.- 스크립트 파일을 직접
<script>안에 넣어줄 수도 있다.
- 스크립트 파일을 직접
<script src="my-js-file.js"></script>
문서의 기본 언어 설정
<html lang="US">
<p>
Korean example: <span lang = "ko">안녕하세요.</span>
</p>
</html>출처: https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML