본문 바로가기
Mark Up/HTML

[HTML]HTML5_메타태그(<meta>)

by 썸머워즈 2019. 3. 24.
반응형

메타 태그(<meta>)

메타 태그란 무엇일까?

일반적으로 <head>태그 안에 들어가는 태그로서, 웹 문서의 키워드, 주제, 문자 셋 등을 정의할 때 사용된다.

<body> 태그가 웹 페이지가 담아내려는 정보라면 

<meta> 태그웹 사이트의 내용을 축약해서 나타내어주는 정보라 보면 된다

(보통 검색엔진들이 사이트의 메타 정보들을 이용하여 정보를 찾는다.)

 

메타 태그의 구성은 다음과 같다.

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
 
    //웹사이트 제작시 사용한 툴
    <meta name="generator" content="Edge Code">
    
    //웹 사이트 저작자 표시
    <meta name="author" content="Kyle">
    
    //검색 엔진에서 검색 할 때 키워드
    <meta name="keywords" content="HTML5, CSS3">
    
    //웹사이트 주제
    <meta name="description" content="making">
    
    //문자 셋 표시
    <meta http-equiv="cotent-type" content="text/html;charset=euc-kr">
</head>
<body>
   meta 태그의 구성
</body>
</html>

 

<meta> 태그 안에서 

name과 content 속성을 이용하여 문서가 어떤 내용을 담는지, 문서의 키워드가 무엇인지, 검색엔진 회피 방법 등을 지정할수있고

charset 속성을 이용하여 문자 인코딩 선언 형식을 변경할 수 있고

http-equiv 속성과 content 속성을 사용하여 http request 에 대한 웹 브라우저의 응답 특성을 변경할 수 있습니다.

 

각각의 속성과 값들이 어떻게 쓰이는지 확인해 보자

속성  값  설명 
 name application-name  웹의 이름을 표시 
author  문자의 저자를 표시 
description  문서의 설명 표시 
generator  제작 툴을 표시 
keywords  문서의 키워드를 표시 
http-equiv  content-type  문서의 인코딩을 선언 
default-style  대체 스타일시트를 선언 
refresh  문서의 새로 고침 주기 및 이동을 선언 
content  텍스트  http-equiv나 name의 속성 값을 표시 
charset  문자 셋  문서의 문주 셋을 선언 

(해당 표의 출처 : https://interrupt.tistory.com/5)

 

*참고로 meta 태그의 속성 및 값을은 html4 버전에서도 동일하게 사용할 수 있다.

반응형


댓글

TOP