시맨틱 HTML

docs.scrimba.com

두 페이지가 화면에서는 똑같아 보이면서도 속은 전혀 다르게 만들어졌을 수 있습니다. 한쪽은 담고 있는 내용을 그대로 이름으로 표현한 요소를 씁니다: 헤더, 내비게이션, 메인 영역 같은 식입니다. 다른 한쪽은 모든 것을 똑같은 이름 없는 상자에 넣고, 클래스 이름으로만 구분합니다. 화면만 보면 둘을 구별할 수 없습니다. 하지만 그 밖의 모든 면에서는 완전히 다른 페이지입니다. 의미에 따라 요소를 고르는 것, 이것이 바로 시맨틱 HTML의 핵심입니다.

시맨틱이란 무엇인가

**시맨틱(semantic)**은 "의미와 관련된"이라는 뜻입니다. 시맨틱 요소란 이름 자체가 그 안에 담긴 내용이 무엇인지 말해주는 요소입니다. 문단은 <p> 안에 들어갑니다, 문단이니까요. 내비게이션 메뉴는 <nav> 안에 들어갑니다, 내비게이션이니까요. 태그 이름이 곧 그 대상을 가리킵니다.

거의 모든 페이지를 만능 상자 하나로 만들고 스타일만 입혀서 겉모습을 똑같이 만들 수도 있습니다. 하지만 그렇게 하면 페이지 안의 어떤 것도 자기가 무엇인지 말해주지 않습니다. 내용에 맞는 이름을 가진 요소를 고르는 것은 이사할 때 상자에 라벨을 붙이는 것과 비슷합니다. 라벨 없는 상자에도 물건은 다 들어가지만, 라벨이 있어야 다른 사람이나 브라우저가 상자를 열어보지 않고도 안에 뭐가 있는지 알 수 있습니다.

어떤 요소가 **시맨틱하다**는 것은, 그 이름이 내용이 어떻게 보이는지가 아니라 내용의 의미를 설명한다는 뜻입니다. <nav>, <article>, <button>은 시맨틱합니다: 이 내용이 무엇을 위한 것인지 말해줍니다. <div>와 <span>은 그렇지 않습니다: 그 자체로는 아무 의미도 없는 범용 컨테이너입니다.

이렇게 하면 얻는 이점은 의미가 마크업 안에 그대로 담겨서, 다른 도구들이 그것을 읽어낼 수 있다는 점입니다. 브라우저는 별다른 처리를 하지 않아도 <button>이 클릭 가능하고 키보드로 포커스할 수 있다는 것을 압니다. 스크린 리더는 <nav>를 내비게이션 영역으로 안내할 수 있습니다. 검색 엔진은 <article>을 독립적인 콘텐츠 단위로 취급합니다. 스타일만 입힌 <div>로는 이 중 어느 것도 되지 않습니다, <div>는 자기가 담고 있는 것에 대해 아무런 약속도 하지 않기 때문입니다.

시맨틱은 의미를 전달하는 요소와 픽셀만 전달하는 요소의 차이입니다. <nav>를 쓸 때 당신은 단지 상자를 그리는 게 아니라, 문서에 대한 사실을 하나 명시하는 것입니다: 이 영역은 내비게이션이다. 그 사실은 접근성 트리(accessibility tree)(브라우저가 DOM과 함께 만드는 병렬 구조로, 각 요소의 역할과 상태를 보조 기술에 전달합니다)에 기록되고, 마우스를 쓰는 사용자가 아닌 다른 도구들이 바로 이 정보를 근거로 동작합니다.

실용적인 판단 기준은 대체 테스트입니다. 어떤 요소를 평범한 <div>로 바꾸고 스타일만 똑같이 입혔다면 무엇을 잃게 될까요? <p>나 장식용 래퍼라면 잃는 것이 거의 없습니다. <button>이라면 키보드 포커스, Enter와 Space 키 처리, 스크린 리더의 "버튼" 안내를 모두 잃게 되고, 그것들을 전부 직접 다시 만들어야 합니다. 그 차이가 바로 시맨틱입니다: 요소의 이름이 내용이 무엇인지 알려줬기 때문에 브라우저가 공짜로 제공하는 동작과 의미 말입니다. 이름 있는 요소를 고르는 것은 스타일 취향의 문제가 아니라, 올바른 동작을 가장 저렴하게 얻는 방법입니다.

