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</h2>
<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>
<h1>five words</h1>
</header>
<section>
<h2>three words</h2>
<p>forty-six words</p>
<p>forty-four words</p>
</section>
<section>
<h2>seven words</h2>
<p>sixty-eight words</p>
<p>forty-four words</p>
</section>
</main>
<footer>
<p>five words</p>
</footer>
어떤 코드 블록이 의미를 전달했나요? <div> 및 <span>의 비시맨틱 요소만 사용하면 첫 번째 코드 블록의 콘텐츠가 무엇을 나타내는지 알 수 없습니다. 시맨틱 요소가 포함된 두 번째 코드 예는 비코더가 HTML 태그를 접하지 않고도 목적과 의미를 해독할 수 있는 충분한 컨텍스트를 제공합니다. 개발자가 외국어로 된 콘텐츠와 같은 콘텐츠를 이해하지 못하더라도 페이지의 개요를 이해하는 데 충분한 맥락을 확실히 제공합니다.
두 번째 코드 블록에서는 시맨틱 요소가 의미와 구조를 제공하기 때문에 콘텐츠를 이해하지 않고도 아키텍처를 이해할 수 있습니다. 첫 번째 헤더는 사이트의 배너이며 <h1>는 사이트 이름일 가능성이 높습니다. 바닥글은 사이트의 바닥글입니다. 5개 단어는 저작권 고지 또는 비즈니스 주소일 수 있습니다.
의미론적 마크업은 단순히 개발자가 읽기 쉽도록 마크업을 만드는 것이 아니라 자동화된 도구가 해독하기 쉽게 마크업을 만드는 것입니다. 개발자 도구는 시맨틱 요소가 어떻게 기계가 읽을 수 있는 구조를 제공하는지 보여줍니다.
접근성 객체 모델 (AOM)
브라우저는 수신된 콘텐츠를 파싱하면서 DOM (문서 객체 모델) 및 CSSOM (CSS Object Model)을 빌드합니다. 그런 다음 접근성 트리도 빌드합니다. 스크린 리더와 같은 보조 기기는 AOM을 사용하여 콘텐츠를 파싱하고 해석합니다. DOM은 문서에 있는 모든 노드의 트리입니다. AOM은 DOM의 시맨틱 버전과 같습니다.
Firefox의 접근성 패널에서 이 두 문서 구조가 어떻게 렌더링되는지 비교해 봅시다.
두 번째 스크린샷에는 두 번째 코드 블록에 4개의 랜드마크 역할이 있습니다. '탐색'에 <header>, <main>, <footer>, <nav>라는 편리한 이름의 시맨틱 랜드마크를 사용합니다. 랜드마크는 웹 콘텐츠의 구조를 제공하고 스크린 리더 사용자가 콘텐츠의 중요한 부분을 키보드로 쉽게 탐색할 수 있도록 합니다.
<header> 및 <footer>는 다른 랜드마크에 중첩되어 있지 않을 때 각각 banner 및 contentinfo 역할을 갖는 랜드마크입니다. Chrome의 AOM은 이를 다음과 같이 표시합니다.
Chrome 개발자 도구를 살펴보면 시맨틱 요소를 사용할 때와 사용하지 않을 때의 접근성 객체 모델 간에 상당한 차이를 발견할 수 있습니다.
시맨틱 요소를 사용하면 접근성에 도움이 되고 시맨틱 요소가 아닌 요소를 사용하면 접근성이 떨어집니다. HTML은 일반적으로 기본적으로 액세스할 수 있습니다. 개발자의 역할은 HTML의 기본 액세스 가능 특성을 보호하고 접근성을 극대화하는 것입니다. 개발자 도구에서 AOM을 검사할 수 있습니다.
role 속성
role 속성은 문서의 컨텍스트에서 요소의 역할을 설명합니다. role 속성은 전역 속성(즉, 이 시리즈의 다른 거의 모든 것을 정의함)인 WhatWG HTML 사양이 아니라 ARIA 사양에 의해 정의된 모든 요소에서 유효합니다.
시맨틱 요소에는 각각 암시적인 역할이 있으며 일부는 컨텍스트에 따라 달라집니다. Firefox 접근성 개발자 도구 스크린샷에서 볼 수 있듯이 최상위 수준 <header>, <main>, <footer>, <nav>는 모두 랜드마크인 반면 <main>에 중첩된 <header>는 섹션이었습니다. Chrome 스크린샷에는 다음 요소의 ARIA 역할이 나열되어 있습니다. <main>은 main이고, <nav>은 navigation이며, 문서의 바닥글인 <footer>는 contentinfo입니다. <header>가 문서의 헤더인 경우 기본 역할은 banner이며 섹션을 전체 사이트 헤더로 정의합니다. <header> 또는 <footer>가 섹션 요소 내에 중첩되면 랜드마크 역할이 아닙니다. 두 개발 도구의 스크린샷 모두 이를 보여줍니다.
요소 역할 이름은 AOM을 빌드하는 데 중요합니다. 요소의 의미 또는 '역할'은 보조 기술과 경우에 따라 검색엔진에 중요합니다. 보조 기술 사용자는 시맨틱을 사용해 콘텐츠를 탐색하고 콘텐츠의 의미를 파악합니다. 요소의 역할을 통해 사용자는 원하는 콘텐츠에 빠르게 액세스할 수 있으며 더 중요한 것은 스크린 리더 사용자에게 포커스가 있을 때 상호작용 요소와 상호작용하는 방법을 알려줍니다.
버튼, 링크, 범위, 체크박스와 같은 대화형 요소는 모두 암시적 역할이 있고 모두 키보드 탭 시퀀스에 자동으로 추가되고 모두 기본적으로 예상되는 사용자 작업을 지원합니다. 암시적 역할 또는 명시적 role 값은 사용자에게 요소별 기본 사용자 상호작용을 예상하도록 알립니다.
role 속성을 사용하면 태그가 암시하는 것과 다른 역할을 비롯하여 모든 요소에 역할을 부여할 수 있습니다. 예를 들어 <button>의 암시적 역할은 button입니다. role="button"를 사용하면 어떤 요소든 의미론적으로 <p role="button">Click Me</p> 버튼으로 변환할 수 있습니다.
요소에 role="button"를 추가하면 스크린 리더에 요소가 버튼임을 알 수 있지만 요소의 모양이나 기능은 변경되지 않습니다. button 요소는 개발자가 아무런 작업을 하지 않아도 다양한 기능을 제공합니다. button 요소는 문서의 탭 순서 순서에 자동으로 추가됩니다. 즉, 기본적으로 키보드에 포커스를 둘 수 있습니다. Enter 키와 스페이스 키 모두로 버튼을 활성화합니다. 또한 버튼에는 HTMLButtonElement 인터페이스에서 제공하는 모든 메서드와 속성이 있습니다. 버튼에 시맨틱 버튼을 사용하지 않으면 모든 기능을 다시 프로그래밍해야 합니다. <button>를 사용하면 훨씬 쉽습니다.
비시맨틱 코드 블록의 AOM 스크린샷으로 돌아갑니다. 시맨틱이 아닌 요소에는 암시적 역할이 없습니다. 각 요소에 역할을 할당하여 비시맨틱 버전을 의미 체계로 만들 수 있습니다.
<div role="banner">
<span role="heading" aria-level="1">Three words</span>
<div role="navigation">
<a>one word</a>
<a>one word</a>
<a>one word</a>
<a>one word</a>
</div>
</div>
role 속성을 사용하여 모든 요소에 의미 체계를 추가할 수 있지만, 대신 필요한 암시적 역할이 있는 요소를 사용해야 합니다.
시맨틱 요소
"이 마크업 섹션의 기능을 가장 잘 나타내는 요소는 무엇인가?"라고 자문해 보면 일반적으로 작업에 가장 적합한 요소를 선택하게 됩니다. 태그에는 시맨틱 의미가 있으므로 선택한 요소와 사용하는 태그가 표시 중인 콘텐츠에 적합해야 합니다.
HTML은 콘텐츠의 모양을 정의하는 것이 아니라 콘텐츠를 구성하는 데 사용해야 합니다. 모양은 CSS의 영역입니다. 일부 요소는 특정 방식으로 표시되도록 정의되어 있지만, 사용자 에이전트 스타일시트가 해당 요소를 기본적으로 표시하는 방식에 기반한 요소를 사용하지 마세요. 대신 요소의 의미론적 의미와 기능에 따라 각 요소를 선택하세요. 논리적이고 의미론적이며 의미 있는 방식으로 HTML을 코딩하면 CSS가 의도한 대로 적용되는 데 도움이 됩니다.
코딩할 때 작업에 적합한 요소를 선택하면 HTML을 리팩터링하거나 주석을 달지 않아도 됩니다. 작업에 적합한 요소를 사용하는 것을 고려하고 있다면 작업에 적합한 요소를 선택하는 경우가 많습니다. 사용하지 않는다면 아마 없을 것입니다. 각 요소의 의미 체계를 이해하고 올바른 요소를 선택하는 것이 중요한 이유를 알면 일반적으로 큰 노력 없이도 올바른 선택을 할 수 있습니다.
다음 섹션에서는 시맨틱 요소를 사용하여 문서 구조를 빌드합니다.
이해도 테스트
시맨틱 HTML에 대한 지식을 테스트합니다.
항상 <button> 요소에 role="button"를 추가해야 합니다.
<button> 요소에 이미 이 역할이 있습니다.