<meta>는 HTML 문서(웹 페이지)에 관한 정보(표시 방식, 제작자, 문자 인코딩 방식 등)를 검색 엔진이나 브라우저에 제공함. <title>, <link>, <style>, <script>에서 나타낼 수 없는 기타 모든 정보들을 표시.

속성

• charset 문자 인코딩 방식(텍스트가 출력되는 방식)을 설정. HTML 문서 내에 작성된 모든 문자들이 화면에 어떻게 출력될지 정의함. UTF-8, EUC-KR 등. 이전에는 EUC-KR이 많이 사용되던 추세였으나 최근에는 UTF-8을 선호함. 문자 인코딩 방식을 설정하는 것이기 때문에 charset 속성을 나타내는 <meta>는 보통 <title>보다 앞에 작성함.

• content http-equiv 또는 name 속성의 값을 지정.

• http-equiv 서버/사용자의 작동방식을 변경할 수 있는 지시 사항을 명시. 지시 사항은 content 속성에 정의. HTTP 응답 헤더 제공. 대표적인 예로 Internet Explorer 브라우저에서 현재의 웹 사이트가 어떤 버전에 최적화되어 나올 수 있는지에 대한 렌더링 방식을 명시할 수 있음.

• name 메타데이터의 이름(정보의 종류)을 정의. name과 content를 함께 사용하면 문서의 메타데이터를 이름-값 쌍으로 제공할 수 있음(name=이름, content=값). name 속성을 사용하는 경우 http-equiv을 사용할 수 없고 http-equiv 속성 사용 시에는 name 속성을 사용할 수 없음.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Internet Explorer에서 렌더링될 때 최신의 Explorer 렌더링 방식으로 화면에 출력되도록 설정. Internet Explorer 지원 시 이 코드를 작성하는 것이 좋음.

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

반응형 웹 사이트 제작 시 필요. viewport는 화면에 어떤 정보를 렌더링하기 위한 영역 설정 시 필요한 정보의 종류를 나타냄. 웹 페이지 화면에 보이는 전체 영역이 viewport에 해당. 화면에 렌더링되는 영역을 어떤 방식으로 선언할 것인지 명시하는 것. width=device-width는 viewport의 가로 너비를 device에 최적화시키도록 함. initial-scale=1.0은 확대 축소 시 1에서부터 출발하겠다는 것을 의미.

• property

  <meta property="og:title" content="test"/>

  og:title에서 og는 open graph를 의미. 브라우저에 특정한 정보를 주기 위한 문법. SNS에서 공유 시 공유된 정보를 특정한 사이트에서 체크해 갈 때 필요한 내용.

title

• HTML 문서, 즉 웹 페이지의 제목을 정의함.
• 웹 브라우저의 각 사이트 탭에 이름/제목으로 표시됨.
• HTML 문서의 구조화보다는 정보를 나타내는 태그로 페이지 정보가 브라우저 탭 영역에 출력되기는 하나, 출력을 목적으로 작성하는 것은 아님.

link

• 현재 HTML 문서 외부에 있는 문서를 연결하기 위해 사용. 특히 HTML 문서 외부에서 작성된 stylesheet(css 문서, .css)를 읽어와 연결시킬 때 가장 많이 사용됨. 파비콘(favicon) 연결 시에도 사용.

속성

• rel : relationship의 약어. 현재 문서와 외부 문서와의 관계를 명시. 필수 속성. rel은 임의로 작성하는 것이 아니라 정해진 규약 내에서 작성해야 함. Link types: https://developer.mozilla.org/en-US/docs/Web/Link_types
• href : 외부에서 가져올 문서의 경로를 명시. 절대 경로 및 상대 경로 URL 모두 사용 가능.
• hreflang : 연결된 리소스의 언어를 나타냄. 굳이 명시하지 않아도 html tag의 lang 속성과 동일할 수 있는 등의 이유로 생략 가능하며 일반적으로는 생략.

style

• HTML 문서 또는 문서 일부에 대한 스타일 정보(css)를 지정함. css를 외부 문서(.css)에서 작성한 후 연결하지 않고 HTML 문서 내부에서 작성하는 경우에 사용.

속성

• type : style tag 내에 어떤 type의 내용을 작성할 것인가를 명시. 대표적으로 type="text/css"는 작성될 내용이 text이며 css라는 뜻. HTML5부터는 기본값으로 생략 가능.

• style은 정보를 나타내기 때문에 원칙적으로 head tag 내에 작성해야 하지만 body tag 내에 작성해도 정상 작동됨.

• 하지만 body 내에 작성하는 것은 HTML이 브라우저에서 동작하는 프로세스 측면에서 효율적인 방식은 아님.

• head 내에 작성하는 것을 권장.

MIME Type

• style 작성 시 <style type="text/css">처럼 type을 지정해주는 것과 같이 link tag의 경우에도 가지고 오는 css의 타입을 명시할 수 있음.

<link rel="stylesheet" href="./main.css" type="text/css" />

