| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 | 31 |
- MariaDB
- useEffect
- reactPortals
- 프로그래머스
- realDOM
- SQL
- 드림코딩
- 변수타입
- 제어컴포넌트
- ForwardRefs
- useContext
- CSS
- vscode
- eventloop
- useState
- flexbox
- 리액트작동원리
- React
- mysql
- reactDOM
- useReducer
- 재귀함수
- ConnectBy
- virtualDOM
- hoisting
- BIND
- useCallback
- js
- useImperativeHandle
- 비제어컴포넌트
- Today
- Total
SOOM_BLOG [숨숨 블로그]
HTML <META>란? 본문
HTML <meta> 태그
정의 및 특징
<meta> 태그는 해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용.
<meta> 태그는 metadata(정보에 대한 정보를)제공하는 역할.
<meta> 요소는 <base>, <link>, <script>, <style>, <title> 요소와 같은 다른 메타데이터 관련 요소들이 나타낼 수 없는 다양한 종류의 메타데이터를 제공할 때 사용되며, 이렇게 제공된 정보는 브라우저나 검색 엔진, 다른 웹 서비스에서 사용하게 됨.
- <meta> 태그는 항상 <head> 태그 내부에 위치해야 함
- <meta> 태그는 보통 name과 value 쌍으로 사용됨.(name 속성이나 http-equiv 속성이 명시되었다면 반드시 content 속성도 함께 명시되어야 하며, 반대로 두 속성이 명시되지 않았다면 content 속성 또한 명시될 수 없음.)
- HTML5에서는 <meta> 요소를 통해 웹 페이지에서 사용자가 볼 수 있는 영역인 뷰포트(viewport)를 제어할 수 있도록 name 속성에 viewport 속성값을 제공하고 있음.
1) keyword(문서에 대한 핵심어를 쉼표로 분리하여 표시, 문서에 대한 정보를 검색 엔진에 제공) 예제
<meta name="keyword" content="HTML, meta, tag, element, reference">
2) description(문서에 대한 설명, 검색 엔진은 검색 설명과 함께 이 설명을 가져감) 예제
<meta name="description" content="HTML meta tag page">
3) author(저자 이름) 예제
<meta name="author" content="TCPSchool">
4) redirect(5초 뒤에 다른 페이지로 리다이렉트 시킴) 예제
<meta http-equiv="refresh" content="5;url=http://www.tcpschool.com">
5) viewport(모든 장치에서 웹 사이트가 잘 보이도록 함) 예제
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6) generator(문서 생성하기 위해 사용된 sw), application-name(app이름)등 있음.
예제
<head>
<meta charset="UTF-8">
<meta name="keyword" content="HTML, meta, tag, element, reference">
<meta name="description" content="HTML meta tag page">
<meta name="author" content="TCPSchool">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML meta tag</title>
</head>
지원하는 브라우저 및 버전
| 태그명 | chrome | edge | ie | firefox | safari | opera |
|---|---|---|---|---|---|---|
| <meta> | 지원함 | 지원함 | 지원함 | 1.0 | 지원함 | 지원함 |
HTML5에서 변경된 사항
HTML5에서는 <meta> 요소의 scheme 속성을 더 이상 지원하지 않으며, 문자셋(charset)을 손쉽게 정의할 수 있는 charset 속성이 새롭게 추가되었습니다.
HTML 4.01 : <metahttp-equiv="content-type"content="text/html; charset=UTF-8">
HTML5 : <metacharset="UTF-8">
HTML과 XHTML에서의 차이점
HTML에서는 <meta> 태그를 닫지 않지만, XHTML에서는 다음과 같이 반드시 태그를 닫아야만 합니다.
<meta charset="UTF-8" />
사용할 수 있는 속성
html5 : HTML5에서 새롭게 추가된 속성
| 속성명 | 속성값 | 설명 | |
|---|---|---|---|
 |
문자셋 |
해당 문서의 문자 인코딩 방식을 명시함. |
|
|
|
텍스트 |
name 속성이나 http-equiv 속성과 관련된 값(value)을 명시함. |
|
|
content-type default-style refresh |
content 속성에 명시된 값에 대한 HTTP 헤더를 제공함. |
||
|
application-name author description generator keywords viewport |
메타데이터를 위한 이름을 명시함. |
||
| scheme |
포맷 또는 URI |
content 속성의 속성값을 해석하는데 사용할 스키마(scheme)를 명시함. HTML5에서는 더 이상 지원하지 않음. |
DOM 인터페이스
|
interface HTMLMetaElement : HTMLElement { attribute DOMString name; attribute DOMString httpEquiv; attribute DOMString content; }; |