head & meta 태그
1. head
- HTML의 head는 페이지를 열 때 웹 브라우저에 표시되지 않는다.
- head는
<title>같은 페이지나, CSS의 링크, 파비콘, 그리고 다른 메타데이터(작성자, 중요한 키워드와 같은 HTML에 대한 내용)를 포함한다.
2. 구성
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My test page</title> </head> <body> <p>This is my page</p> </body> </html>
3. 메타데이터: meta 요소
- 메타데이터는 데이터를 설명하는 데이터이다. 그리고 HTML에서 문서에 공식적으로 메타데이터를 적용하는 방법이 있다.
1) 문서의 character 인코딩을 특정하기
<meta charset="utf-8">
- 문서에서 허용하는 문자 집합(character set) 인코딩에 대해 표기, utf-8은 전세계적인 charater 집합으로 많은 언어와 문자들을 포함한다.
2) name과 content 속성
<meta name="author" content="Chris Mills"> <meta name="description" content="The MDN Learning Area aims to provide complete beginners to the Web with all they need to know to get started with developing web sites and applications.">
- name은 메타 요소가 어떤 정보의 형태를 갖고 있는지 알려준다.
- content는 실제 메타데이터의 컨텐츠이며 페이지에 관련 키워드를 포함시키는 것은 검색엔진에서 이 페이지가 더 많이 표시될 가능성이 있다.
(이러한 활동을 Search Engine Optimization(SEO)라고 한다.)
3) CSS와 Javascript 적용하기
<link rel="stylesheet" href="my-css-file.css">
- link는 항상 문서의 head 부분에 위치한다. 이것은 두 가지 속성을 취하는데, rel="stylesheet", 즉 문서의 스타일 시트임을 나타냄과 동시에 스타일 시트 파일의 경로를 포함하는 href를 내포한다.
<script src="my-js-file.js"></script>
- script는 head에 들어갈 필요가 없다. 닫는 태그의 body 바로 앞, 문서의 본문의 맨 끝에 넣는 것이 좋으며, 적용하기 전에 모든 html 내용을 브라우저에서 로딩 됐는지 확인하는 것이 좋다.
(액세스 과정에서 javascript가 아직 존재하지 않는 요소라고 판단하며 에러가 날 수 있다.)
4) 문서의 기본 언어 설정
<html lang="en-US">
- HTML 문서는 언어가 설정되어 있으면 검색 엔진에 의해 보다 효과적으로 색인화 되며(예를 들어 언어 별 결과에 올바르게 표시되도록) 화면 판독기를 사용하여 시각장애가 있는 사용자에게 유용하다.
(숫자 6이 프랑스어와 영어에서 모두 존재하지만 발음이 다르기 때문이다!)
<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>
- 문서의 하위 섹션을 다른 언어로 인식하도록 설정할 수도 있다.
- 위 코드는 ISO 639-1 표준을 따른다.
참고사이트 : https://en.wikipedia.org/wiki/ISO_639-1
5) 제목 달기
<title>My test page</title>
- title은 HTML 문서 전체의 타이틀 표현하기 위한 메타데이터이다.
- title 요소는 사이트를 북마크할 때, title의 내용물을 추천하는 북마크 이름으로 사용하기도 한다.
- title은 검색 결과로 사용되기도 한다.
Hello World!