티스토리 뷰

IT 이야기/프로그래밍

[HTML 쉽게 이해하기 강좌] - <h1>~<h6> 태그에 대해서

하늘과 나b 2011. 12. 3. 20:16





<h1> ~ <h6> 태그에 대해서


<h1>,<h2>,<h3>,<h4>,<h5>,<h6> 태그에 대해서 알아보도록 하겠습니다.
<h1> ~ <h6>은 제목을 작성하는 태그입니다.
이렇게 설명을 드리면 그러면 h뒤에 붙은 숫자는 무엇입니까?라고 질문을 하실지도 모르겠습니다.


[알아두기] <h1> ~ <h6> 태그
    제목을 작성하는 태그 




제목도 큰 제목이 있고 작은 제목이 있죠?
<h1>은 가장 상위 계층의 제목을 표시할 때 사용합니다. h뒤에 숫자가 커질수록 작은 제목을 표시할 때 사용됩니다. 즉 <h1>부터 <h6>까지 6단계로 제목을 표시할 수 있다는 것입니다.

h뒤의 숫자는 웹페이지의 정보를 계층별로 구조화하는 기능을 담당하기도 합니다.







정보 구조화에 대한 관점에서 보면 중요한 <h1>~<h6> 태그


디자인적인 시각에서 보면 이 태그는 그다지 중요하지 않을지도 모르겠습니다.
디자인적인 시각에서 본다면 이 태그는 단순히 글자의 크기만 다를 뿐 글자를 표시하기 때문이죠.

그러나 웹브라우저 입장에서 본다면 이 태그는 중요한 태그 중 하나입니다.
웹페이지의 정보계층을 구조화하는 태그이기 때문입니다.
웹브라우저의 입장에서 본다면 <h1>~<h6>태그를 통해 HTML이 어떤 구조로 되어 있는지를 인식할 수 있다는 것입니다. 그렇기 때문에 이 태그를 적절히 이용한다면 많은 도움이 된다는 이야기죠.





<h1> ~ <h6> 예제 보기


 
<html>
<head><title>h1~h6 태그</title></head>
<body>
<h1>h1 태그
<h2>h2 태그
<h3>h3 태그
<h4>h4 태그
<h5>h5 태그
<h6>h6 태그
</body>
</html>


저작자표시

'IT 이야기 > 프로그래밍' 카테고리의 다른 글

[HTML 쉽게 이해하기 강좌] - Element Level에 대해서  (0) 2011.12.05
[HTML 쉽게 이해하기 강좌] - DOCTYPE에 대해서  (0) 2011.12.05
[Javascript] getElementById 예제 - 링크 보이기/숨기기  (0) 2011.12.05
[C언어] 함수 rand(), srand() 쉽게 이해하기  (55) 2011.12.05
[Javascript] 홈페이지에 현재의 년월일을 이미지로 된 숫자로 표시하는 자바스크립트 소스  (1) 2011.12.03
[HTML 쉽게 이해하기 강좌] - <head> 태그에 대해서  (0) 2011.12.02
[HTML 쉽게 이해하기 강좌] - HTML 문서의 기본 구조  (0) 2011.12.02
[HTML 쉽게 이해하기 강좌] - 주석문  (0) 2011.12.02
[HTML 쉽게 이해하기 강좌 #1] - HTML의 기본  (2) 2011.12.02
[HTML/CSS] 마우스 커서 모양(스타일) 바꾸기  (1) 2011.11.30
공유하기 링크
댓글