[웹표준 #3] 문서 제목의 마크업은 Heading을 쓰자.

HTML에서 문서 제목 부분은 어떻게 쓸까?

HTML 문서도 일반 문서처럼 제목, 소제목 들을 사용하는 경우가 많이 있습니다. 

이때 여러분은 어떤 태그를 많이 사용하는지요? 

아마도 대부분은 다음과 같은 형태를 많이 사용할 것 같습니다. 

<p><b>미니의 프로그래밍 이야기</b></p>

여기에 <font> 태그는 사용하지 않는게 좋다고 하니 CSS의 style을 적용해서 폰트 크기를 키우기도 하겠죠.. 

<p style="font-size:24px;"><b>미니의 프로그래밍 이야기</b></p>

원하는 크기대로 나오고 괜찮은 것 같다고 생각합니다. 

그러나 이렇게 작성하면 HTML 태그의 기본 속성인 의미 전달이 안됩니다. 

즉, 위 부분만 보고서 문서의 제목이라고 판단하기는 쉽지 않기 때문이죠.. 

(주로 누가 문서만 보고 판단을 할까요? 한번 생각해 보세요 ^^)

그래서 <span> 태그를 한번 사용해 봅니다. CSS의 class를 활용하면 좀 더 낫겠죠.. 

<span class="heading">미니의 프로그래밍 이야기</span>

이렇게 하면 CSS에 heading 부분에 대한 스타일을 적용해서 멋지게 꾸밀 수는 있습니다. 

그러나 이것도 문서만 보고서 제목이라고 판단하기는 쉽지 않습니다. 물론 사람을 알 수 있죠. 

제가 여기에서 말하는 누군가는 바로 검색엔진과 같은 웹 로봇들을 의미합니다. 

실제로 SEO(Search Engine Optimization)과 같은 검색 엔진 최적화 작업들을 많은 웹 페이지가 수행합니다. 

이유는 검색엔진에 많이 노출됨으로써 사이트로 유입을 증가하기 위함이죠. 

그렇다면 사람 뿐만 아니라 검색 엔진도 쉽게 이해할 수 있도록 HTML 문서를 작성해야 합니다. 

이럴 때 사용하는 문서의 제목이 바로 <h1>, <h2>와 같이 사용하는 Heading입니다. 

<h1>미니의 프로그래밍 이야기</h1>

HTML Heading 사용하기 

HTML에서는 제목으로 사용하기 위한 태그로 <h1>, <h2>, <h3>, <h4>, <h5>, <h6>의 6가지 태그를 제공하고 있습니다. 

<h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6>

이 태그들은 숫자가 커지면 폰트 크기가 점점 작아지는 특성을 가지고 있습니다. 

즉, 가장 큰 제목은 <h1>, 그 다음 중 제목은 <h2>, 그리고 소 제목은 <h3>와 같이 사용하면 됩니다. 

이와 같은 Heading 태그를 사용하면 어떤 장점이 있을까요? 

검색엔진 최적화

앞서 이야기한 것 처럼 Heading 태그를 사용하면 검색 엔진에 HTML 문서를 분석하기 쉽습니다. 

즉, 검색엔진은 <h1>과 같은 태그가 적용되어 있는 부분을 문서의 제목이라고 판단해서 색인(인덱스)를 적용하게 되는 것이죠. 

만약 여러분의 웹 사이트를 좀 더 잘 검색되려고 하려면 Heading 태그를 적절하게 사용하면 됩니다. 

스타일 적용의 용이성

또한 CSS 스타일을 적용하기 쉬워집니다. 

다음과 같이 <h1> 태그에 대한 스타일을 적용하면 아래에 밑줄이 그어진 멋진 제목이 만들어질 것입니다. 

<style type="text/css"> h1 { font-size: 24px; color: blue; padding-bottom: 4px; border-bottom: 1px solid #999; } </style> <h1>미니의 프로그래밍 이야기</h1>

CSS에서 padding과 border에 대해서 이해하기 위해서는 다음과 같은 박스 모델을 이해하고 있어야 합니다. 

실제 콘텐츠 영역의 경계선 (Border)을 중심으로 안쪽 여백을 Padding, 바깥쪽 여백을 Margin이라고 합니다. 

그리고 다음과 같이 값을 4자리 숫자로 지정하게 되면, 위에서부터 시계방향으로 Top -> Right -> Bottom -> Left 순으로 지정한 것으로 이해하면 됩니다. 

이 두 가지만 기억하고 있으면 CSS에서 어떤 형태의 Margin, Padding, Border는 모두 이해할 수 있을 것입니다. 

좀 더 자세한 정보는 제가 예전에 작성한 2012/01/20 - [프로그래밍/Web] - CSS의 Margin, Padding, Border 개념을 명확하게 하자 를 참고하세요

주의할 점

HTML4.01에서 HTML5로 넘어가면서 <h1>..<h6> 태그에 있던 속성인 align 속성이 deprecated 되었습니다. 

즉, HTML5에서는 해당 정렬 속성을 처리하지 못한다는 것입니다. 

대신 CSS를 활용해서 정렬을 처리하도록 하고 있으니 이점도 유의하시기 바랍니다. 

오늘은 기본적이지만 매우 중요한 문서의 제목을 나타내는 Heading 태그에 대해 살펴봤습니다. 

웹 표준 관련 강의는 초보자들을 위한 것인 만큼 이렇게 쉬운 것도 해 볼 생각이니 부담없이 보시면 좋을 것 같습니다. 

그럼. 좋은 하루 되세요~~