기억하기 위한 기록

Meta 태그란 무엇인가? 본문

Front-end/html

Meta 태그란 무엇인가?

곽구 2020. 11. 23. 18:33

- <meta>태그는 해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용한다.

 

<meta> 요소는 <base>, <link>, <script>, <title>, 요소와 같은 다른 메타데이터 관련 요소들이 나타낼 수 없는 다양한 종류의 메타 데이터를 제공할 때 사용되며, 이렇게 제공된 정보는 브라우저나 검색엔진, 다른 웹 서비스에서 사용하게 된다.

 

이러한 <meta>요소는 언제나 <head>요소 내부에 위치해야 한다.

 

만약 name 속성이나 http-equiv속성이 명시되었다면 반드시 content 속성도 함께 명시되어야 하며, 

두 속성이 명시되지 않았다면 content 속성 또한 명시될 수 없다.

 

 

HTML5에서는 <meta>요소를 통해 웹 페이지에서 사용자가 볼 수 있는 영역인 뷰포트(viewport)를 제어할 수 있도록 name 속성에 viewport속성값을 제공하고 있습니다.

 

 

1) 검색 엔진을 위한 키워드(keyword)를 정의하는 예제

<meta name="keyword" content="HTML, meta, tag, element, reference">

 

2) 웹 페이지에 대한 설명(descrtiption)을 정의하는 예제

<meta name="description" content="HTML meta tag page">

 

3) 문서의 저자(author)를 정의하는 예제

<meta name="author" content="TCPSchool">

 

4) 5초뒤에 다른 페이지로 리다이렉트 (redirect)시키는 예제

<meta http-equiv="refresh" content="5:url="http://www.tcpschool.com">

 

) 모든 장치에서 웹사이트가 잘 보이도록 뷰포트(viewport)를 설정하는 예제

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

<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>

 

<p><meta> 요소는 해당 문서의 다양한 메타데이터를 정의할 때 사용합니다.</p>

'Front-end > html' 카테고리의 다른 글

[잘난웹디] 한국소비자원 웹사이트 제작 3강 section_main 부분  (0) 2021.01.19
[잘난웹디] 한국소비자원 웹사이트 2강_메인페이지의 헤더영역  (0) 2021.01.19
[잘난웹디] 웹퍼블리싱 기초강좌 / 레이아웃1강  (0) 2021.01.12
<a>태그와 #  (0) 2020.11.30
<HTML> 기초 (드림코드 엘리 내용 정리) 1-4  (0) 2020.11.03
'Front-end/html' Related Articles more