Juno시맨틱이란 무엇인가 시맨틱하다는 것은 태그 이름이 담고 있는 내용을 그대로 가리킨다는 뜻입니다: 문단은 <p>에, 메뉴는 <nav>에 넣는 식입니다. 모든 것을 평범한 상자에 넣고 스타일로 똑같이 보이게 만들 수도 있지만, 그러면 아무것도 자기가 무엇인지 말해주지 않습니다. 이사할 때 상자에 라벨을 붙여서 누구나 안에 뭐가 있는지 알 수 있게 하는 것과 같습니다.

Juno시맨틱이란 무엇인가 시맨틱 요소는 자신의 의미를 이름으로 드러내고, <div>는 아무것도 드러내지 않습니다. 좋은 점은 브라우저, 스크린 리더, 검색 엔진이 모두 마크업만 보고 그 의미를 그대로 읽어낼 수 있다는 것입니다. 내용을 설명하는 요소를 먼저 찾아보고, <div>는 정말로 설명할 게 없을 때만 쓰세요.

Juno시맨틱이란 무엇인가 대체 테스트를 해보세요: 요소를 스타일만 입힌 <div>로 바꿔보고 무엇을 잃었는지 물어보는 겁니다. 답이 키보드 포커스, 접근성 트리의 역할, 스크린 리더의 안내라면, 그것이 바로 공짜로 얻고 있던 시맨틱입니다. 그걸 직접 다시 만드는 것은 이름 있는 요소를 쓰는 것보다 언제나 더 손이 많이 갑니다.

랜드마크 요소들

페이지의 큰 영역들을 표시하기 위해 존재하는 요소가 몇 가지 있습니다. 가장 먼저 찾게 될 요소들입니다:

• <header>는 페이지나 섹션의 맨 위 부분입니다: 로고, 제목, 소개글이 들어갑니다.
• <nav>는 내비게이션 링크 모음입니다, 메인 메뉴처럼요.
• <main>은 메인 콘텐츠입니다, 이 페이지가 존재하는 이유가 되는 부분이죠.
• <section>은 관련된 내용을 모아둔 덩어리입니다, 보통 자기만의 제목이 있습니다.
• <article>은 따로 떼어놓아도 그 자체로 의미가 통하는 독립적인 콘텐츠입니다, 블로그 글이나 뉴스 기사처럼요.
• <aside>는 옆으로 빠져나온 내용입니다: 관련 링크, 메모, 광고 같은 것들이죠.
• <footer>는 페이지나 섹션의 맨 아래 부분입니다: 저작권, 연락처, 작은 글씨로 된 안내 문구가 들어갑니다.

규칙은 항상 똑같습니다. 어떤 영역이 내비게이션이라면 <div>가 아니라 <nav>에 넣습니다. 푸터라면 <footer>에 넣습니다. 영역에 맞는 이름을 가진 요소로 그 영역을 표시하는 것입니다.

<header>
  <h1>Mara's Kitchen</h1>
  <nav>
    <a href="/recipes">Recipes</a>
    <a href="/about">About</a>
  </nav>
</header>
<main>
  <h2>Weeknight dinners</h2>
  <p>Quick meals you can make after work.</p>
</main>
<footer>
  <p>Made in Lisbon.</p>
</footer>

일곱 개의 요소가 페이지를 주요 영역으로 나누는데, 이들을 통틀어 **랜드마크 요소(landmark elements)**라고 부릅니다. 각각이 독자나 도구가 곧바로 이동할 수 있는 하나의 영역을 표시하기 때문입니다:

