본문 바로가기

HTML

HTML <meta> 태그

반응형

정의 및 특징

・<meta> 태그는

 해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용한다

 

・<meta> 요소는 <base>, <link>, <script>, <style>, <title> 요소와 같은

 다른 메타데이터 관련 요소들이 나타낼 수 없는

 다양한 종류의 메타데이터를 제공할 때 사용되며

 이렇게 제공된 정보는 브라우저나 검색 엔진, 다른 웹 서비스에서 사용하게 된다

 

・<meta> 요소는

 항상 <head> 요소 내부에 위치해야 한다

 

・만약 name 속성이나 http-equiv 속성이 명시되었다면

 반드시 content 속성도 함께 명시되어야 하며

 반대로 두 속성이 명시되지 않았다면

 content 속성 또한 명시될 수 없다

 

・HTML5에서는 <meta> 요소를 통해

 웹 페이지에서 사용자가 볼 수 있는 영역인 뷰포트(viewport)를

 제어할 수 있도록 name 속성에 viewport 속성값을 제공하고 있다

 

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

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

 

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

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

 

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

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

 

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

<meta http-equiv="refresh" content="5;url=https://rusi0038.tistory.com/11">

 

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

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

 

・HTML과 XHTML에서의 차이점

 HTML에서는 <meta> 태그를 닫지 않지만

 XHTML에서는 다음과 같이 반드시 태그를 닫아야만 한다

<meta charset="UTF-8" />

 

・HTML5에서 변경된 사항

 HTML5에서는 <meta> 요소의 scheme 속성을 더 이상 지원하지 않으며

 문자셋(charset)을 손쉽게 정의할 수 있는

 charset 속성이 새롭게 추가되었다

HTML 4.01 : <meta http-equiv="content-type" content="text/html; charset=UTF-8">
HTML5     : <meta charset="UTF-8">

 

 

지원하는 브라우저

지원함 지원함 지원함 1.0 지원함 지원함

 

속성

속성명 속성값 설명
charset 문자셋 해당 문서의 문자 인코딩 방식을 명시한다
HTML5에서 새롭게 추가된 속성
content 텍스트 name 속성이나 http-equiv 속성과 관련된 값(value)을 명시한다
http-equiv content-type
default-style
refresh
content 속성에 명시된 값에 대한 HTTP 헤더를 제공한다
name application-name
author
description
generator
keywords
viewport
메타데이터를 위한 이름을 명시한다
scheme 포맷 또는 URI content 속성의 속성값을 해석하는데 사용할 스키마(scheme)를 명시한다
HTML5에서는 더 이상 지원하지 않는다

 

예제

<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="RusiStory">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML meta tag</title>
</head>

 

 

■HTML 태그 레퍼런스
HTML 태그 레퍼런스 - MAIN 돌아가기

 

 

반응형

'HTML' 카테고리의 다른 글

HTML <body> 태그  (0) 2023.04.07
HTML <title>  (0) 2023.04.07
HTML <head> 태그  (0) 2023.04.06
HTML <html> 태그  (0) 2023.04.05
HTML <!DOCTYPE>  (0) 2023.04.05