제목 h1~h6

제목 요소 h1~h6는 글의 제목을 여섯 단계로 나타냅니다. 숫자는 글자 크기가 아니라 단계이고, 숫자가 하나 클수록 바로 위 제목에 딸린 한 단계 아래 제목입니다. h1은 페이지 전체의 제목이라 한 페이지에 하나만 둡니다.

브라우저는 제목을 단계마다 다른 크기로 그립니다. 그래서 원하는 글자 크기를 보고 태그를 고르기 쉽습니다. 그런데 화면 읽기 프로그램(화면의 글을 소리로 읽어 주는 프로그램)과 검색은 페이지의 제목만 모아 글의 차례를 만듭니다. 크기를 보고 고른 제목은 화면에서는 멀쩡해 보여도, 그 차례에 빈 단계를 남깁니다. 이 레슨에서는 제목 단계로 글의 차례를 짓는 법과, 크기는 따로 정한다는 것을 봅니다.

<h1>김치볶음밥</h1><h2>재료</h2><h3>양념</h3><h2>조리 순서</h2>

1제목은 단계 — h1 아래 h2, h2 아래 h3

<h1>김치볶음밥</h1>
<h2>재료</h2>
<h3>양념</h3>
<h2>조리 순서</h2>

이 네 제목을 단계대로 모으면 아래 차례가 됩니다. 화면 읽기 프로그램이 제목만 골라 읽거나 검색이 페이지의 짜임을 볼 때 쓰는 것이 이런 차례입니다.

• 김치볶음밥
  • 재료
    • 양념
  • 조리 순서

h1 '김치볶음밥'이 페이지 전체의 주제이고, h2 둘이 그 아래 큰 갈래입니다. h3 '양념'은 바로 위 h2 '재료'에 딸린 작은 제목입니다. 4번 줄 '조리 순서'는 다시 h2라, h3 아래가 아니라 '재료'와 같은 단계로 돌아옵니다. 제목 요소는 나무에서 모두 body의 자식으로 나란히 섭니다. 차례의 들여쓰기는 나무가 아니라 제목의 숫자에서 나옵니다.

브라우저 규칙 3. 요소 이름은 모양이 아니라 뜻입니다. 화면 읽기 프로그램 · 키보드 · 검색은 나무의 요소와 속성에서 역할과 이름을 얻습니다. 모양을 바꾸는 CSS는 뜻을 바꾸지 않습니다.

2기본 크기는 단계를 보여 주는 모양일 뿐

<h1>제목 1단계</h1>
<h2>제목 2단계</h2>
<h3>제목 3단계</h3>
<h4>제목 4단계</h4>
<h5>제목 5단계</h5>
<h6>제목 6단계</h6>
<p>본문 글</p>

브라우저는 제목을 모두 굵게, 단계가 내려갈수록 작게 그립니다. 이 크기는 브라우저가 처음부터 가진 모양(기본 스타일)이라 외울 필요가 없습니다. 잰 값은 브라우저 글자 크기 설정이 처음 그대로일 때 값이고, 글자 크기를 키웠다면 모두 그만큼 큽니다. h4는 본문과 같은 16px이고, h5 · h6는 본문보다 작습니다. 그래서 '조금 작은 제목'이 필요할 때 크기를 보고 h4를 고르기 쉽습니다. h2 바로 아래에 h4를 두면 화면에서는 작은 제목 하나가 보일 뿐이지만, 제목 차례에서는 3단계가 빈 채 4단계로 건너뜁니다.

<h2>조리 순서</h2>
<h4>불 조절</h4>

• 조리 순서
  • (3단계 없음)
    • 불 조절

'불 조절'이 '조리 순서'에 딸린 작은 제목이라면 h3가 맞습니다. 단계는 바로 위 제목보다 하나씩만 내려갑니다. 올라올 때는 여러 단계를 한 번에 올라와도 됩니다. 이렇게 건너뛴 단계는 이 단원 끝 레슨에서 배울 검사기도 Error로 알려 줍니다.

3크기는 CSS가 맡는다

<h1>김치볶음밥</h1>
<p>15분이면 만드는 요리입니다.</p>

h1 {
  font-size: 16px;
}

아래 css 칸은 글자 크기를 바꾸는 CSS입니다. CSS는 4단원의 규칙의 모양에서 배우니, 지금은 'h1의 글자 크기를 16px로 바꾸는 줄'로만 읽으세요. 제목 글자가 본문만 해졌지만, 나무에는 여전히 h1이 있습니다. 제목 차례에서도 '김치볶음밥'은 그대로 1단계 제목입니다(브라우저 규칙 3). 그러니 제목 태그는 글의 차례를 보고 고르고, 크기는 CSS로 맞춥니다. 글자 크기를 정하는 법은 글자 꾸미기에서 봅니다.