• <header>는 가장 가까운 컨테이너를 소개합니다: 페이지 맨 위에서는 사이트 브랜딩을 담고, <article> 안에서는 그 글의 제목과 작성자 정보를 담습니다.
• <nav>는 내비게이션 링크 묶음을 감쌉니다. 페이지 안의 아무 링크에나 쓰지 말고, 메인 메뉴나 목차처럼 중요한 링크 묶음에만 쓰세요.
• <main>은 문서의 핵심 콘텐츠, 즉 사이트 전체에서 반복되는 부분이 아니라 이 페이지에만 있는 고유한 부분을 담습니다.
• <section>은 함께 묶이는 관련 콘텐츠를 그룹으로 만들며, 보통 제목으로 시작합니다.
• <article>은 완전하고 독립적인 단위입니다: 글, 댓글, 상품 카드 같은 것들이죠. 판단 기준은 따로 떼어내서 그 자체로 보여줘도 의미가 통하는지입니다.
• <aside>는 주변 내용과는 약간 다른, 곁가지 성격의 내용을 담습니다: 사이드바, 인용문, 관련 링크 같은 것들이죠.
• <footer>는 가장 가까운 컨테이너를 마무리하는 정리 내용을 담습니다: 작성자 정보, 링크, 법적 고지문 같은 것들이죠.

핵심은 이 요소들 대부분이 맥락에 따라 정해진다는 점입니다. <header>와 <footer>는 자신이 속한 컨테이너를 기준으로 의미가 정해지므로, 한 페이지 안에 여러 개씩 있을 수 있습니다. 페이지 전체를 위한 것 하나, 그리고 각 <article>마다 하나씩요. <main>은 예외인데, 다음 절에서 다룹니다.

<article>
  <header>
    <h2>Roasted tomato soup</h2>
    <p>By Kwame, 20 minutes</p>
  </header>
  <p>Halve the tomatoes and roast them until soft.</p>
  <footer>
    <p>Serves four.</p>
  </footer>
</article>

이 일곱 개의 영역 요소가 HTML **랜드마크(landmarks)**입니다: 접근성 트리에서 이동 가능한 영역으로 노출되는 요소들이죠. 각각은 보조 기술이 나열하고 이동할 수 있는 역할(role)에 대응하는데, 소스 코드를 정돈해 보이게 하는 것 이상으로 이 요소들이 중요한 이유가 바로 여기에 있습니다.

• <header>는 페이지 레벨에서는 banner 역할에 대응하지만, <article>, <aside>, <main>, <nav>, <section> 안에 중첩되어 있을 때는 아무 랜드마크 역할도 없는 단순한 소개용 그룹일 뿐입니다.
• <footer>도 마찬가지입니다: 페이지 레벨에서는 contentinfo이지만, 위의 섹션 요소들 안에 중첩되면 그냥 그룹일 뿐입니다.
• <nav>는 navigation 역할입니다. 한 페이지에 여러 개 있는 경우가 흔한데, 예를 들어 메인 메뉴와 페이지 내 목차 같은 경우죠. 이때는 아래에서 다룰 라벨링이 필요합니다.
• <main>은 main 역할이며 핵심 콘텐츠를 표시합니다. 페이지마다 하나뿐입니다.
• <aside>는 complementary 역할입니다: 핵심 콘텐츠를 보완하지만 그것과는 별개로 떨어져 있는 내용입니다.
• <section>은 접근성 있는 이름이 있을 때만, 보통 그것과 연결된 제목에서 이름을 얻어 region 랜드마크가 됩니다. 이름 없는 <section>은 랜드마크로 노출되지 않으며, 접근성 트리 입장에서는 <div>와 크게 다르지 않습니다.
• <article>은 article 역할을 가집니다. 독립적인 구성물로서 도구가 목록화할 수는 있지만, 다른 요소들과 같은 의미의 내비게이션 랜드마크는 아닙니다.

