100개가 넘는 HTML 요소와 맞춤 요소를 만들 수 있는 기능을 통해 콘텐츠를 마크업하는 방법은 무궁무진합니다. 하지만 일부 방법(특히 의미론적)은 다른 방법보다 더 좋습니다.
시맨틱은 '의미와 관련된'을 의미합니다. 의미론적 HTML을 작성한다는 것은 각 요소의 모양이 아닌 의미에 따라 콘텐츠를 구조화하기 위해 HTML 요소를 사용하는 것을 의미합니다.
이 시리즈에서는 아직 많은 HTML 요소를 다루지 않았지만 HTML을 몰라도 다음 두 코드 스니펫을 통해 시맨틱 마크업이 콘텐츠에 컨텍스트를 제공하는 방법을 알 수 있습니다. 두 경우 모두 ipsum lorem 대신 단어 수를 사용하여 스크롤을 줄입니다. 상상력을 발휘하여 '30단어'를 30단어로 확장하세요.
첫 번째 코드 스니펫은 의미론적 값이 없는 두 요소인 <div>와 <span>를 사용합니다.
<div>
<span>Three words</span>
<div>
<a>one word</a>
<a>one word</a>
<a>one word</a>
<a>one word</a>
</div>
</div>
<div>
<div>
<div>five words</div>
</div>
<div>
<div>three words</div>
<div>forty-six words</div>
<div>forty-four words</div>
</div>
<div>
<div>seven words</div>
<div>sixty-eight words</div>
<div>forty-four words</div>
</div>
</div>
<div>
<span>five words</span>
</div>
이 단어들이 어떤 의미로 확장되는지 감이 오시나요? 그렇지 않습니다.
시맨틱 요소를 사용하여 이 코드를 다시 작성해 보겠습니다.
<header>
<h1>Three words</h1>
<nav>
<a>one word</a>
<a>one word</a>
<a>one word</a>
<a>one word</a>
</nav>
</header>
<main>
<header>
<h2>five words</h2>
</header>
<section>
<h2>three words</h2>
<p>forty-six words</p>
<p>forty-four words</p>
</section>
<section>
<h3>seven words</h3>
<p>sixty-eight words</p>
<p>forty-four words</p>
</section>
</main>
<footer>
<p>five words</p>
</footer>
어떤 코드 블록이 의미를 전달했나요? <div> 및 <span>의 비의미론적 요소만 사용하면 첫 번째 코드 블록의 콘텐츠가 무엇을 나타내는지 알 수 없습니다. 의미론적 요소가 포함된 두 번째 코드 예시를 사용하면 코드를 작성하지 않는 사용자도 HTML 태그를 접한 적이 없더라도 목적과 의미를 파악할 수 있습니다. 외국어 콘텐츠와 같이 콘텐츠를 이해하지 못하더라도 개발자가 페이지의 개요를 이해할 수 있도록 충분한 컨텍스트를 제공합니다.
두 번째 코드 블록에서는 시맨틱 요소가 의미와 구조를 제공하므로 콘텐츠를 이해하지 않아도 아키텍처를 이해할 수 있습니다. 첫 번째 헤더는 사이트 배너이며 <h1>은 사이트 이름일 가능성이 높습니다. 바닥글은 사이트 바닥글입니다. 다섯 단어는 저작권 표시 또는 비즈니스 주소일 수 있습니다.
시맨틱 마크업은 개발자가 마크업을 더 쉽게 읽을 수 있도록 하는 것뿐만 아니라 자동화된 도구가 마크업을 해독하는 데도 매우 중요합니다. 개발자 도구는 시맨틱 요소가 머신 리더블 구조도 제공하는 방법을 보여줍니다.
접근성 객체 모델 (AOM)
브라우저가 수신된 콘텐츠를 파싱하면 문서 객체 모델 (DOM)과 CSS 객체 모델 (CSSOM)을 빌드합니다. 그런 다음 접근성 트리도 빌드합니다. 스크린 리더와 같은 보조 기기는 AOM을 사용하여 콘텐츠를 파싱하고 해석합니다. DOM은 문서에 있는 모든 노드의 트리입니다. AOM은 DOM의 시맨틱 버전과 같습니다.
Firefox 접근성 패널에서 이러한 두 문서 구조가 어떻게 렌더링되는지 비교해 보겠습니다.
그림 2의 두 번째 코드 블록에는 4개의 랜드마크 역할이 있습니다. '탐색'을 위해 <header>, <main>, <footer>, <nav>라는 편리한 이름의 시맨틱 랜드마크를 사용합니다.
랜드마크는 웹 콘텐츠에 구조를 제공하고 콘텐츠의 중요한 섹션을 표시하여 스크린 리더 사용자가 키보드로 탐색할 수 있도록 지원합니다.
<header>와 <footer>은 다른 랜드마크에 중첩되지 않은 경우 각각 banner와 contentinfo 역할을 하는 랜드마크입니다. Chrome의 AOM은 이를 다음과 같이 표시합니다.
