head는 문서의 내용 자체가 아닌 문서의 내용이 어떤 내용을 담고있는가를 설명하는 정보를 담는 태그다.
meta는 문서에 대한 정보를 기술하는 태그다.
문법
<meta name="" content=""/>
- name
* description : 문서에 대한 설명. 검색엔진에서 중요하게 다룸.
* keywords : description과 비슷. 태그와 같음.
- http-equiv
* Content-Type : 컨텐츠 타입 확인
* refresh : 페이지 이동
예제
- metaexample1.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="다음은 검색 엔진" />
<meta name="keywords" content="다음, HTML, HEAD, META" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
</html>
- metaexample2.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="2;url=https://www.naver.com/">
</head>
</html>
예제 설명
- metaexample1.html
예제를 html 파일에 코딩하여 실행해도 특별히 나오는 화면은 없다. 일반적으로 소스코드를 통해서 문서를 설명하는 예제이다.
- metaexample2.html
예제를 html 파일에 코딩하여 실행하면 2초 뒤에 네이버 웹페이지로 이동한다.
title은 문서의 제목을 정의하는 마크업이고, 제목을 제목 표시줄에 출력해서 문서를 찾는데 도움을 준다. 검색엔진에서 중요한 정보로 취급된다.
예제
<!DOCTYPE html><html>
<head>
<title>네이버</title>
</head>
<body>
네이버는....
</body>
</html>
예제 설명
예제를 html 파일에 코딩하여 실행하면 아래 그림과 같은 웹페이지가 나온다.
head에 title을 추가하여 빨간 박스에 있는 것과 같이 title이 네이버로 설정되었다. body에 설정한 네이버는....도 출력되었다.
'Programming > HTML' 카테고리의 다른 글
| 비밀번호, hidden data, textarea (0) | 2017.12.11 |
|---|---|
| 폼(form), 텍스트 입력 (0) | 2017.12.11 |
| 표 (0) | 2017.12.11 |
| 이스케이핑 (0) | 2017.12.11 |
| iframe, frame (0) | 2017.12.11 |
꼴통보안인