예제

김치볶음밥 페이지의 제목들입니다. 제목만 모은 차례를 들여쓰기로 먼저 적어 보고, 화면에서 글자가 가장 작은 제목이 무엇일지 짐작한 뒤 결과 화면을 펴 보세요.

<h1>김치볶음밥</h1>
<h2>재료</h2>
<h3>주재료</h3>
<h3>양념</h3>
<h2>조리 순서</h2>
<h2>영양 정보</h2>

자주 틀리는 곳

틀린 생각: 제목 태그는 글자 크기를 고르는 것이다.

화면에서 제목마다 크기가 달라, 원하는 크기에 맞는 숫자를 고르면 될 것 같습니다.

<h2>재료</h2>
<h5>양념</h5>

'양념'을 작게 보이려고 h5를 골랐습니다. 화면에는 작은 제목이 보이지만, 제목 차례에서는 3 · 4단계가 빈 채 5단계로 건너뜁니다.

맞는 규칙: 제목 태그의 숫자는 글의 단계입니다. 바로 위 제목보다 하나씩만 내려가게 고르고, 크기는 CSS로 바꿉니다(브라우저 규칙 3).

틀린 생각: 사이트 이름도 크게 보여야 하니 h1으로 쓴다.

페이지 맨 위의 사이트 이름이 가장 중요해 보여 h1을 붙이게 됩니다.

<h1>레시피 노트</h1>
<h1>김치볶음밥</h1>

제목 차례의 맨 위가 둘이 되어, 이 페이지가 무엇에 관한 것인지 차례만 보고는 알 수 없습니다.

맞는 규칙: h1은 그 페이지의 주제 하나에만 씁니다. 김치볶음밥 페이지의 h1은 '김치볶음밥'입니다. 사이트 이름을 두는 자리는 5단원 '구조와 이름표'에서 봅니다.

틀린 생각: 굵고 크게 보이고 싶은 문장은 제목 태그로 감싼다.

제목 태그가 글을 굵고 크게 그리니, 강조하고 싶은 문장에 쓰고 싶어집니다.

<h2>조리 순서</h2>
<h3>김치는 잘 익은 것을 쓰세요.</h3>

이 문장은 제목이 아닌데 제목 차례에 '조리 순서' 아래 작은 제목으로 들어갑니다. 차례를 따라가는 사람은 여기서 새 갈래가 시작된다고 여기게 됩니다.

맞는 규칙: 제목 요소는 그 아래 글의 제목에만 씁니다. 문장 속 중요한 글은 문단과 강조의 strong으로 표시합니다.

확인 문제

1. 예제의 '양념'을 <h4>양념</h4>로 바꿨습니다. 제목 차례는 어떻게 바뀔까요?

<h1>김치볶음밥</h1>
<h2>재료</h2>
<h3>주재료</h3>
<h4>양념</h4>
<h2>조리 순서</h2>
<h2>영양 정보</h2>

• ① 차례는 그대로이고, '양념'의 글자만 작아진다
• ② '양념'이 '주재료' 아래 한 단계로 들어간다
• ③ 3단계가 비어, 빈 단계가 생긴다

2. 사진 동아리 공지의 제목들입니다. '준비물'은 '모임 안내'에 딸린 작은 제목입니다. ____ 두 자리에 같은 요소 이름을 쓰세요.

<h1>사진 동아리</h1>
<h2>모임 안내</h2>
<____>준비물</____>
<h2>가입 방법</h2>

<h1>사진 동아리</h1>
<h2>모임 안내</h2>
<h3>준비물</h3>
<h2>가입 방법</h2>

3. 카페 메뉴판입니다. CSS로 '음료'의 글자를 40px로 키웠습니다. 제목 차례에서 1단계 제목은 무엇일까요?

<h1>플로우 카페</h1>
<h2>음료</h2>
<p>커피 4000원</p>

h2 {
  font-size: 40px;
}

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 1절 코드를 hello.html의 body 안에 붙여 저장하고 엽니다. 그다음 <h3>양념</h3>를 <h4>양념</h4>로 바꿔 저장 · 새로고침하고, 화면에서 무엇이 달라졌는지와 제목 차례가 어떻게 바뀌는지 적어 봅니다. 제목 차례는 화면에 보이지 않습니다. 적은 차례는 2절의 '(3단계 없음)' 차례와 견주어 보고, 이 단원 끝 검사기로 틀린 HTML 찾기에서 이 파일을 검사기에 넣어 건너뛴 단계가 Error로 나오는지 봅니다. 파일을 만들고 여는 법은 준비: VS Code와 작업 폴더에 있습니다.