웹 품질 - 중요한 HTML 요소들


<DOCTYPE>, <title>, <h1> 은 웹 품질에 있어서 매우 중요한 태그들 입니다.


 

<DOCTYPE> 태그

Doctype 는 "document type declaration(문서 형태 선언)" (DTD) 를 의미합니다.

모든 HTML과 XHTML 페이지에는 <DOCTYPE> 태그를 넣어서 어떤 HTML 버전을

사용하고 있는지 정의해 주셔야만 합니다.


doctype는 어떤 버전의 HTML을 사용하고 있는지 정의해주고, 사용자의 웹브라우저에 중요한 정보를 제공해서

웹페이지가 좀더 빠르고 일관성있게 표시되도록 해줍니다.


doctype 태그를 넣어두시면, 나중에 유효성 확인 프로그램으로 웹페이지의 문법을

체크할때도 도움이 되기 때문에 여러모로 중요합니다.


HTML 4.01 Strict, Transitional, Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
	
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
	
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
 
XHTML 1.0 Strict, Transitional, Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
 
XHTML 1.1 DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


 

<title> 태그

<title> 태그는 HTML의 여러 요소들중 가장 중요한 요소중 하나가 아닐까 생각해 봅니다.

핵심 기능은, 아시다시피 웹브라우저 제목표시줄에 페이지의 성격을 설명할수 있는 문구를 표시해 주는 겁니다.


비록 웹페이지에 표시되는 요소는 아니라고는 하지만, 웹사이트의 품질에 있어서 매우 중요한 요소입니다. 왜냐하면,


  • 검색 엔진의 목록에 표시됨
  • 윈도 제목 표시줄에 표시됨
  • 방문자들이 추가할 경우, 북마크나 즐겨찾기의 이름이 됨.

<title> 태그에 문구를 넣으실때는, 가능한한 최대한 짧게 하시는게 좋습니다.


사용자가 인터넷에서 웹사이트를 검색할때, 대부분의 검색 엔진들은 검색 결과에

<title> 태그에 지정해둔 문구들을 표시 할거니다.

따라서, 타이틀 태그의 문구가 사용자가 찾는 컨텐츠의 내용과 일치하는지 확인하세요.

그렇게하면, 찾는 사람이 여러분 웹사이트로 가는 링크를 통해 웹사이트로 직접 방문할 확률이 높아집니다.


사용자가 여러분의 웹사이트를 방문할때, 앞에서도 언급했듯이 윈도 제목 표시줄에 문구가 뿌려질겁니다.

윈도가 최소화 되었을때도 문구가 웹사이트를 설명할만큼 잘 보이는지 한번 보심이 좋을듯 합니다.


방문자가 여러분의 웹사이트를 방문한뒤, 타이틀 태그의 문구가 웹기록에 저장될겁니다. (북마크나 즐겨찾기에 추가되었을수도 있죠).

나중에 또다시 방문할수 있도록, 타이틀 태그의 문구가 웹사이트를 잘 설명하게, 간단명료하게

정해주십시오.


좋은 타이틀 태그 문구의 예:

<title>HTML 튜토리얼</title>

<title>XML에 대한 소개</title>

나쁜 타이틀 태그 문구의 예:

<title>소개</title>

<title>챕터 1</title>

<title>우리 사이트는 상까지 수상한, 잘 정렬된, 쉽게 이해할 수 있는 HTML, CSS, Javascript, DHTML, XML, XHTML, WAP, ASP, SQL 튜토리얼을 많은 예제와 소스코드와 함께 제공합니다.</title>


 

<h1> 태그

<h1> 태그는 웹페이지의 최상위 제목을 표현하는데 사용됩니다.


몇몇 웹브라우저에서 <h1>태그를 기본적으로 매우 큰 글씨체로 보여주는 경우가 있어서,

몇몇 개발자분들께서는 최상위 제목에  <h1> 대신에 <h2>를 사용하실 겁니다.


물론, 이렇게 하면 사람일 경우 방문자가 혼란스러운 경우는 없겠지만,

대부분의 검색 엔진과, 웹페이지의 구조를 '이해'하고자 하는 많은 다른 프로그램들을

혼란스럽게 할겁니다.


최상위 제목에는 <h1> 태그를 사용하고 있는지 확인해주시고,

<h2>와 <h3> 태그는 더 낮은 수준에 사용하세요.


여러모로, 고민끝에 적은 글입니다.

꼭 그대로 할 필요는 없지만, 적어도 열심히 써내려간 글이니 참고는 해주세요 ^_^


제목을 나타내는 <h1> 계열의 태그가 표시해내는 기본 글자 크기가 맘에 안드시면,

스타일이나 스타일 시트로 그걸 바꾸시면 좋겠지요 :)