article은 떼어 내 다른 곳에 옮겨도 뜻이 통하는 글 한 편이고, section은 그 안에서 한 주제로 묶은 부분입니다. 가르는 물음은 '이것만 떼어 보내도 말이 되나?' 하나입니다. 되면 article, 무엇의 한 부분이면 section, 모양 때문에 묶을 뿐이면 div를 고릅니다.
article과 section은 둘 다 '내용의 한 덩어리'처럼 보여 아무 데나 쓰기 쉽습니다. 기준 없이 고르면 같은 부분을 페이지마다 다르게 감싸고, 코드를 읽는 사람은 어디가 글 한 편이고 어디가 그 부분인지 알 수 없습니다.
이 레슨에서는 떼어 보는 물음으로 둘을 가르고, 영역 안 제목 단계를 맞추는 법을 봅니다.
1떼어 보내도 말이 되면 article
김치볶음밥 레시피 한 장은 다른 사이트에 옮겨 실어도 그대로 읽힙니다. 그래서 레시피 전체는 article입니다.
재료 부분만 떼어 보내면 '밥 2공기'만 남아 무슨 요리의 재료인지 알 수 없습니다. 레시피의 한 부분이라 section입니다.
<article>
<h1>김치볶음밥</h1>
<section>
<h2>재료</h2>
<ul>
<li>밥 2공기</li>
</ul>
</section>
<section>
<h2>조리 순서</h2>
<ol>
<li>김치 볶기</li>
</ol>
</section>
</article>article의 역할articlesection의 역할generic
레시피 페이지는 article 하나 안에 section 여럿이 든 꼴이 됩니다. 결과 화면은 감싸지 않은 것과 같습니다(브라우저 규칙 3). 잰 값의 역할 article은 화면 읽기 프로그램이 이 덩어리를 글 한 편으로 받는다는 뜻입니다.
2한 부분이면 section, 묶을 뿐이면 div
떼어 보는 물음의 답으로 요소를 고릅니다.
| 이것만 떼어 보내면 | 고르는 요소 | 레시피 노트에서 |
|---|---|---|
| 그대로 말이 된다 | article | 레시피 한 장 |
| 무엇의 부분인지 있어야 말이 된다 | section | 재료 · 조리 순서 · 영양 정보 |
| 뜻은 없고 모양 때문에 묶었다 | div | 카드의 요리 이름과 배지 |
section은 목차에 이름을 올릴 만한 부분이라, 보통 제목으로 시작합니다.
1절 잰 값에서 section의 역할은 뜻 없는 묶음과 같은 generic이었습니다. 이름 없는 section은 화면 읽기 프로그램의 영역 목록에 들지 않습니다. 이름을 붙이면(aria-label — 7단원) 역할이 region이 되어 목록에 듭니다.
3제목 단계는 영역 안팎과 맞물린다
article의 제목은 h1, 그 안 section의 제목은 h2입니다. 영역이 한 겹 안으로 들어갈 때 제목도 한 단계 내려가, 제목 차례가 영역의 짜임과 같아집니다.
- 김치볶음밥
- 재료
- 조리 순서
영역은 제목 단계를 정해 주지 않습니다. 제목 숫자는 늘 그 줄에 쓴 대로이고, 단계를 맞추는 일은 쓰는 사람의 몫입니다(제목 h1~h6).
예제
김치볶음밥 페이지의 본문에 영양 정보 부분까지 더해 영역을 나눴습니다. 목록 · 표는 빼고 영역과 제목만 보입니다.
<main>
<article>
<h1>김치볶음밥</h1>
<section>
<h2>재료</h2>
</section>
<section>
<h2>조리 순서</h2>
</section>
<section>
<h2>영양 정보</h2>
</section>
</article>
</main>main의 역할mainarticle의 역할article
본문(main) 안에 글 한 편(article), 그 안에 부분 셋(section)입니다. 제목 차례도 같은 짜임입니다 — '김치볶음밥' 아래 '재료' · '조리 순서' · '영양 정보'가 한 단계씩 들어갑니다.
자주 틀리는 곳
틀린 생각: section 안은 새 영역이니 제목을 h1부터 다시 쓴다.
영역마다 제 제목이 있으니, 그 안에서 가장 큰 제목 h1으로 시작해도 될 것 같습니다.
<article>
<h1>김치볶음밥</h1>
<section>
<h1>재료</h1>
</section>
</article>article > h1의 글자 배율2section h1의 글자 배율2
- Warning4줄Consider using the “h1” element as a top-level heading only — or else use the “headingoffset” attribute (otherwise, all “h1” elements are treated as top-level headings by many screen readers and other tools).
크롬은 section 안의 h1도 바깥 h1과 같은 크기로 그립니다(브라우저 글자 크기 설정이 처음 그대로일 때 둘 다 32px). 잰 값의 글자 배율이 둘 다 2입니다. 검사기는 Warning을 냅니다 — 'h1은 맨 위 제목에만 쓰라, 많은 화면 읽기 프로그램이 모든 h1을 맨 위 제목으로 친다'는 뜻입니다. 가운데 'headingoffset 속성'은 안쪽 제목의 단계를 한꺼번에 내리는 속성으로, 이 과목에서는 쓰지 않고 제목 단계를 맞게 고릅니다. 제목 차례에서 '재료'가 '김치볶음밥'과 같은 단계에 섭니다.
맞는 규칙: 영역은 제목 단계를 정해 주지 않습니다. article의 제목이 h1이면 그 안 section의 제목은 h2로 씁니다(브라우저 규칙 3).
틀린 생각: div보다 뜻이 있어 보이니, 묶을 곳은 모두 section으로 감싼다.
요리 이름과 배지를 한 줄에 놓으려고 묶었는데, 이왕이면 뜻 있는 요소가 나아 보입니다.
<section>
<h2>계란말이</h2>
<span>한식</span>
</section>section의 역할generic
화면도 역할도 div로 묶은 것과 같습니다. 이 묶음은 무엇의 한 부분이 아니라 모양 때문에 모은 것이라, 코드를 읽는 사람만 '한 주제의 부분'이라고 잘못 읽습니다.
맞는 규칙: 모양 때문에 묶을 뿐이면 div입니다(div·span과 블록·인라인). section은 떼어 보면 무엇의 부분인지가 남는 주제 덩어리에만 씁니다.
틀린 생각: article은 글이 긴 칸이다.
'기사'라는 이름 때문에, 긴 글 한 덩어리면 article로 감싸고 싶어집니다.
<article>
<p>
잘 익은 김치와 찬밥만 있으면
15분 만에 끝나는 요리입니다.
</p>
</article>article의 역할article
잰 값의 역할이 article이라, 화면 읽기 프로그램은 이 문단을 글 한 편으로 받습니다. 하지만 이 문단만 떼어 보내면 무슨 요리 이야기인지 알 수 없습니다. 레시피 article 안의 소개 문단일 뿐입니다.
맞는 규칙: article을 가르는 것은 길이가 아니라 '떼어 보내도 말이 되나'입니다. 짧은 댓글 하나도 그대로 옮겨 읽히면 article입니다.
확인 문제
1. 1절 코드에서 재료를 감싼 section을 article로 바꿨습니다(여는 태그와 닫는 태그 둘 다). 무엇이 달라질까요?
<article>
<h1>김치볶음밥</h1>
<article>
<h2>재료</h2>
<ul>
<li>밥 2공기</li>
</ul>
</article>
</article>- ① 화면은 그대로이고, 재료가 떼어 내도 되는 글 한 편으로 읽힌다
- ② 재료 목록이 한 칸 들여 그려진다
- ③ 아무것도 달라지지 않는다 — 둘은 이름만 다른 같은 요소다
힌트
결과 화면과 잰 값의 역할을 따로 봅니다. 1절 잰 값에서 section의 역할이 무엇이었는지 떠올립니다.
정답
① — 화면은 그대로이고, 재료가 떼어 내도 되는 글 한 편으로 읽힙니다.
article article의 역할article
- 영역 요소는 모양을 바꾸지 않아 화면은 같습니다. 역할은
generic에서article로 바뀌어, 화면 읽기 프로그램이 재료를 따로 읽어도 되는 글로 받습니다(브라우저 규칙 3). 재료만으로는 말이 안 되니 맞는 요소는section입니다. - ②는 안쪽 영역을 들여 그린다고 본 것입니다. 목록이 들여 그려지는 것은 목록의 기본 스타일 때문이고, 감싼 요소와 상관없습니다.
- ③은 화면이 같으니 뜻도 같다고 본 것입니다. 잰 값의 역할이 다릅니다.
2. 떡볶이 레시피입니다. ____ 자리에 재료 부분의 제목 한 줄을 쓰세요. 글은 '재료'입니다.
<article>
<h1>떡볶이</h1>
<section>
____
<ul>
<li>떡 2컵</li>
</ul>
</section>
</article>힌트
article의 제목이 몇 단계인지 보고, section이 그 안 몇 겹째인지 셉니다.
정답
<h2>재료</h2>
section h2의 보이는 글재료
article의 제목이 h1이고 section은 그 안 한 겹이라, 제목은 한 단계 아래 h2입니다. h1이면 제목 차례에서 '떡볶이'와 같은 단계가 되고, h3이면 h2 단계를 건너뜁니다.
3. 독서 동아리 공지 페이지입니다. 공지 둘을 학교 게시판에도 하나씩 옮겨 실으려 합니다. ____ 자리(넷 모두 같은 이름)에 알맞은 요소는 무엇일까요?
<main>
<h1>독서 동아리 공지</h1>
<____>
<h2>10월 모임 안내</h2>
<p>셋째 주 금요일 6시</p>
</____>
<____>
<h2>새 회원 모집</h2>
<p>신청은 10월 말까지</p>
</____>
</main>- ①
article - ②
section - ③
div
힌트
공지 하나만 떼어 게시판에 붙였을 때, 그것만 읽고도 무슨 말인지 알 수 있는지 봅니다.
정답
① article — 공지 하나만 옮겨 실어도 그대로 읽히는 글 한 편입니다.
<main>
<h1>독서 동아리 공지</h1>
<article>
<h2>10월 모임 안내</h2>
<p>셋째 주 금요일 6시</p>
</article>
<article>
<h2>새 회원 모집</h2>
<p>신청은 10월 말까지</p>
</article>
</main>article의 역할article
- 떼어 보내도 말이 되면
article입니다. 짧은 공지 하나도 같습니다. - ②는 페이지 안의 덩어리라 부분이라고 본 것입니다. 떼어 낸 공지에 '무엇의 부분인지'가 더 필요하지 않습니다.
- ③은 뜻을 적지 않는 묶음입니다. 뜻이 맞는 요소가 있으면 그것을 먼저 고릅니다.
컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요.
hello.html의 body 안을 1절 코드로 바꿔 저장하고 엽니다. 그다음 두 section의 h2를 모두 h1으로 바꿔(여는 태그와 닫는 태그 둘 다) 저장 · 새로고침하고, '재료'와 '김치볶음밥'의 크기를 견줘 봅니다. W3C 검사기의 칸의 글을 모두 지우고(전체 선택 → 지우기) 파일 전체를 붙여 넣으면 Warning이 둘 뜹니다.
파일을 만들고 여는 법은 준비: VS Code와 작업 폴더에 있습니다.