html/css 독학하기

코스 전체목록

닫기

meta

설명

The HTML Meta Element (<meta>) represents any metadata information which cannot be represented using one of the other meta-related element ( <base>, <link>, <script>, <style> or <title>). According to the attributes set, the kind of metadata can be one of the following:

HTML Meta 요소(<meta>)는 메타에 관한 다른 요소(<base>,<link>,<script>,<style>,<title>)를 사용하여 표현할 수 없는 메타데이터 정보를 의미한다. 속성 모음에 따르면, 메타데이터의 종류에는 다음이 있다:

  • if the name is set, a document-level metadata, applying to the whole page;
  • if the http-equiv is set, a pragma directive, i.e. information given to the webserver on how the webpage should be served;
  • if the charset is set, a charset declaration, i.e. the charset used for the serialized-form of the webpage; HTML5
  • if the itemprop is set, a user-defined metadata, transparent for the user-agent as the semantic of the metadata is user-specific. HTML5Unimplemented
     
  • name 속성에 값을 지정한 경우에 메타데이터는 문서 단위이며, 전체 페이지에 적용된다;
  • http-equiv 속성에 값을 지정한 경우에 메타데이터는 pragma directive이다. 즉 웹페이지를 어떻게 serve해야 하는지에 대한 정보가 웹서버에 전달된다. 
  • charset 속성에 값을 지정한 경우, 메타데이터는 charset 선언정보이다. 즉 웹페이지의 serialized-form에 쓰이는 charset이 무엇인지 선언해주는 역할을 한다; (HTML5)
  • itemprop속성에 값을 지정한 경우, 메타데이터는 유저가 정의한 메타데이터이다. (이 부분 잘 모르겠네요~) (HTML 아직 구현 안됨) 

 

Usage Context

Permitted content None, this is a void element.
Tag omission As it is a void element, the start tag must be present and the end tag must not be present
Permitted parent elements any element that accept metadata elements
Normative document HTML5, section 4.2.5 (HTML4.01, section 7.4.4.2)

속성

이 엘리먼트는 전역속성을 지원한다.

 charset - HTML5

This attribute declares the character encoding used of the page. It can be locally overridden using the lang attribute on any element. This attribute is a literal string and must be one of the preferred MIME name for a character encoding as defined by the IANA. Though the standard doesn't request a specific character encoding, it gives some recommendations about it: Authors are encouraged to use UTF-8.