이 모든 것의 설계 목표는 시각을 쓰지 않는 사용자도 시각을 쓰는 사용자가 레이아웃을 훑어보는 것과 비슷한 속도로 문서 전체를 파악할 수 있게 하는 것입니다. 스크린 리더는 모든 랜드마크의 목록을 만들어 사용자가 중간 내용을 듣지 않고 곧바로 "메인"이나 "내비게이션"으로 건너뛸 수 있게 해줍니다. 이는 영역들이 실제 랜드마크 요소로 표시되어 있을 때만 가능합니다. <div>로만 도배된 문서는 랜드마크가 전혀 없는 문서가 되고, 그런 문서를 훑어볼 유일한 방법은 위에서 아래로 순서대로 읽는 것뿐입니다.

<body>
  <header>            <!-- banner: 페이지 레벨 -->
    <nav>...</nav>    <!-- navigation -->
  </header>
  <main>              <!-- main: 유일한 핵심 영역 -->
    <article>...</article>
    <aside>...</aside> <!-- complementary -->
  </main>
  <footer>...</footer> <!-- contentinfo: 페이지 레벨 -->
</body>

Juno랜드마크 요소들 알아둘 만한 영역 태그가 일곱 개 있습니다: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>. 각각이 페이지의 한 부분을 가리키니, 지금 만들고 있는 영역과 맞는 것을 고르면 됩니다. 오늘 다 외울 필요는 없습니다, 계속 반복해서 나오다 보면 저절로 익숙해집니다.

Juno랜드마크 요소들 일곱 개의 요소가 페이지를 영역으로 나누는데, 그중 대부분은 자신이 속한 컨테이너를 기준으로 의미가 정해지기 때문에 <header>와 <footer>는 한 페이지에 여러 번 나올 수 있습니다. 고민을 많이 줄여준 <article> 판단법은 이겁니다: 따로 떼어내도 그 자체로 의미가 통할까요? 그렇다면 article이고, 제목이 있는 묶음 정도라면 section입니다.

Juno랜드마크 요소들 이들이 바로 랜드마크이고, 각각은 스크린 리더가 건너뛸 수 있는 역할에 대응합니다, 그래서 <div> 뭉치보다 나은 겁니다. 기억해둘 만한 함정 두 가지: <header>와 <footer>는 최상위 레벨에서만 각각 banner와 contentinfo 랜드마크가 되고, <section>은 접근성 있는 이름이 있을 때만 랜드마크가 됩니다. 이름 없는 section은 보조 기술 입장에서는 거의 div입니다.

div와 span, 의미 없는 대체 요소

페이지의 모든 부분이 이름을 붙일 만한 의미를 가진 것은 아닙니다. 때로는 스타일을 입히려고 그냥 묶어놓을 상자가 필요하거나, 몇 글자에 색을 입히려고 감싸놓을 것이 필요할 때가 있습니다. 이럴 때 쓰라고 있는 것이 바로 그 자체로는 아무 의미도 없는 평범한 요소 두 가지입니다.

<div>는 범용 블록입니다: 다른 요소가 맞지 않을 때 쓰는 빈 컨테이너입니다. <span>은 한 줄 안의 짧은 텍스트 조각에 적용하는 같은 개념입니다. 둘 다 내용에 대해 아무것도 말해주지 않습니다. 순전히 스타일과 그룹핑을 위한 걸이일 뿐입니다.

<p>Today's total is <span class="price">£42.00</span>.</p>

<div class="card">
  <h2>Special offer</h2>
  <p>Two for one on all pasta.</p>
</div>

<span>은 가격에 색을 입히기 위해 그 부분을 감쌉니다. <div>는 카드를 묶어서 테두리를 두를 수 있게 해줍니다. 더 의미 있는 요소가 아무것도 맞지 않을 때만 이 둘을 쓰세요, 이들은 안에 무엇이 있는지 브라우저에 전혀 알려주지 않으니까요.

