메타 태그..?
저희는 보통 html을 작성할 때 단축키를 이용해서 한번에 전체적으로 필요한 부분들을 만들어 놓습니다. 이러한 방식으로 우리는 직접적으로 보여주는 body 부분만 신경을 써주면 되었습니다.
그렇다고 우리가 그 외의 것은 몰라도 되는 것은 아닙니다 늘 공부해야죠!
복잡해보여서 항상 외면해왔던 위의 메타태그와 덕타입에 관하여 포스팅을 해볼까 합니다. 최대한 쉽게 무슨 의미인지를 설명해보겠습니다!
단축키를 사용했을 때
<!DOCTYPE html>
우리의 html은 꾸준히 발전을 해왔습니다. 여러 발전을 거쳐서 지금의 html5가 되었죠. 그리고 발전될 때 마다 선언방식 또한 변해왔습니다. 우선 어떤 방식으로 써졌었는지 한번 확인 해볼까요?
// HTML 4.01 문서 선언
// Strict 엄격 모드 문법에 실수가 있으면 오류를 발생시킨다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
// Transitional 호환성 모드 문법에 실수가 있어도 허용한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
// Frameset 프레임 세트를 사용할 때 사용한다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">// HTML 1.0 문서 선언
// Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
// Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
// Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">// 대망의 html5 문서 선언
<!DOCTYPE html>덕타입 선언 이유와 이전과 다른 점
HTML의 다양한 버전의 선언에 따라서 지원하는 태그가 달라지기 때문에 버전정보를 미리 선언해서 웹 브라우저가 내용을 올바르게 표현할 수 있도록 해주는 것입니다.
이전의 html과 html5의 차이점을 간단하게 작성하자면, 이전에 html은 우리들이 많이 사용하는 Block Element와 Inline-block Element를 사용해서 문서의 구조를 만들고 개발자들이 붙이는 id나 class를 통해 불려졌죠.
이러한 방식은 이름을 아무리 잘 작성해도 당사자가 아니면 이해하기 어렵습니다.
그리하여 나온 것이 html5의 시멘틱 태그(Semantic tag)들 입니다.
주요 시멘틱 태그들
- header
- nav
- section
- article
- aside
- footer
우리는 html5의 시멘틱 태그들을 이용해서 좀 더 쉽고 직관적이게 html의 구조를 작성할 수 있게 되었습니다! html이 진화하면서 다양한 태그들이 생겨났고 이전의 태그들을 그대로 사용하기도 하고, css나 다른 영역에서 처리할 수 있게된 태그들은 사라지기도 했죠. 그리고 이 것들을 구분하기 위해서 우리는 덕타입 선언을 하는 것입니다!
우리는 간단하게 덕타입 선언에 대해서 알아봤습니다.
그렇다면 덕타입 선언 아래에 늘 궁금했던 메타 태그들에 대해서 알아볼까요?
메타 태그란?
우리가 말하는 <meta>태그는 해당 문서에 대한 정보에 대한 메타 데이터를 정의하는 태그입니다. MDN에서는 데이터를 설명하는 데이터라고도 나와있는데, 쉽게 생각하자면 설명서 같은 것들이 포스트잇 종이처럼 붙어있다고 생각하면 편할 것 같습니다.
- 우리가 흔히 알고있는 MDN은 HTML, CSS, Javascript같은 것들을 개발이 아직 미숙한 개발자들에게 정보를 제공하는 웹 사이트죠. 이러한 사이트에 대한 설명을 메타 태그를 이용하여 작성하면 다음과 같이 이용할 수 있습니다.
이는 페이스북에서 MDN의 링크를 걸면 보여지는 화면입니다.
메타 데이터를 이용해서 MDN이라는 웹 사이트를 모르는 이용자들에게도 쉽게 설명할 수 있는 것이죠.
// 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) 5초 뒤에 다른 페이지로 리다이렉트(redirect)시키는 예제
<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) 어떠한 언어가 와도 에러없이 문자가 정상적으로 나오게끔 하는 예제
<meta charset="UTF-8">
// TCPschool에서 정리된 내용을 발췌 및 수정했습니다.
// http://tcpschool.com/html-tags/meta 많은
<meta>기능들이 잘 사용되고 있는 것은 아닙니다. 위의 예제에 첫 번째에 keyword는 스팸 발송자들이 키워드의 내용에 수 백개를 집어 넣어서 악용한 사례가 있어서 검색 엔진이 아예 무시를 해버린다고 합니다.
또한 리다이렉트는 페이지를 이용하고 있는 이용자를 강제로 이동을 시킬 가능성도 있기 때문에 납치 태그라고도 불립니다.
정리
그 동안 자세히 알지 못했던 meta 태그들과 덕타입의 선언 이유 그리고 이 전의 html들이 어떻게 사용되었는 지 알게되어서 뜻 깊은 시간이었다고 생각합니다. 자료들을 찾고 정확한 내용을 비교해가며 구글링을 하는 실력은 확실히 늘어가는 것 같습니다! 사실 html은 깊게 파고들어 보지 않은 부분이라서 어색한 사이였는데 이번 기회로 조금은 친해진 것 같습니다. 틀린 부분이 있다면 지적해 주시길 바랍니다! 다음에는 CSS에 대해 알아보겠습니다. 감사합니다!
