본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

head 요소

최초 작성일
최종 수정일
이번 시간에는...
HTML 문서의 시작인 head 요소(태그)의 역할과 이 요소가 검색엔진에 있어서 왜 중요한지 살펴봅니다. 또한 head 요소 안에 들어가는 메타정보들과(Description, Keywords) title, link, script 태그들을 살펴 봅니다.

지난 HTML 시작하기에서 html태그 안에 head와 body를 먼저 만들었던 것을 기억하실 겁니다. 이번에는 이 중 head 대해 다루어 보도록 하겠습니다.

Doctype

독타입(Doctype)은 HTML문서의 맨 처음에 명시하는 부분으로 문서의 버전에 관한 정보를 나타냅니다. 저희가 처음 맛보기에서 넣었던 <!doctype HTML>은 이 문서가 HTML5 라는 것을 명시하는 것인데요, 이 강의는 HTML4.01을 기준으로 진행합니다. (엄밀히 말하면 XHTML 1.0입니다.)

지금은 이런 버전에 대한 설명에 대해 전혀 감이 오지 않을 거라 생각됩니다. 그렇기 때문에 독타입에 대해서는 나중에 좀 더 다루도록 하겠습니다. 일단은 저 독타입에는 몇 가지 종류가 더 있다는 점과 저 독타입은 문서 처음에 반드시 작성해놔야 한다라는 것을 알아두시기 바랍니다.

그리고 앞서 시작하기에서 썼었던 독타입은 HTML 5 버전이고, 이 강의는 HTML 4.01을 기준으로 진행합니다. 그 이유는 4버전대의 HTML을 익히고 나면, HTML 5 에서는 추가되고 수정된 부분만 살펴보면 됩니다. 제가 판단하기에, 아무것도 모르는 상태에서는 4 버전대로 먼저 학습하는 것이 이해하기 쉬울 것이라 봅니다.

때문에 앞으로 독타입은 일단 다음으로 작성하시길 권합니다. (간편한 HTML 5 독타입을 쓰셔도 상관없습니다.)

XHTML1.0 독타입입니다. 내용이 길기 때문에 굳이 외우실 필요는 없고 복사하셔서 붙이시면 됩니다.

일단 독타입은 다음에 자세히 알아보는 것으로 하고 다음으로 진행하겠습니다.

head 요소의 역할

일단 head 요소의 정의는 '문서의 메타데이터 집합'입니다. 이 문서의 메타데이터라는 것은 웹 페이지에 직접적으로 보이지 않는 정보라고 이해하시면 됩니다.

예를 들어, 이 페이지의 제목이나 이 페이지가 검색엔진에 노출이 될 지 안될지, 이 페이지에 대한 소개 글 등등의 정보들이 메타데이터로 들어갑니다. 또한, 전에 css를 잠깐 다뤄봤을 때처럼, css 파일과 js 파일을 연결하는 부분들도 주로 이 head 요소 안에 위치합니다.

head 내 위치하는 요소들

head 요소 안에 들어가는 요소들을 몇 가지 알아보도록 하겠습니다.

title 요소

title 요소는 문서의 제목이나 이름을 나타냅니다. 안에는 텍스트만 넣을 수 있으며, 문서 내에 한 번만 사용됩니다.

이 title 요소의 내용은 브라우저 창 제목이나 페이지의 탭에 나타나게 되며, 구글 같은 검색엔진에서는 검색된 페이지의 이름으로 나타납니다. 그렇기 때문에 이 title의 내용은 적절하고 명료하게 넣어야 합니다.

요새 이런 경우가 많지는 않지만, 예전에는 또는 요새도 간혹 보면 이 title 내용을 잘못 활용하는 경우가 있습니다. 다음의 코드와 같이요.

보통 전에 저렇게 넣었던 이유는 title의 내용이 IE창 제목에 나타났었기 때문에, 제목을 꾸미고자 저런 식으로 작성하는 경우가 종종 있어왔습니다. 하지만 위의 내용은 몇 가지 문제가 있으니, 위와 같이 넣는 것은 절대 지양하시기 바랍니다.

가장 먼저, 요새의 브라우저들은 다 탭을 사용하며, 탭에 들어갈 수 있는 글자 수가 많지 않기 때문에 명료하게 적는 것이 좋으며, 중요한 내용이 먼저 쓰여지는 것이 좋습니다.