<div>와 <span>은 아무 의미도 없는 두 요소이고, 그것이 바로 이들의 존재 목적입니다. <div>는 범용 블록 레벨 컨테이너이고, <span>은 범용 인라인 컨테이너입니다. 이들은 **스타일 걸이(styling hooks)**로 씁니다: 내용을 그룹핑하거나 타깃으로 잡아야 하는데 딱히 의미로 표현할 게 없을 때, 클래스나 id를 걸어둘 자리인 것입니다.

<div class="grid">
  <article class="card">...</article>
  <article class="card">...</article>
</div>

<div class="grid">는 카드들을 그리드로 배치하기 위해서만 존재합니다. 이건 표현(presentation)의 문제이지 의미의 문제가 아니므로, <div>가 정답이지 마지못해 쓰는 차선책이 아닙니다. 문제가 되는 것은 오히려 반대의 경우입니다: 실제로 의미가 있는 것에 <div>를 쓰는 것 말입니다. 클릭 가능한 <div>는 <button>이어야 하고, 내비게이션 링크로 가득한 <div>는 <nav>여야 하고, 글 전체를 감싸는 <div>는 <article>이어야 합니다. 의미가 없고 레이아웃이나 스타일만 필요할 때, <div>와 <span>이 올바른 답입니다.

<div>와 <span>은 의미가 완전히 비어 있는 요소입니다: 각각 범용 블록과 범용 인라인 컨테이너로서 접근성 트리에서 아무 역할도 없고 어떤 도구에도 의미를 전달하지 않습니다. 이들이 딱 맞는 자리는 하나입니다, 표현용 걸이(presentational hook): 오직 스타일을 붙이거나 레이아웃을 위해 자식 요소를 묶으려고 존재하며, 스크린 리더나 검색 엔진이 절대 안내해서는 안 될 정보만 담고 있는 요소입니다.

의미가 전혀 없는 요소를 하나 갖고 있다는 것의 가치는, 그것이 의미 있는 요소들을 정직하게 유지시켜준다는 데 있습니다. 그리드 래퍼, 플렉스박스 행, 포지셔닝 컨텍스트 같은 것들은 시맨틱한 내용이 전혀 없는 실제 필요이고, 여기에 의미 있는 요소를 억지로 씌우는 것은 마크업 상의 거짓말이 됩니다. 오직 배경색 때문에 쓰인 <section>은 실제로는 아닌 어떤 영역인 척하는 것입니다. 그러니 규칙은 양방향으로 작동합니다. 이름 있는 요소가 맞을 때 <div>로 대신하지 말고, 상자만 필요할 때 이름 있는 요소를 억지로 끌어오지도 마세요.

주의해야 할 실패 패턴은 인터랙티브한 <div>입니다: JavaScript로 클릭 핸들러를 달아서 버튼이나 링크처럼 동작하게 만든 요소죠. 화면에 렌더링되고 마우스로 클릭도 되니 완성된 것처럼 보이지만, 역할도 없고, 탭 순서에도 들어가지 않고, Enter나 Space에 반응하지도 않고, 스크린 리더는 아무것도 안내하지 않습니다. tabindex, role, 키 핸들러로 이 모든 것을 다시 만드는 것은 이미 존재하는 <button>을 허술하게 재구현하는 것에 불과합니다. 어떤 것이 컨트롤처럼 동작한다면 컨트롤 요소를 쓰세요. <div>와 <span>은 오직 픽셀일 뿐인 부분에만 남겨두세요.

Junodiv와 span, 의미 없는 대체 요소<div>는 평범한 상자이고 <span>은 몇 글자를 감싸는 평범한 래퍼일 뿐, 둘 다 아무 의미가 없습니다. 무언가를 그룹핑하거나 스타일만 입히면 되고 딱히 맞는 이름 있는 요소가 없을 때 쓰세요. 메뉴나 버튼처럼 실제로 의미가 있다면 그에 맞는 요소를 대신 쓰세요.