style tag와 마찬가지로 link tag에서도 type="text/css"는 생략 가능.

• type 중에는 MIME Type이라고 해서 각각의 파일이나 특정한 개념이 어떤 type인지 명시해 줘야 하는 부분이 있을 수 있음.
• MIME Type이란 클라이언트에게 전송되는 문서의 다양성을 알려주기 위한 메커니즘.
• 연결하는 문서에 해당하는 type의 종류를 명시.
• 서버나 클라이언트 쪽에서 이를 인지하고 오류를 방지하기 위함.

base

• HTML 문서에 포함된 모든 상대 URL들에 대한 기준 URL을 설정.
• base는 되도록 경로를 작성하는 태그 위에 작성하는 것이 좋음.
• base를 통해 상대 경로로 입력할 수 있는 특정 경로를 정해 기준으로 삼을 수 있음.
• base를 통해 매번 전체 상대 경로를 입력하지 않고 경로상의 공통된 부분을 한 번에 지정해 놓을 수 있음.

유의사항

• base는 HTML 문서당 한 번만 작성할 수 있음. 주요하게 쓰일 경로만 작성하도록.
• base에 작성된 경로는 해당 HTML 내에서 작성하는 모든 상대 경로에 영향을 미침. 정확하게 기준을 잡아 사용하면 효율적이지만 일부분에서만 사용하는 경우 문제가 발생할 수 있다는 점에 유의.

!DOCTYPE

• DOCTYPE(DTD, Document Type Definition)은 마크업 언어에서 문서 형식을 정의한다.
• 이는 웹 브라우저에 제공될 HTML 문서가 어떤 버전으로 해석된 후 출력될지 정의하는 것이다.
• HTML은 크게 1, 2, 3, 4, XHTML, 5의 6가지 버전으로 분류되며, 현재의 표준 모드는 HTML 5 버전에 해당한다.

html

• HTML 문서의 전체 범위를 지정한다.
• 웹 브라우저가 해석해야 할 HTML 문서의 전체 영역, 즉 시작과 끝 지점을 알려 주는 역할을 한다.

head

• 웹 브라우저가 해석해야 할 HTML 문서의 정보 범위를 지정한다.
• 여기서 '정보'란 웹 페이지의 제목, 문자 인코딩 방식, 연결되는 외부 파일의 위치, 웹 페이지를 구조화하기 위한 기본 세팅 값 등을 의미한다.

body

• 웹 브라우저가 해석해야 할 HTML 문서의 구조 범위를 지정한다.
• 구조란 사용자가 화면을 통해 볼 수 있는 내용(contents)의 형태나 레이아웃 등을 의미한다.
• css로 표현하기 전까지 출력되는 요소를 정의한다.
• logo, header, footer, navigation, 메뉴, 버튼, 입력창, 팝업, 광고 등 보이는 모든 것들이 구조에 해당한다.
• 구조는 body의 범위 안에서만 생성하도록 해야 한다.

일반적으로 태그는 열리고 닫히는 범위가 존재한다.

<div>
...
</div>

그러나 Empty tag의 경우 닫히는 태그가 별도로 별도로 존재하지 않는다. 따라서 비어 있다(empty)고도 표현한다.

또는 Self closing tag라고 해서 스스로 닫히는 형식으로 쓰이기도 한다. 열리는 동시에 스스로 닫아버리는 것.

Empty tag의 두 가지 방식

1. '/'가 없는 empty tag HTML 1, 2, 3, 4에서 사용 가능.

2. '/'가 있는 empty tag XTHML에서 사용 가능.

HTML5에서는 두 가지 방식을 모두 사용 가능하다.

사용 시 유의 사항

• XHTML 버전이나 Lint 환경 혹은 프레임워크 세팅에 따라 '/'을 사용하는 것이 필수가 될 수 있다.
• 개발 환경에 따라 '/'을 사용하거나 사용하지 않을 수 있는데, 둘 중 어느 것이 더 좋은 방식인가에 대해서는 여전히 갑론을박이 존재하는 상황.
• 분명한 것은 둘 다 사용 가능한 환경일 경우 두 가지 방식을 혼용하지 않고 한 가지만 일관성 있게 사용하는 것이 필요하다.

일반 태그와의 비교

• 일반 태그의 경우 열리고 닫히는 범위가 존재한다. 특정한 속성과 값이 당장 해당 태그에 지정되어 있지 않더라도 주어진 범위 내에 content를 넣을 수 있어 그 태그가 가진 의미 자체만으로도 충분히 사용할 수 있다.
• Empty tag의 경우 범위가 존재하지 않는다. 대부분 태그가 위치한 영역에서 무언가를 해결해야 하는 용도로 사용되는데, 따라서 태그가 가지는 의미보다는 그 의미를 확장해서 사용할 수 있는 속성과 값이 empty tag 내에 포함된다. 그냥 사용되는 경우도 없지는 않지만 대체적으로는 그렇다.