두 번째로, 제목은 페이지의 대표되는 내용의 제목을 넣으셔야 합니다. 그래야 검색엔진이 여러분의 사이트를 목적에 맞게 인식합니다. (환영의 문구는 첫 메인 화면 정도는 괜찮으나, 서브페이지 같은 곳에서 내용과 전혀 무관하기 때문에 자제하는 것이 좋습니다.)

마지막으로 title에는 웬만하면 특수문자를 사용해서는 안됩니다. 전에도 말씀 드렸지만, 여러분의 웹 페이지에는 검색엔진뿐 아니라 앞을 못 보는 시각 장애인 분들도 올 수 있습니다. 그러한 분들은 스크린리더를 통해서 페이지의 내용을 음성으로 듣습니다. 스크린리더는 위의 내용을 '빈 네모, 빈 네모, 빈 네모, 빈 네모... 사이트에 오신 것을 환영합니다.' 이런 식으로 읽어주게 됩니다. 보통 title 부분이 제일 먼저 읽히기 때문에 접속하자마자 나가는 경우도 생길 것 입니다.

이렇기 때문에 title은 페이지의 제목을 명료하게 적어주는 것이 좋습니다. 예를 들어 뉴스페이지 이고, 기사 제목이 '웨버스터디 오픈 하다'라면 타이틀 역시 '웨버스터디 오픈 하다'를 적어주는 것이 제일 좋습니다. 또는 현 페이지가 어느 사이트인지를 알려주기 위해서 '웨버스터디 오픈 하다 - 웨버스터디' 정도로 작성하셔도 됩니다. 참고로 제목과 사이트 명 사이에 구분 자는 무엇을 쓰든 상관없습니다. 안 쓰셔도 상관 없고요. 따로 정해진 양식은 없습니다. 만약 쇼핑몰의 상품 페이지라면, 상품명을 넣어주는 것이 적절합니다. '투톤 체크 남방 : 웨버 쇼핑몰' 와 같이 되겠죠.

meta 요소

head에서 메타정보를 담은 meta 요소에 대해 살펴보겠습니다.

메타태그는 스스로 닫는 태그이기 때문에 아래와 같이 작성되고요, 속성값으로 정보를 나타냅니다.

메타에서 담을 수 있는 종류는 여러 종류가 있으며, 페이스북이나 트위터 등에서 요구하는 임의의 메타정보들도 있습니다. 그 중 몇 가지를 살펴보도록 하겠습니다.

위의 메타(charset)는 현재 페이지의 인코딩에 관한 정보를 담고 있습니다. 저 메타는 현재 페이지의 인코딩이 utf-8 방식으로 작성이 되었다는 뜻으로, 브라우저가 이 메타를 읽고 글자를 올바르게 랜더링 합니다. 국내에서는 보통 'utf-8'과 'euc-kr'을 많이 사용하고 있으며, 새로운 서비스를 구축한다면 다른 언어에서도 볼 수 있는 'utf-8'을 권장합니다. 인코딩에 대해서는 글자 깨짐에 관한 포스트를 참조해 주세요.

위의 디스크립션(Description) 메타는 현재 페이지에 대한 설명을 담고 있으며, 이 정보는 주로 검색엔진이 확인합니다. 구글의 경우 페이지 제목 아래로 페이지를 소개하는 내용을 주로 이 메타 정보를 이용합니다. 글자 수는 160자 이내로 작성하시길 권장합니다. 다음의 이미지를 참고하세요.

구글에서 검색된 웨버스터디 모습
title 요소와 description 요소가 검색엔진에서 보여지는 모습

이 키워드(Keywords)메타는 페이지에 대한 주요 키워드들을 담고 있으며, 이 정보 역시 검색엔진이 확인하는 정보입니다. 여러분의 페이지에 관련 있는 키워드들을 나열해서 적어놓으면 검색엔진이 저장해놓았다가 해당 관련 검색어가 나왔을 때에 보다 잘 찾아줍니다. content 속성에 작성하며, 콤마(,)를 구분 자로 사용합니다. (예: 홈페이지, 웹 제작, 웹 기초 ...)

검색에 많이 노출되기 위해서 관련 없는 키워드를 굉장히 많이 넣기도 하는데요, 이럴 경우 오히려 검색엔진에서 스팸과 같이 인식하여 더 하위에 노출될 수 있습니다. 키워드의 개수는 200개 미만으로 제한을 두시고 한 30개 정도가 적당합니다.