Junodiv와 span, 의미 없는 대체 요소 할 일이 오직 레이아웃이나 스타일뿐이고 표현할 의미가 없을 때는 <div>나 <span>이 정답입니다. 이들을 쓰는 걸 미안해하지 말고, 반대의 경우를 미안해하세요: <button>이어야 할 클릭 가능한 <div>나, <article>이어야 할 래퍼 <div> 말입니다. 의미가 없으면 빈 요소, 의미가 있으면 이름 있는 요소입니다.

Junodiv와 span, 의미 없는 대체 요소<div>와 <span>은 접근성 트리에서 아무 역할도 없는데, 그래서 순수한 스타일 걸이로는 딱 맞고 의미가 필요한 곳에는 틀린 선택입니다. 발목을 잡을 것은 클릭 핸들러가 달린 인터랙티브 <div>입니다: 포커스도 없고, 키보드도 안 되고, 안내도 없고, <button>이 공짜로 주는 것을 흉내 내려고 tabindex와 role을 덕지덕지 붙여야 합니다. 컨트롤처럼 동작한다면 그냥 컨트롤로 만드세요.

올바른 요소 고르기

어떤 요소를 써야 할지 헷갈릴 때는 단순한 질문 하나를 던져보세요: 이것은 무엇인가? 어떻게 보이는지가 아니라, 이것이 무엇인지 말입니다. 답이 대개 요소 이름을 그대로 알려줍니다. 맨 위에 가로로 늘어선 링크들은 내비게이션이니 <nav>입니다. 맨 아래의 작은 글씨 안내는 푸터니 <footer>입니다. 색을 입히고 싶은 가격은 딱히 무엇도 아니니 <span>입니다.

의미에서 시작하고, 실제 답이 "그냥 상자일 뿐"일 때만 <div>나 <span>으로 돌아가세요. 이 습관을 일찍 들이면 페이지가 스스로 자기가 무엇인지 설명하게 되고, 나중에 당신이든 다른 누구든 그 마크업을 다시 읽어야 할 때 그 보상을 바로 확인하게 됩니다.

올바른 요소를 고르는 것은 매번 실행할 수 있는 짧은 판단 과정입니다. 내용이 무엇인지 물어보고, 그 답이 요소를 골라주게 하세요:

• 그 자체로 완결되어서 따로 떼어놓아도 의미가 통하는 것인가요? <article>입니다.
• 제목이 있는, 관련 내용이 모인 덩어리인가요? <section>입니다.
• 내비게이션인가요? <nav>입니다. 어떤 영역의 소개인가요? <header>입니다. 마무리인가요? <footer>입니다.
• 메인 콘텐츠를 보완하는 옆쪽 내용인가요? <aside>입니다.
• 의미는 없고 레이아웃이나 스타일 목적뿐인가요? <div>, 아니면 한 줄 안에서는 <span>입니다.

가장 까다로운 갈림길은 <section> 대 <article> 대 <div>입니다. 순서대로 따라가 보세요. 그 블록이 홀로 서 있을 수 있다면 <article>입니다. 그렇지 않지만 자기만의 제목을 가진 테마별 그룹이라면 <section>입니다. 제목도 없고 의미도 없고 오직 스타일이나 레이아웃을 위해서만 존재한다면 <div>입니다. <section>은 거의 항상 제목이 있어야 합니다, 제목이 떠오르지 않는다면 그건 사실 <div>가 필요했다는 강력한 신호입니다.

<main>
  <section>
    <h2>Latest posts</h2>
    <article>
      <h3>Why I switched to plain HTML</h3>
      <p>...</p>
    </article>
    <article>
      <h3>The case against heavy frameworks</h3>
      <p>...</p>
    </article>
  </section>
</main>

여기서 <section>은 "최신 글"이라는 테마 그룹이고, 그 안의 각 글은 그 자체로 서 있을 수 있으므로 <article>입니다. 중첩 구조가 곧 의미를 그대로 반영합니다.

좋은 선택은 의미를 먼저 읽고 레이아웃은 절대 고려하지 않는 데서 나오지만, 몇 가지 규칙이 흔한 판단을 기계적으로 만들어줍니다.

