Reference/HTML

<meta> 태그는 문서의 메타 정보를 설정합니다.

by @webs 2022. 11. 11.

<meta>

특징	설명
요소	-
닫는 태그	적용
버전	HTML4
시각적 표현	없음
사용성	★★★★★

정의(Definition)

<meta> 태그는 문서의 메타 정보를 설정합니다.
<meta> 태그는 표면적으로 표시되지 않지만, 문서에 대한 정보를 제공합니다.
<meta> 태그는 사이트에 대한 설명, 키워드, 저자 등 여러가지 정보를 제공합니다.
<meta> 태그는 검색엔진 및 키워드 노출에 대한 정보를 제공합니다.
<meta> 태그는 <head> 요소 안에만 설정합니다.

문서와 관련된 태그(Document Related Tag)

<html> 태그는 문서의 최상단 요소를 나타냅니다.
<head> 태그는 문서 정보에 해당하는 내용을 설정합니다.
<body> 태그는 문서 본문에 해당하는 내용을 설정합니다.
<base> 태그는 문서의 기본 URL을 설정합니다.
<link> 태그는 문서의 외부 리소스를 설정합니다.
<meta> 태그는 문서의 메타 정보를 설정합니다.
<style> 태그는 문서의 스타일 정보를 설정합니다.
<title> 태그는 문서의 제목을 설정합니다.

섹션과 관련된 태그(Section Related Tag)

<main> 태그는 문서의 주요 콘텐츠 섹션을 설정합니다.
<section> 태그는 주제별 그룹의 콘텐츠 섹션을 설정합니다.
<article> 태그는 문서의 독립적인 컨텐츠 섹션을 설정합니다.
<aside> 태그는 주요 콘텐츠의 보조적 컨텐츠 섹션을 설정합니다.
<header> 태그는 문서의 소개 및 메뉴 그룹 컨텐츠 섹션을 설정합니다.
<nav> 태그는 문서에 대한 메뉴 링크를 제공하는 섹션을 설정합니다.
<footer> 태그는 문서 관련 정보 및 관련 링크 콘텐츠 섹션을 설정합니다.
<address> 태그는 문서 관련 연락처 콘텐츠 섹션을 설정합니다.
<h1>~<h6> 태그는 각 섹션의 제목을 설정합니다.

속성(Property)

	속성	값(예)	설명	버전
글로벌 속성	accesskey	accesskey = "a"	키보드 단축키 힌트를 제공합니다.	-
	autocapitalize	autocapitalize = "off"	텍스트를 자동으로 대문자로 변환할지 여부를 설정합니다.	-
	autofocus	autofocus	문서가 로딩되면 해당 요소에 포커서를 설정합니다.	-
	contenteditable	contenteditable = "true"	사용자가 콘텐츠를 편집할 수 있는지 설정합니다.	-
	class	class = "className"	클래스 이름을 설정합니다.	-
	data-*	data-name = "name"	사용자가 지정하여 속성을 설정할 수 있습니다.	-
	dir	dir = "rtl"	요소 글씨의 방향을 설정합니다.	-
	draggable	draggable = "true"	드래그 사용할 수 있는지 설정합니다.	-
	enterkeyhint	enterkeyhint = "next"	엔터 키에 대한 힌트를 설정합니다.	-
	hidden	hidden	요소를 숨김 처리할 수 있습니다. hidden 요소는 렌더링하지 않습니다.	-
	id	id = "name"	고유 식별자 아이디를 설정합니다. CSS나 Script에서 사용합니다.	-
	inputmode	inputmode = "email"	브라우저가 제공해야 하는 가상 키보드 설정을 알려줍니다	-
	itemid	itemid = "name"	아이템 요소의 고유 식별자 아이디를 설정합니다.	-
	itemprop	itemprop = "name"	아이템 요소의 고유 식별자 속성을 설정합니다.	-
	itemref	itemref = "name"	아이템 요소의 고유 식별자를 연결합니다.	-
	itemscope	itemscope	아이템 요소의 범위를 설정합니다.	-
	lang	lang = "ko"	요소의 언어를 설정합니다.	-
	spellcheck	spellcheck = "true"	요소의 맞춤법 검사 여부를 설정합니다.	-
	style	style = "margin: 0"	요소의 적용할 CSS 속성을 설정합니다.	-
	tabindex	tabindex = "0"	요소의 탭 인덱스를 설정합니다.	-
	title	title = "titleName"	요소의 타이틀을 설정합니다.	-
	translate	translate = "no"	요소의 번역 여부를 설정합니다.	-
개별 속성	charset	charset = "UTF-8"	페이지 인코딩 언어를 설정합니다.	-
	content	content = "IE=edge"	메다테이터 정보의 내용을 설정합니다	-
	http-equiv	http-equiv = "X-UA-Compatible"	웹 브라우저가 서버에 전달하는 속성을 설정합니다	-
	name	name = "acthor"	메타데이터 정보 이름을 설정합니다.	-

예제1(Sample)

메타데이터를 적용한 예제입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>제목!</title>

    <-- 페이지 인코딩 설정(HTML4 버전) -->
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <-- 페이지 인코딩 설정(HTML5 버전) -->
    <meta charset="UTF-8">        

    <-- 페이지 컴파일 설정(브라우저 호환성 설정) -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">     

    <-- 모바일 화면 비율 설정 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    

    <-- 웹 사이트 작가 설정 -->
    <meta name="acthor" content="webstroyboy">

    <-- 웹 사이트 설명 설정 -->
    <meta name="description" content="포트폴리오를 위한 레퍼런스 사이트입니다. ">
    
    <-- 웹 사이트 키워드 설정 -->
    <meta name="keywords" content="포트폴리오, 웹스토리보이, 웹쓰, 사이트제작, 사이트만들기, 프로트앤드">
    
    <-- 웹 사이트 검색엔진 설정 -->
    <meta name="robots" content="all">

    <-- 웹 사이트 제작 날짜 설정 -->
    <meta name="Date" content="2022-11-15T07:40:31+08:00">

    <-- 3초 뒤에 페이지 다시 로딩 설정 -->
    <meta http-equiv="refresh" content="3;url=https://webstoryboy.co.kr">

    <-- 정보 공유를 할 정보를 설정 -->
    <meta property="og:type" content="article" />
    <meta property="og:title" content="웹스토리보이" />
    <meta property="og:url" content="https://webstoryboy.co.kr/" />
    <meta property="og:image" content="../assets/ico/favicon.png" />
    <meta property="og:site_name" content="웹스토리보이" />
    <meta property="og:description" content="웹과 관련된 정보를 제공합니다." />

    <-- 정보 공유(트위터)를 할 정보를 설정 -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@webstoryboy" />
    <meta name="twitter:title" content="웹스토리보이" />
    <meta name="twitter:description" content="웹과 관련된 정보를 제공합니다." />
    <meta property="twitter:image" content="../assets/ico/favicon.png" />
    
</head>
<body>
    
</body>
</html>