이 메타는 이 페이지를 검색엔진이 수집을 할 지 안 할지를 정하는 정보입니다. 위와 같이 content 값을 'noindex, nofollow'로 줄 경우, 검색엔진은 여러분의 페이지를 색인 하지 않습니다. 때문에 검색엔진에 노출되지도 않습니다. 검색되지 않는 사적인 페이지를 만들고 싶으실 때 사용하시면 유용합니다. 반대로 검색엔진에 노출되고 싶다면 content 값을 'index, follow'로 넣어주면 되며, 위의 메타가 없을 경우 기본적으론 수집, 검색됩니다.

메타 정보는 이 외에도 종류가 많습니다만, 일단 이 정도로만 다루도록 하겠습니다.

참고로 여러분의 메타정보는 파이어폭스에서 확인 가능합니다. 페이지 뷰에서 마우스 오른쪽 버튼을 누르셔서 '페이지 등록정보'에 들어가시면, 페이지 등록정보 창에 '일반'탭에서 메타정보를 확인하실 수 있습니다. 여러 사이트들을 돌아보면서 메타정보를 확인해 보세요.

검색엔진이 여러분의 웹 페이지에 방문했을 때 모습입니다
검색엔진이 여러분의 웹 페이지에 처음 방문했을때, head 요소부터 살펴봅니다.

link, style 요소

위의 link요소는 이미 몇 번 봤습니다. 네 주로 css 파일을 연결할 때 사용하는 요소입니다. link 요소의 속성들을 살펴보겠습니다.

'href'는 해당 css파일의 주소를 적어주시면 됩니다. 'type'과 'rel'을 적어주는 이유는, 사실 이 link 요소의 쓰임새가 css파일 연결 외에도 다른 외부요소를 연결하는 데에도 쓰이기 때문입니다. 때문에 link 요소는 다른 연결에도 쓰입니다만, 일단은 css 파일을 연결할 때에 필요하다 정도만 알고 계시면 됩니다. 나머지는 추후에 살펴보도록 하죠. 참고로 'rel'속성은 'relationship (관계)'의 줄임 말입니다.

일단 우리가 지금까지 배우기로는 html과 css 파일을 분리해서 사용했습니다만, html 안에 css를 그대로 사용하는 방법이 있습니다. 바로 style 요소입니다.

이와 같이 사용합니다. style 요소 안에 원하는 css 내용을 넣으시면 굳이 외부 css 파일을 사용하실 필요 없이 html 파일 안에서 사용 가능합니다. 물론 관리 상 css 파일을 분리하여 작성하는 것이 더 좋은 방법입니다만, 종종 간단한 테스트나 이 페이지에서만 사용할 css 라면 아주 유용한 요소입니다.

script 요소

이 강의는 자바스크립트를 다루지 않기 때문에 아마도 거의 쓰지 않을 요소이지만, 알아만 놓고 가겠습니다.

위와 같이 작성을 하며, src속성에 js 파일 주소를 적으면 외부 css 연결하듯 외부 js 파일을 연결시킵니다. 또한 src 속성 없이 script 요소 안에는 style 요소처럼 js를 html 파일 안에 직접 적을 수 있습니다. 참고로 script 요소는 head 뿐 아니라 body 안에 들어가도 괜찮습니다.

이상으로 head요소 안에 들어가는 주요 요소들을 살펴보았습니다. 아직 독타입에 대해 자세히 살펴보진 않았고 다루지 않은 메타태그들도 있습니다만, 처음부터 너무 많은 양을 한 번에 다루진 않겠습니다. 나머지 부분은 HTML 중급과정에서 다룰 계획입니다.

요점 정리
  • 독타입(doctype)은 문서의 맨 처음에 위치하여 HTML의 버전을 선언함
  • head 요소는 실제로 보이진 않지만 페이지의 중요한 정보를 담고있음.
  • head 요소에 담긴 정보들은 검색 엔진 및 스크린 리더 등에서 활용함.
  • title 요소는 페이지의 제목을 나타내며, 브라우저 탭에 노출 됨. 접근성을 위해 특수문자 사용은 자제.
  • meta Description은 페이지의 소개 내용으로 검색 엔진에서 주로 노출됨
  • meta Keywords는 페이지의 주요 단어 키워드를 명시. 검색 엔진에 주로 활용되며, 관계없고 너무 많은 키워드들은 오히려 악영향이 될 수 있음.
  • meta robot은 검색 엔진이 이 페이지를 수집 할지를 명시.
  • link 요소는 주로 CSS 파일과 연결, style 요소를 통해 페이지 내에서 CSS 스타일을 줄 수 있음.
  • script 요소는 페이지와 javaScript 파일과 연결

이 글이 유용하셨다면 친구들에게 공유 해주세요.