<main>은 페이지마다 정확히 하나입니다. 이는 핵심 콘텐츠, 즉 사이트 전체에서 반복되는 헤더, 내비게이션, 푸터가 아니라 이 페이지에만 있는 고유한 부분을 표시합니다. 접근성 트리에 <main>이 두 개 이상 있으면 스크린 리더 사용자는 "메인" 대상이 두 개가 되어 어느 것이 진짜인지 알 수 없게 됩니다, 그러니 항상 하나만 유지하세요. 사이트 전체에 걸친 것들은 모두 그 밖에 두어야 합니다.

반복해서 중요해지는 또 다른 규칙은 **반복되는 랜드마크에 라벨 붙이기**입니다. 페이지에 같은 랜드마크 종류의 요소가 두 개 있을 때, 예를 들어 메인 <nav>와 페이지 내 목차가 있을 때, 둘 다 "내비게이션"이라고 안내되어서 사용자가 구분할 수 없게 됩니다. 이럴 때는 aria-label로 구분해줍니다. 이 속성은 화면에는 아무것도 보여주지 않으면서 영역에 짧은 접근성 이름을 부여합니다:

<nav aria-label="Primary">
  <a href="/">Home</a>
  <a href="/blog">Blog</a>
</nav>

<nav aria-label="On this page">
  <a href="#intro">Introduction</a>
  <a href="#setup">Setup</a>
</nav>

이제 두 영역은 "Primary 내비게이션"과 "On this page 내비게이션"으로 안내되고, 랜드마크 목록을 실제로 쓸 수 있게 됩니다. 같은 라벨링을 반복되는 랜드마크라면 어디든, <aside>나 <section>이라도 적용하세요. <section>의 경우, 연결된 제목이든 aria-label이든 어떤 형태로든 접근성 있는 이름이 있어야 비로소 랜드마크가 된다는 점을 기억하세요.

이 모든 것의 배경이 되는 상위 규칙은 이렇습니다: 마크업은 스크린 리더, 검색 크롤러, 리더 모드 도구, 그리고 미래의 자기 자신이 읽는, 기계가 읽을 수 있는 문서 설명입니다. 의미에 따라 요소를 고르는 것이 바로 그 설명을 진실되게 만듭니다. 레이아웃은 CSS의 일이고, 어떤 요소가 어떻게 보이는지를 기준으로 골랐다면, 그 순간 당신은 CSS의 영역을 잘못된 도구로 침범한 것입니다.

Juno올바른 요소 고르기 막힐 때는 이것이 어떻게 보이는지가 아니라 무엇인지를 물어보세요. 내비게이션은 <nav>이고, 작은 글씨 안내는 <footer>이고, 스타일만 입히고 싶은 평범한 상자는 <div>입니다. 매번 의미에서 시작하면 페이지가 저절로 자기가 무엇인지 설명하게 됩니다.

Juno올바른 요소 고르기 작은 체크리스트를 돌려보세요: 홀로 서 있을 수 있으면 <article>, 제목이 있는 테마 그룹이면 <section>, 의미가 없고 스타일뿐이면 <div>입니다. section이냐 div냐 논쟁을 대부분 끝내주는 결정타는 이겁니다: 제목을 하나 지어낼 수 없다면 사실은 <div>가 필요했던 겁니다. 의미가 태그를 고르게 하면 중첩 구조는 저절로 정리됩니다.

Juno올바른 요소 고르기 대부분의 무게를 지탱하는 규칙은 두 가지입니다: 페이지마다 <main>은 정확히 하나, 그리고 두 개의 nav가 둘 다 "내비게이션"이라고만 안내되지 않도록 반복되는 랜드마크에는 aria-label로 라벨을 붙이세요. <section>은 접근성 있는 이름이 있어야만 랜드마크가 된다는 것도 기억하세요. 요소는 의미로 고르고 겉모습은 CSS에 맡기세요, 어떻게 보이는지를 기준으로 태그를 고르는 순간, 잘못된 도구로 CSS의 일을 하고 있는 것이니까요.