이 글은 아래 원문을 번역한 글로 의역이 있을 수 있습니다. 정확한 의미를 파악하고 싶으신 분은 원문을 참고해주시기 바랍니다.
원문: https://www.smashingmagazine.com/2022/07/article-section-elements-accessibility/
저작권 정보: https://www.smashingmagazine.com/
요약
이 글에서 Olushuyi(필자)는 문서를 작성할 때 <article> 요소와 <section> 요소 중 어느 것을 사용할지 결정하는 데 도움이 되는 기준을 알아본다. 콘텐츠를 그룹으로 묶는 것이 접근성에 어떤 영향을 미치는지, 그리고 어떻게 하면 사용자가 모든 것을 고려하게 할 수 있는지 살펴본다.
"<section> 요소를 사용해야 할까요? 아니면 <article> 요소를 사용해야 할까요?" 컨테이너 요소 내에서 콘텐츠를 그룹으로 묶을 때마다 건강에 좋지 않은 질문을 스스로에게 여러 번 해야 했다.
트위터에서 나눈 대화는 필자가 이 질문을 연구하게 만들었고, 결국 이 글을 쓰도록 이끌었다. Grace Snow와 대화하면서 필자가 즐겨 사용하는 HTML 작성 방식을 공유했다. 필자는 HTML을 작성하는 동안 스타일을 생각하지 않기 위해, 콘텐츠 없이 HTML 구조를 먼저 작성하는 것을 좋아한다. 그녀는 필자가 section과 article 요소를 의미론적으로 사용하려고 시도하는 중간에, 잘못 사용하고 있을지도 모른다는 사실을 알아챘다.
section과 article 중 하나를 선택하기 위해선, 콘텐츠가 필요한 것으로 밝혀졌다. 사실 이 두 요소로 좁히기 위해서도 콘텐츠가 필요하다.
우리는 콘텐츠를 고려하여 매번 최선의 결정을 내리게 하는 기준을 세울 수 있다.
깊이 들어가 보자!
의미론적 문서(Document Semantics)
HTML은 관련 있으면서 또 별개인 두 개의 정보를 사용자 장치에 전달한다. 첫 번째는 시각적 표시 정보로 장치에 기본적으로 문서가 어떻게 표시되어야 하는지 알려준다.
두 번째는 의미론적 정보 또는 단순히 의미론(semantics)이라고 알려져 있다. 이는 문서에서 "의미", 즉, 각 요소의 목적과 그들 사이의 관계를 전달한다. 이런 것을 HTML 웹 표준에서는 요소가 무언가를 "표현(represents)"한다고 말한다. 즉, 웹 표준에서 "표현(represents)"이란, 요소에 내장된 의미론적 정보이다.
h1 요소는 이 두 가지 정보가 드러나있다. h1의 시각적 표시 정보는 브라우저에서 h1 요소를 만날 때 문서의 나머지 다른 부분보다 굵고 큰 서체로 보이게 한다. h1의 의미론적 정보는 요소가 해당 섹션에서 가장 상위 주제라는 것을 나타낸다.
정안인은 브라우저와 같은 장치에서 시각 자료를 관찰하면서 의미론적 정보를 포착할 수 있다. 제목의 경우에는 서체의 크기와 굵기의 차이에서, 목록의 경우에는 글머리 기호나 번호의 존재로 구별할 수 있다. 시각에 의존하지 않는 사용자는 시각이 아닌 방법으로 의미론적 정보를 나타내도록 요청할 수 있는 선택지나 장치를 통해 의미론적 정보에만 접근할 수 있다. 이런 선택지나 장치를 일반적으로 보조 기술이라고 한다.
HTML은 브라우저가 접근성 API로 추출하고, 보조 기술을 통해 사용자가 해석할 수 있는 의미를 내포하는 몇 가지 요소를 규정한다. 이 의미는 사용자가 방문하는 웹사이트에 대한 유익한 정보를 제공한다. 문서 구조와 탐색(navigation) 정보, 혹은 둘 다인 경우도 있다.
그러나 의미 정보를 전달하는 것은 문자 콘텐츠(text content)를 직접적으로 감싼 요소뿐만이 아니다. 다른 요소를 그룹화하는 요소들도 의미를 갖는다.
내 그룹화가 의미론적 역할을 하는가?
우선, 문서 구조를 이해하기 위해 콘텐츠를 지금 바로 그룹화해야 할 필요가 있는지 생각한다. 이해하기 쉽게 나누자면, 필자는 이런 식으로 자문할 것이다.
- 이 블록의 콘텐츠는 같이 읽을 때 전체 문서 구조에 어떤 의미가 있는 공통적인 무언가를 공유할 가능성이 있는가?
- 문서 구조를 보여주지 않고 설명한다고 할 때, 문서 구조를 인식할 수 있는 특정 그룹 영역이 있다고 말할 수 있는가?
만약 이 질문들에 대한 답이 "아니요"라면, Scott O'Hara의 말처럼 <div>가 더 적절할지도 모른다. Scott의 글은 당신의 그룹화가 어떤 역할을 하는지 더 자세히 검토하고, 필자가 만든 질문보다 더 나은 질문을 만드는데 도움이 될 수 있다. <div> 요소에 대해서는 Scott이 충분히 다루고 있기 때문에 이 글에서는 다룰 생각이 없다. 필자는 그저 당신이 그룹화한 것이 문서 구조에 영향을 받는지 확인해야 한다고 먼저 말하고 싶다. 만약 그렇다면, 그것이 <article>인지 <section>인지 결정하기 위해 더 생각해볼 수 있다.
분명히 말하지만, 그룹화가 문서 구조에 영향을 받아야지만 <article>이나 <section>을 고려할 수 있다는 말은 아니다. 고려할만한 이유 중 하나라는 말이다. 예를 들어, 그룹화한 콘텐츠는 별개의 디자인이나 언어를 공유하면서, 동시에 문서 의미론에 영향을 줄 수 있다.
내 그룹화는 어떤 의미론적 역할을 하는가?
이제 그룹화된 콘텐츠는 문서를 설명하는 데 일조하는 바가 있다고 결론지어졌다. 다음 단계는 문서 구조에서 그룹화된 콘텐츠가 의도하는 바를 article과 section 요소의 의미론적 의미 중 어느 것이 가장 잘 설명하는지를 알아본다.
HTML 웹 표준의 설명
이제 HTML 웹 표준을 살펴보고, section과 article 요소와 그 안에 내재된 의미를 이해해보자.
HTML 웹 표준에서 article 요소의 정의는 다음과 같다.
article 요소는 문서, 페이지, 애플리케이션, 사이트의 완전한 혹은 그 자체로 독립된 하나의 구성을 나타낸다. 즉, 원칙적으로 신디케이션(syndication)처럼 독립적으로 분리되거나 재사용될 수 있다. 이는 포럼 게시물, 잡지, 신문 기사, 블로그 항목, 사용자 댓글, 상호작용하는 위젯이나 간단한 기계 장치, 또는 기타 독립적인 콘텐츠 항목이 될 수 있다.
HTML 웹 표준에서 section 요소의 정의는 다음과 같다.
section 요소는 문서나 애플리케이션의 일반적인 section을 나타낸다. 이 맥락으로 보면 section은 일반적으로 제목과 함께 콘텐츠를 주제별로 그룹화한 것이다.
section의 예시로 챕터, 탭으로 된 다이얼로그의 다양한 탭 페이지들, 논문에서 번호가 매겨진 부분 등을 들 수 있다. 웹 사이트의 홈페이지는 소개, 새로 업로드된 항목, 연락처 정보 section으로 분리할 수 있다.
HTML 웹 표준은 section 요소를 언제 사용하면 되는지 좀 더 구체적으로 좁힐 수 있도록 다음과 같은 단서를 제공한다.
일반적으로 section 요소는 요소의 콘텐츠들이 문서의 개요에 명시적으로 나열되는 경우에 적절하다.
위 링크에서는 꽤나 정교한 예시를 제공한다. 그러나, 그 선택은 아주 주관적이라고 말해도 무방하다. 저자들은 특정 그룹이 "완전한"지, "독립적으로 배포 가능한"지, 결정해야 하고 이 경우 article을 선택할 것이다. 또는 "콘텐츠의 주제별로 그룹화"한 경우라면 section을 선택할 수 있다. 몇 가지 작업을 고려해보자.
만약 당신이 Smashing Magazine과 같은 블로그를 만든다면, 모든 블로그 글의 예고편 목록을 포함하는 초기 화면의 부분을 감싸기 위해 어떤 요소를 사용할 것인가? 그 감싼 부분에서, 각각의 블로그 글 예고편은 무엇으로 감쌀 것인가? 만약 당신이 블로그 글 예고편 중 하나를 클릭하여 특정 글 페이지로 들어오면, 블로그 글은 어떤 요소로 감쌀 것인가?
만약 당신이 트위터를 만든다면, 사용자들의 타임라인에 있는 각 트윗은 "그 자체로 완전"하고, "원칙적으로 별도로 재배포가 가능"하니 article로 감쌀 것인가? 아니면 "애플리케이션의 일반적인 section"이니 section으로 감쌀 것인가? 아니면, 이 경우엔 의미론적으로 div가 적절할까? 이 트위터 예시에서, 타임라인 컨테이너를 전체 트위터 애플리케이션의 section으로 보나요? 아니면 타임라인은 트위터 애플리케이션의 article인가요? 어쩌면 다 케이크일 뿐이고 진짜는 없을지도 모른다.
이제 이 두 가지 시나리오에 우리의 기준을 적용해보자.
HTML 웹 표준의 의미 이해
필자는 이 혼란의 원인이 우리의 기준이라고 생각한다. 적어도 필자는 그랬다.
article 요소는 기사(article)에서 따온 이름이 아니다. 나는 기사에서 따왔다고 잘못 생각했었고, 아마 당신도 그랬을 것이다. 필자는 문자 그대로 article이라는 요소가 존재한다는 것을 알게 되었고, WHATWG가 이 글과 같은 블로그 글을 감싸기 위한 전용 요소를 만들 정도로 블로그 글(article)이 중요하다고 여겨진다고 생각했다. 이는 필자에게 직관적으로 느껴졌지만 틀렸다. 이게 웹 표준의 존재 이유가 아닐까 싶다. 직관이 항상 동일한 것은 아니다.
옥스퍼드 영어 사전과 다른 사전들에서, article이란 단어의 정의 중 하나는 "특정한 항목 또는 별개의 것"이다. 이게 바소 웹 표준에서 말하는 article 요소이다. article 요소에 대한 웹 표준에서 정의가 사전에 바로 있지만, 필자가 말했듯이, 이는 필자가 일반적으로 "article"이라는 단어를 사용하는 의미는 아니다. 사실, 사전에서 "article"의 첫 번째 정의는 '(신문·잡지의) 글, 기사'이다.
따라서, 웹 표준에서 article을 어떤 의미로 사용하는지 분명히 알지만, 우리는 여전히 그렇게 받아들이기 쉽지 않다.
웹 표준에서 말하는 의미에 좀 더 적응하기 위해, Bruce Lawson이 쓴 article 요소를 이해하기 좋은 글을 보자.
필자는 보통 다음과 같이 대답한다. <article>을 신문 기사나 블로그 글로 생각하지 말고, 옷 중의 하나처럼 다른 맥락에서 재사용될 수 있는 별개의 무언가로 생각해라. 당신의 바지가 article이고, 당신은 그것을 다른 옷과 함께 입을 수 있다. 여러분의 셔츠도 article이고, 또 다른 바지와 함께 입을 수 있다. 당신의 무릎까지 오는 가죽 스틸레토 부츠도 article이다. 아마 이 중 하나만 입거나 신지는 않을 것이다.
즉, article은 문서에서 떼어낼 수 있고, 주변 콘텐츠에서 떨어져 다른 곳에 위치할 수 있고, 그럼에도 여전히 그 내용이 완전히 말이 되는 콘텐츠를 나타낸다.
다음과 같은 방식으로 article을 쓸 수 있다. 거실의 미관을 개선하기 위해 탁상 조명(독립된 콘텐츠 그룹)을 사용하듯이 말이다. 이는 또한 소파, TV 콘솔, 커튼 등(가까운 주변의 콘텐츠)을 보완할 수도 있다. 그러나 이 탁상 조명을 방으로 가져가서 침대 머리맡이나 책상 위에 두더라도 여전히 완벽한 조명으로 볼 수 있다.
반면 section 요소는 "콘텐츠의 주제별 그룹화"를 나타낸다. section은 더 큰 그룹의 일부이기 때문에 그 자체로는 완전히 이해할 수 있는 내용이 아닐 수 있다. 독립적일 수도 있지만, 전체적인 콘텐츠 주제에서 따로 분리될 가능성은 적다. 웹 표준에서 말했듯이, "section의 예시로 챕터, 탭으로 된 다이얼로그의 다양한 탭 페이지들, 논문에서 번호가 매겨진 부분 등을 들 수 있다. 웹 사이트의 홈페이지는 소개, 새로 업로드된 항목, 연락처 정보 section으로 분리할 수 있다."
이게 일반적으로 section이 제목으로 사용되고, section이 관련된 더 큰 문서에서 어떤 부분에 해당하는지 설명하는 콜백의 역할을 하는 이유이다.
조명 예시로 돌아가 보자. 우리의 조명은 하나의 물건이지만, 실제로는 기술적으로는 분리할 수 있고 실제로는 그렇지 못한 부분을 다른 부분을 갖고 있다. 필자는 조명의 우산 모양 후드를 벗기고, 전구를 빼고, 받침을 치우고, 직립 스탠드를 분리할 수 있다. 이것들은 합쳐져서 조명을 구성하지만, 분해되면 그렇지 않다. 만약 당신이 조명의 우산 모양 후드를 받는다면 이렇게 생각할 것이다. "이것은 어디서 난거지? 나머지는 어디 있지?" 만약 당신이 전구를 받는다면, "이건 어디에 쓰는 거지?"라고 생각할 것이다.
콘텐츠 그룹화해보기
블로그 초기 페이지
먼저, 블로그 웹 사이트를 예로 들어보자. 우리 블로그 Smashing Magazine의 초기 페이지를 살펴보자. 초기 페이지의 주요 영역은 다음과 같다.
- 사이트 탐색(navigation)이 있는 헤더
- 주요 영역
- 주제별 탐색(navigation)이 있는 푸터
<header>
<nav>
<!-- Website navigation goes here -->
</nav>
</header>
<main>
<!-- We would group the content that should go here -->
</main>
<footer>
<nav>
<!-- Topic navigation goes here -->
</nav>
</footer>이 그룹들은 이미 해당 그룹을 나타내는 요소들을 갖고 있다. 우리는 이것을 section과 article 중 무엇으로 할지 결정하는 게 아니다.
주요 콘텐츠에서 식별 가능한 그룹은 다음과 같다.
- 선정된 글
- 뉴스레터 구독
- 구성 요소와 가이드
- 최신 글
- Smashing 제품과 제안
- Smashing 콘퍼런스
- 커뮤니티 구성원들의 외부 글
이런 그룹화된 콘텐츠를 무엇으로 감싸야할까? 우리의 기준을 적용해보자. 각 콘텐츠 그룹에 아래와 같은 기준을 따라보자.
- 이 콘텐츠를 그룹화하는 게 문서 구조를 설명하는데 도움이 되는가?
- 그렇지 않으면, div를 사용할 수 있다.
- 만약 그렇다면, 그 역할이 section이나 article과 일치하는지 생각한다.
- 문서 구조에서 어떤 역할을 하는가?
- 그룹의 콘텐츠가 문서의 개요를 이해하는데 도움을 주는 주제와 관련이 있는가? 그럼 아마도 section일 것이다.
- 그룹의 콘텐츠가 문서의 주제나 개요와 완전히 부합하지는 않지만 따로 떼어서 다른 페이지로 재배포할 수 있는 내용이 포함되어 있는가? 그럼 아마도 article일 것이다.
필자가 그룹화한 내용을 보기 전에 종이에 당신 스스로 그룹화해보기를 권장한다. 그러면 각 콘텐츠 그룹의 역할을 어떻게 생각하는지 서로 비교해볼 수 있다.
이제 Smashing Magazine의 골격을 그룹화해보자.
- 선정된 글
- 문서 구조에서 역할이 있는가? 역할이 있다. 무슨 역할인가? 초기 페이지에 있는 콘텐츠의 개요 중 하나이다. 판결: section.
- 뉴스레터 구독
- 문서 구조에서 역할이 있는가? 음.. 글쎄, 초기 페이지의 중심 주제에 정확히 포함되는 건 아니라 좀 확신이 서질 않는다. 그냥 '아니요'라고 하겠다. 판결: div
- 구성 요소와 가이드
- 문서 구조에서 역할이 있는가? 역할이 있다. 무슨 역할인가? 초기 페이지에 있는 콘텐츠의 개요 중 하나이다. 판결: section.
- 최신 글
- 문서 구조에서 역할이 있는가? 역할이 있다. 무슨 역할인가? 초기 페이지에 있는 콘텐츠의 개요 중 하나이다. 판결: section.
- Smashing 제품과 제안
- 문서 구조에서 역할이 있는가? 역할이 있다. 무슨 역할인가? 초기 페이지에 있는 콘텐츠의 개요 중 하나이다. 판결: section.
- Smashing 콘퍼런스
- 문서 구조에서 역할이 있는가? 역할이 있다. 무슨 역할인가? 초기 페이지에 있는 콘텐츠의 개요 중 하나이다. 판결: section.
- 커뮤니티 구성원들의 외부 글
- 문서 구조에서 역할이 있는가? 역할이 있다. 무슨 역할인가? 초기 페이지에 있는 콘텐츠의 개요 중 하나이다. 판결: section.
필자의 Smashing Magazine 초기 페이지는 다음과 같다.
<header>
<nav>
<!-- Website navigation -->
</nav>
</header>
<main>
<section>
<!-- Selected articles -->
</section>
<div>
<!-- Newsletter subscription -->
</div>
<section>
<!-- Components and guides -->
</section>
<section>
<!-- Latest posts -->
</section>
<section>
<!-- Smashing products and offerings -->
</section>
<section>
<!-- Smashing conferences -->
</section>
<section>
<!-- External articles from community members -->
</section>
</main>
<footer>
<nav>
<!-- Topic navigation -->
</nav>
</footer>몇몇 그룹은 다르게 판단할 수 있다. 예를 들어, "뉴스레터 구독"의 경우, 필자는 문서 개요에 포함하고 싶지 않고 방문하는 페이지의 문서 개요에서 보고 싶지 않다. 만약 뉴스레터 구독 플랫폼인 Substack이면, 뉴스레터 구독 영역이 왜 section이어야 하는지 확실히 알 수 있다. 여기서 필자는 div를 사용했지만, aside일 수도 있다. 물론 이 글에서 설명할 내용은 아니다. 요점은 우리가 우리의 콘텐츠를 어떻게 판단하느냐는 것이다.
필자의 요점은 콘텐츠를 그룹화할 때 역할을 생각하고 맞추면 더 나은 결정을 하게 된다는 말이다. 당신은 의식적으로 당신의 기술적 부채에 직면하게 될 사용자들과 다른 개발자들이 이해할 수 있는 콘텐츠를 만들려고 노력했을 것이다.
블로그 게시글
이제 우리는 "선정된 글" 영역에서 블로그 글 하나를 클릭했고, 그 글 자체 페이지로 이동했다. 당신이 읽고 있는 이 특정 블로그 글은 어떻게 그룹화되어 있는가? 기본 틀은 다음과 같다.
<header>
<nav>
<!-- Website navigation -->
</nav>
</header>
<main>
<!-- This article is wrapped here -->
</main>
<footer>
<nav>
<!-- Topic navigation -->
</nav>
</footer>article로 감싸길 원하는가, section으로 감싸길 원하는가, 아니면 div로 감싸길 원하는가?
이 글을 더 작은 그룹으로 나눌 수 있는가? section 여러 개나 article 몇 개로 나눌 수 있는가? 글에 재배포 가능한 부분이나 문서의 개요에 포함할 부분이 있는가?
필자는 필자가 그룹화한 내용을 말하기는 삼가고 싶지만, 당신이 무엇을 사용할지는 궁금하다. 나중에 살펴볼 테니 댓글에 남겨두면 좋겠다.
웹 애플리케이션: 트위터
웹 애플리케이션, 트위터를 통해 한 번 더 연습해보자.
- 타임라인 컨테이너는 트위어 애플리케이션의 section인가? article인가? 아니면 div인가?
- 사용자 타임라인에 있는 각 트윗이 "그 자체로 완전"하고, "원칙적으로 별도로 재배포가 가능"한 부분이니 article로 감싸겠는가? 아니면 "애플리케이션의 일반적인 section"이니 section으로 감싸겠는가? 아니면 이 경우엔 div가 의미론적으로 적절할까?
우리의 기준을 적용한다면 아래처럼 해볼 수 있다.
타임라인은 문서 개요의 일부이지만, 어느 정도는 독립적으로 배포할 수 있다. 타임라인을 꺼내면 그 자체로도 잘 버틸 수 있을 것이다. 이는 article이나 section을 적용할 수 있을 것처럼 보인다. 그래서 더 물어봐야 한다. 내가 정말로 의도하는 바는 무엇인가? 재배포를 할 수 있길 원하는가, 아니면 애플리케이션의 일부로 사용하길 원하는가? 만약 당신이 트위터를 사용한다면, 당신은 당신의 타임라인이 재배포 가능하다는 부분이란 말보다 홈페이지에 필수적인 부분이라는 말에 더 동의할 것이다. 따라서 section으로 합의를 보겠다.
타임라인 내의 각 트윗은 article이 될 것이다. 이는 각 트윗이 타임라인 내의 다음 트윗과 연관된 주제가 아니기 때문에다. 즉, 개요의 일부가 될 수 있다고 말할 수 있을 정도로 연관된 내용이 아니기 때문이다. 따라서 트윗은 section이 아니다. 이것들은 "그 자체로 완전"하고 "원칙적으로 독립적으로 배포될 수 있다." 당신은 심지어 트윗을 클릭해서 댓글과 인용 트윗을 통해 새로운 세상으로 들어갈 수도 있다.
정말, 진짜로, 당신이 트위터의 div의 바다를 따라 들어가면, 원래 그랬어야 했듯이 멋지고 이쁜 section이 거기에 있다. 이 section은 타임라인을 감싸고 있다. 그리고 만약 당신이 section 안으로 더 깊게 들어가면, 그리고 div를 넘어 더 들어가면, 각 트윗을 감싸고 있는 article을 확인할 수 있다. 필자의 생각이 트위터와 일치했다는 걸 알았을 때 작게 환호를 했다.
이렇게 트위터 내부 구조를 탐색하면서, div의 존재가 의미론적 의미를 희생하거나 상실한다는 뜻은 아니라는 것도 알 수 있다.
중첩된 section과 article, 그리고 그 외 그룹들
이런 요소들은 서로 중첩할 수 있다. 아마 트위터 예시를 보면서 이미 짐작했을 것이다.
div, article, section은 접근성을 손상시키지 않고 서로 안에 들어갈 수 있다. 만약 우리의 기준을 적용하려 한다면, 각 중첩 요소에 대해 질문하고 그에 답에 따라 그룹화할 수 있다.
이 블로그 글 예시를 보자. 몇 단락 전에 필자는 어떻게 감쌀 것인지 답하지 않았다. 여기 필자의 답을 적어두겠다.
필자는 당신이 읽고 있는 이 글을 article로 감쌀 수 있다. 그리고 나서 이 글의 큰 덩어리를 section으로 중첩할 것이다. 왜냐하면 각 부분을 이해하기 쉽게 나누고 싶기 때문이다. 여기까지, 당신이 읽고 있는 이 블로그 글은 아래와 같이 생겼다.
<header>
<nav>
<!-- Website navigation -->
</nav>
</header>
<main>
<article>
<h1>Article versus section: Making your choice count in the larger context of accessibility</h1>
<section>
<h2>Quick summary</h2>
<!-- paragraphs go here -->
</section>
<section>
<h2>Introduction</h2>
<!-- paragraphs go here -->
</section>
<section>
<h2>Document Semantics</h2>
<!-- paragraphs go here -->
</section>
<section>
<h2>Does my grouping play a semantic role?</h2>
<!-- paragraphs go here -->
</section>
<section>
<h2>What semantic role does my grouping play?</h2>
<!-- paragraphs go here -->
<h3>What the HTML specs say</h3>
<!-- paragraphs go here -->
<h3>Understanding what the specs mean</h3>
<!-- paragraphs go here -->
</section>
<section>
<h2>Let's group some content</h2>
<!-- paragraphs go here -->
<h3>A bog website landing page</h3>
<!-- paragraphs go here -->
<h3>An article post on a blog website</h3>
<!-- paragraphs go here -->
<h3>A web application: Twitter</h3>
<!-- paragraphs go here -->
</section>
<section>
<h2>Nesting sections AND articles</h2>
<!-- paragraphs go here -->
</section>
<!-- Rest of article continues here -->
</article>
</main>
<footer>
<nav>
<!-- Topic navigation -->
</nav>
</footer>section을 사용하기로 결정했다면 section에 적절한 제목이 있어야 한다. 웹 표준에 따르면 section은 일반적으로 제목이 있어야 한다. 또한, 문서 개요에 포함되어야 하는 부분은 section으로 만들어야 한다는 걸 기억해라. 이와 같이 제목은 개요에 특정 주제를 제공할 것이다.
필요하다면, section과 article이 다른 그룹화된 콘텐츠를 포함할 수도 있다. 예를 들면, section의 제목을 포함할 header나 콘텐츠와 관련 있는 링크처럼 section의 정보를 보여줄 footer가 있을 수 있다. 원한다면 "더보기" 영역도 footer로 감쌀 수 있다.
main 같은 경우, 계층적으로 올바르게 사용한려면, html, body, div, form의 자식 요소로만 사용할 수 있다. 어떤 경우에도 숨겨진 속성 없이 두 개 이상의 main 요소를 사용할 수 없다.