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
'Anki로 공부하기 > HTML공부' 카테고리의 다른 글
| 0014 빈요소(empty element) br과 hr (0) | 2018.11.14 |
|---|---|
| 0013 단락(paragraph)을 정의하는 p요소 (0) | 2018.11.13 |
| 0011 head 요소와 그 내부에 중첩된 title 요소 (0) | 2018.11.10 |
| 0010 속성(attribute)과 속성 작성방법 (0) | 2018.11.10 |
| 0009 html 요소와 속성 (0) | 2018.11.09 |