이 속성은 페이지에서 사용한 문자 인코딩이 무엇인지 선언해준다. 페이지 내에서 로컬에서 오버라이드를 하려면 요소의 lang 속성값을 지정해주면 된다. 이 속성은 literal string이며, IANA에서 정의한 문자 인코딩용 MIME 이름 중 하나여야 한다. 표준에 따르면 특정 문자 인코딩을 써야 하는 것은 아니지만, 권고하는 문자 인코딩이 있기는 하다. 웹페이지 저작자는 UTF-8을 쓰는 것을 권한다. 
 

  • Authors should not use ASCII-incompatible encodings (i.e. those that don't map the 8-bit code points 0x20 to 0x7E to the Unicode 0x0020 to 0x007E code points) as these represent a security risk: browsers non supporting them may interpret benign content as HTML Elements. This is the case of at least the following charsets: JIS_C6226-1983, JIS_X0212-1990, HZ-GB-2312, JOHAB, the ISO-2022 family, and the EBCDIC family.
  • Authors must not use CESU-8, UTF-7, BOCU-1 and SCSU, also falling in that category and not intended to be used on the web. Cross-scripting attacks with some of these encodings have been documented.
  • Authors should not use UTF-32 as not all HTML 5 encoding algorithm can distinguish it from UTF-16.
     
  • 웹저작자는 ASCII와 호환안되는 인코딩은 사용하지 말아야 한다. (즉, 8비트 코드포인트 0x20부터 0x7E를 유니코드 0x0020부터 0x007E 코드포인트로 매핑하지 못하는 인코딩). 왜냐하면 이들을 사용하면 보안 관련 문제가 있기 때문이다: 이들 인코딩을 지원하지 않는 브라우저에서는 이 코드를 내용으로 해석할 수도 있다. 적어도 다음의 charset의 경우에는 그러하다: JIS_C6226-1983, JIS_X0212-1990, HZ-GB-2312, JOHAB, the ISO-2022 family, and the EBCDIC family.

Notes:

주의:

  • The declared character set must match the one of the page. It is pointless, and will lead to a poor user experience, to declare an erroneous character set.

  • 선언한 문자 세트는 페이지의 문자 세트와 일치해야 한다. 잘못된 문자 세트를 선언하면 사용자에게 불편을 일으킬 것이다. 

  • This <meta> element must be inside the <head> element and within the 512 first bytes of the page, as some browsers only look at these first bytes before choosing a character set for the page.

  • <meta> 요소는 <head> 요소 안에 들어 있어야 하며, 해당 페이지의 최초 512 바이트 이내에 위치해야 한다. 왜냐하면 몇몇 브라우저는 웹페이지의 문자 세트를 찾을 때에 최초 512바이트 내에서 탐색하기 때문이다.

  • This <meta> element is only a part of the algorithm to determine the character set of a page that browsers apply. Especially, the HTTP Content-Type header and any BOM elements have precedence over this element.

  • <meta>요소는 브라우저가 페이지의 문자 세트를 결정하는알고리즘의 일부분이다. 특히 HTTP Content-Type 헤더와 BOM 요소는 <meta>요소에 대해 우선적으로 적용된다. 

  • It is good practice, and strongly recommended, to define the character set using this attribute. If no character set is defined for a page, several cross-scripting techniques may become practical to harm the page user, like the UTF-7 fallback cross-scripting technique. Always setting this meta will protect against these risks.

  • This <meta> element is a synonym for the pre-HTML5 <meta http-equiv="Content-Type" content="text/html; charset=IANAcharset"> where IANAcharset corresponds of the value of the equivalent charset attribute. This syntax is still allowed, although obsolete and no more recommended.

 content

This attribute gives the value associated with the http-equiv or name attribute, depending of the context.

content

이 속성은  http-equiv or 이름의 속성, 문맥의 의존성과 연관되어 값이 주어진다.

http-equiv

This enumerated attribute defines the pragma that can alter servers and user-agents behavior. The value of the pragma is defined using the content and can be one of the following:

http-equiv

열거된 속성은 user-agents와 서버의 행동을 변경할 수 있는 pragma(컴파일러 지시어)를 정의한다. 이 pragma의 값은 컨텐츠를 사용중에 정의된고  따라오는 항목중 하나를 할수 있다:

content-language - Obsolete

This pragma defines the default language of the page.

Usage note:
do not use this pragma, as it is no more recommended. Use the global lang attribute on the <body> element instead.

 

content-language - 폐지됨

지시어(pragma)는 페이지의 기본 언어로 정의된다.

Usage note:
이것은 더 이상 추천하지 않음으로서, 이 지시어(pragma)를 사용하지 마라.  대신 <body> 엘레먼트에서 global lang 속성를 사용하라.

content-type - Obsolete

This attribute defines the MIME type of the document, eventually followed by its character set. It follows the same syntax as the HTTP content-type entity-header field, but as it is inside an HTML Element, most value are not  possible. Therefore the valid syntax for its content is the literal string 'text/html' eventually followed by a character set with the following syntax: '; charset=IANAcharset' where IANAcharset is the preferred MIME name for a character set as defined by the IANA

content-type - 페지됨

이 속성은 문서의 MIME 타입, 종내 따라오는 문서의 문자셋을 지정한다. 이것은 HTTP content-type entity-header field처럼 같은 문법을 따른다. 그러나 HTML Element안에 처럼, 대부분 값은 지원하지 않는다. Therefore the valid syntax for its content is the literal string 'text/html' eventually followed by a character set with the following syntax: '; charset=IANAcharset' where IANAcharset is the preferred MIME name for a character set as defined by the IANA

Usage note :

  • Do not use this pragma, as it is no more recommended. Use the charset attribute on the <meta> element instead.

  • As the <meta> may not be used to change the type of a document in an XHTML document, or in an HTML5 document following the XHTML syntax, never set set MIME type to an XHTML MIME type that way. It would be incorrect.

  • Only HTML document can use the content-type, so most of it is redundant: that's why it has been obsoleted and replaset by the charset attribute.

default-style

This pragma specifies the preferred stylesheet to be used on the page. The content attribute must contains the id of a <link> element whose href attribute links to a CSS stylesheet, or the id of a <style> element which contains a CSS stylesheet.

refresh

This pragma specifies: 

  • the number of seconds until the page should be reloaded, if the content attribute contains only a positive integer number;
  • the number of seconds until the page should be redirected to another, if the content attribute contains a positive integer number followed by the string ';url=' and a valid URL.

set-cookie - Obsolete

This pragma defines a cookie for the page. Its content must follows the syntax defines in the IETF HTTP Cookie Specification.

Note: Do not use this pragma as it is obsolete. Use the HTTP header set-cookie instead.

name

This attribute defines the name of a document-level metadata. It should not be set if one of the attribute itemprop , http-equiv or charset is also set.
 This document-level metadata name is associated with a value, contained by the content attribute. The possible values for the name element are, with their associated value stored via the content attribute:

  • application-name, defining the name of the web application running in the webpage;

Note:
 ◦ browsers may use this to identify the application. It is different from the <title> element, which usually consist of  the application name but may also contain specific information like the document name or a status;
 ◦ simple webpages shouldn't defines the application-name meta.

  • author, defining, in a free format, the name of the author of the document;
  • description, containing a short and accurate summary of the content of the page. Several browsers, among them Firefox and Opera, use this meta as the default description of the page when bookmarked;
  • generator, containing, in a free format, the identifier to the software that generated the page;
  • keywords, containing, as strings separated by commas, relevant words associated with the content of the page.

The attribute may also have a value taken from the extended list defined on WHATWG Wiki MetaExtensions page. Also none has been formally accepted yet, a few commonly used names are among the proposals:

  • creator, defining, in a free format, the name of the creator of the document. Note that it can be the name of the institution. If there are more than one, several <meta> element should be used;
  • googlebot, which is a synonym of robots, but is only followed by Googlebot, the indexing crawler for Google;
  • publisher, defining, in a free format, the name of the publisher of the document. Note that it can be the name of the institution;
  • robots, defining the behavior that cooperative crawlers should have with the page. It is a comma-separated list of values taken in the following list:

Values for the content of <meta name="robots">

Value Description Used by
index Allows the robot to index the page All
noindex Prevents the robot to index the page All
follow Allows the robot to follow the links on the page All
nofollow Prevents the robot to follow the links on the page All
noodp Prevents the usage of the Open Directory Project description, if any, as the description of the page in the search engine results page

Google, Yahoo, Bing

noarchive Prevents the search engine to cache the content of the page Google, Yahoo
nosnippet Prevents the display of any description of the page in the search engine results page Google
noimageindex Prevents this page to appear as the referring page of an indexed image Google
noydir Prevents the usage of the Yahoo Directory description, if any, as the description of the page in the search engine results page Yahoo
nocache Synonym of noarchive Bing

Notes:

◦Only cooperative robots will follow the rules defined by the robots name. Do not expect to keep e-mail harvesters at bay with this
◦The robot still needs to access the page in order to read the meta value. If you want to keep them at bay, for example to prevent bandwidth consumption, use a robots.txt file instead (or in complement).
◦If you want to remove the page of an index, changing the meta to noindex will work, but only when the robot visit the page again. Be sure not to prevent such visit, via the robots.txt file for example. Some search engines have developers tools allowing a quick removal of some page.
◦Some possible values are mutually exclusive, like using index and noindex, or follow and nofollow, at the same time. In these case the behavior of the robot is undefined, and may vary from one to the other. So avoid these cases.
◦Some search engine crawler robots, like those of Google, Yahoo Search or Bing, supports the same values on an HTTP directive, X-Robot-Tags: this allows to use these pragma on non-HTML documents, like images.

  •  slurp, which is a synonym of robots, but is only followed by Slurp, the indexing crawler for Yahoo Search;

Finally a few names are in common use, though not in progress of being standardized:

  • viewport, which gives hints about the size of the initial size of the viewport. This pragma is used by several mobile devices only.

Values for the content of <meta name="viewport">

Value Possible values Description
width a positive integer number or the literal device-width defines the width, in pixels, of the viewport
heigth a positive integer number of the literal device-height defines the height, in pixels, of the viewport
initial-scale a positive number between 0.0 and 10.0 defines the ratio between the device width (device-width in portrait mode or device-height in landscape mode) and the viewport size.e
maximum-scale a positive number between 0.0 and 10.0 defines the maximum value of the zoom; it must be greater or equal to the minimum-scale or the behavior is underterminate.
minimum-scale a positive number between 0.0 and 10.0 defines the minimum value of the zoom; it must be smaller or equal to the maximum-scale or the behavior is undeterminate.
user-scalable a boolean value (yes or no) If set to no, the user is not able to zoom or in the webpage. Default value is yes.

Notes:

◦ Though not standardized, this attribute is used by different mobile browsers like Safari Mobile, Firefox for Mobile or Opera Mobile.
◦ The default values may change from one device, and browser, to another
◦ To learn about this pragma in Firefox for Mobile, see this article.

scheme - Obsolete

This attribute defines the scheme in which the metadata is described. A scheme is a context leading to the correct interpretations of the content value, like a format.

Notes:
Do not use this attribute as it has been deprecated. There is no replacement for it as there was no real usage for it. Omit it altogether.

예제

<!-- Defining the charset in HTML4 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- In HTML5 -->
<meta charset="utf-8">

<!-- Redirect page after 3 seconds -->
<meta http-equiv="refresh" content="3;url=http://www.mozilla.org/">

DOM Interface

This element implements the HTMLMetaElement interface.

호환성

Desktop
기능 구글크롬 파이어폭스Gecko) 인터넷 익스플로러 Opera Safari
기본적인 지원 지원 지원 지원 지원 지원
Mobile
기능 안드로이드 파이어폭스 모바일(Gecko) 인터넷 익스플로러 모바일 오페라 모바일 사파리 모바일
기본적인 지원          

참고

댓글

댓글 본문
버전 관리
happydeveloper
현재 버전
선택 버전
graphittie 자세히 보기