HTML 문서의 큰 틀에서 <html> 요소와 <head> 요소 다음에는 <body> 요소가 등장한다. 그리고 이 <body>요소에 중첩되어 들어있는 요소들이 우리가 보는 웹페이지에 실제 나타나는 요소들이다. 하나씩 알아보자.


0012 제목(heading)의 <h> 요소


신문기사에서 볼 수 있는 헤드라인(Headline)이나 글에 붙이는 간단한 소제목 같은 것을 제목(heading) 요소로 묶어서 구조화한다. 사람이 글을 읽을 때도 이러한 제목(heading)들이 도움 되지만 그것보다 검색엔진이 이러한 제목(heading) 요소를 이용하여 웹페이지의 구조와 그 내용을 분류하고 색인화하기 때문에 적절한 제목을 뽑아서 제목(heading) 요소로 묶어주면 검색 엔진이 웹 페이지에서 전하고자 하는 정보를 검색 결과로 적절하게 제시할 수 있게 된다. 

     

제목 요소는 <h1>에서 <h6>까지 6종류가 있다. 


작성 방식은 다음과 같다. (h1만 대표적으로 작성했지만 나머지도 동일하다.)

<h1>내용(content)</h1>


즉, 시작태그와 종료태그 사이에 제목으로 사용할 텍스트를 내용(content)으로 집어넣으면 된다.

    

<h1>이 가장 중요한 메인이고 <h6>로 갈수록 덜 중요하고 지엽적이다.

실무에서는 보통 <h3> 요소까지 사용한다고 한다.

    

우선, 간단하게 아래와 같이 heading_test.html 파일을 만들어 실행해보자.

    

<!DOCTYPE html>


<html>

 <head>

   <title>HTML Ankilog</title>

 </head>

 <body>

   <h1>가장 중요한 h1입니다.</h1>

   <h2>2번째인 h2입니다.</h2>

   <h3>3번째인 h3입니다.</h3>

   <h4>4번째인 h4입니다.</h4>

   <h5>5번째인 h5입니다.</h5>

   <h6>가장 덜 중요한 h6입니다.</h6>

 </body>

</html>


똑같은 파일을 구글의 크롬(Chrome)과 마이크로소프트의 엣지(Edge)로 열어본 것이 아래의 그림이다. 



우선, 두 브라우저 모두 공통적으로 <h1> 요소를 가장 크게 하고 <h6> 요소를 가장 작게 표현하고 있지만 글자 폰트와 글자 크기 등이 다름을 알 수 있다.

    

이는 HTML은 표준화되어도 HTML 문서에서 사용된 요소들을 웹 브라우저가 표시하는 기준은 표준화되어 있지 않아 웹 브라우저들마다 자체적인 기준을 적용하고 있기 때문이다.

    

따라서 동일한 HTML 문서라도 어떤 웹 브라우저로 표시하느냐에 따라서 그 모양이 달라질 수 있다. 이런 차이가 발생하지 않게 하려면 CSS로 글자의 폰트와 크기를 지정해주어야 한다.

    

슬쩍 보기에는 <h> 요소로 내용(content)을 감싸면 글자의 크기가 커지고 굵어지는 효과가 있으므로 그러한 효과를 보기 위하여 <h> 요소를 사용할 수 있다. 하지만 그렇게 하지 않아야할 두 가지 이유가 있다.

     

첫 번째는 그러한 스타일링은 CSS의 영역이고 HTML로 처리하는 것은 적합하지 않다.

두 번째요소(element)는 웹 페이지의 구조를 형성하여 정보를 구조화하는 용도이므로 적절하게 사용되어야만 적절하게 검색되어 올바른 정보 이용자와 연결되기 쉽기 때문이다.


Anki 파일


아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 


Ankilog 파일:  0012 제목(heading)의 h요소.apkg






+ Recent posts