[웹접근성 지침-일반기술 G115] 시맨틱(Semantic) 요소로 HTML 구조를 만들어야 합니다.

원문: https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G115.html

---

HTML을 '시맨틱 요소(semantic element)'로 구성해야 문서의 구조를 파악할 수 있습니다.

그래서 HTML을 '시맨틱 요소(semantic element)'로 구성하는 것은 기본입니다.

---

기술설명

이 기술의 목적은 '시맨틱 요소(Semantic element)'를 마크업 구조에 맞게 적용해야 한다는 것입니다.

즉 시각적으로 요소들을 배치하는 것이 아니라 의미에 맞는 해당 요소를 사용해야 한다는 것입니다.

시맨틱 요소를 의미에 맞게 잘 사용하면 에이전트가 문서의 구조를 이해할 수 있습니다.

또한 콘텐츠를 단위별로 무슨 역할을 하는지도 알 수 있게 됩니다.

문장, 머리말, 중요 단어, 표 등과 같이 콘텐츠의 특성에 맞는 요소를 사용해야 합니다.

이런 경우도 있습니다. 제목과 부제목 간의 관계, 표에서 셀과 셀 간의 관계처럼 서로간의 관계도 표현할 수 있습니다.

 

예를 들어 문장 요소들 중에 em은 강조, addr와 cite는 인용 및 약어를 표현합니다.

MathML은 표현하기 복잡한 수학공식을 보여 주면서 그에 대한 자세한 내용도 포함하는 시맨틱 요소입니다.

 

 

예시

[예시.1] 문단 안에 다른 페이지로 이동하는 하이퍼링크가 들어있습니다.

하이퍼 크는 a요소를 사용합니다.

<p>다운로드를 원하면 '<a href="download.html">여기</a>'를 클릭해주세요.</p>

 

[예시.2] 결혼에 대한 내용입니다. 'Jane Austen'의 소설 '오만과 편견'의 일부를 인용하였습니다.

인용한 책은 'cite 요소'를 사용하였고, 인용한 문장은 'blockquote 요소'를 사용했습니다.

<p>
    소설의 첫 번째 장에서 볼 수 있듯이 결혼은 독신자에게 논리적인 단계와 같습니다.
    <cite>오만과 편견</cite>:
</p>
<blockquote>
    <p>행운을 누리고 있는 독신 남성에게는 아내가 없다는 것은 보편적으로 인정되는 진리입니다.</p>
    <p>그런 사람이 처음 이웃에 되었을 때, 그 사람에 대해 잘 몰라도, 이 진실은 가족들의 마음속에 너무나 확고히 자리 잡고 있습니다. 그 사람은 그들의 딸들 중 누군가의 정당한 재산으로 생각합니다.</p>
</blockquote>

 

 

자료

HTML 4.01 사양
HTML 4.01 사양, 구문 요소 사용
수학 마크업 언어(MathML) 버전 3.0 2nd Edition
Jeffrey Zeldman의 책 "웹 표준을 사용한 디자인"
웹 디자인 그룹의 기사 "문서 스타일: 작업에 맞는 올바른 태그 사용"

 

 

관련기술

H39: 캡션 요소를 사용하여 데이터 테이블 캡션을 데이터 테이블과 연관시키기
H42: h1-h6를 사용하여 제목 식별
H44: 레이블 요소를 사용하여 텍스트 레이블을 양식 컨트롤과 연결
H48: 링크 목록 또는 그룹에 ol, ul 및 dl 사용
H49: 강조된 텍스트나 특수 텍스트를 표시하기 위해 의미적 마크업 사용
H51: 표 마크업을 사용하여 표 형식 정보 표시
H71: fieldset 및 legend 요소를 사용하여 폼 컨트롤 그룹에 대한 설명 제공

 

 

점검절차

1. 콘텐츠에 시맨틱 기능이 있는 부분이 있는지 확인합니다.

2. 시맨틱 기능이 있는 부분에 그에 해당하는 마크업이 적용되었는지 확인해 봅니다.

 

 

---

 

나의 정리

HTML은 '시맨틱 요소(semantic element)'로 구성되어야 합니다. '시맨틱 요소(semantic element)'로 구성되어야 웹 문서의 구조를 올바르게 파악할 수 있기 때문입니다.

 

먼저 '시맨틱 요소(Semantic element)가 무엇인지 알아봅시다.

HTML은 요소(=element, =태그)들로 구성된 문서입니다. 그리고 각각의 요소(element)들은 어디에 어떻게 사용해야 하는지에 대한 의미(semantic)를 가지고 있습니다.

콘텐츠가 가진 의미와 속성에 맞는 요소를 배치하여 사용한 요소를 '시맨틱 요소(Semantic element)'라고 합니다.

 

그럼 왜 '시맨틱 요소(Semantic element)를 사용해야 하는 걸까요?

집을 예로 들어 봅시다. 기둥을 만들 때 시멘트에 철골을 넣어 만듭니다. 타일로 기둥을 만들지 않습니다. 왜일 까요? 기둥 재료로 적합하지 않기 때문입니다. 그리고 방안은 벽지로 마무리하지 타일로 하지 않습니다.

타일은 주방 벽이나 욕실 벽과 바닥에 사용됩니다. 위생과 방수가 좋기 때문입니다. 이렇게 각각의 재료들은 집을 만들 때 사용하는 방법이 정해져 있습니다.

 

요소들도 마찬가지입니다.

큰 제목 또는 헤드라인은 <h1>요소를 사용하고, 표를 만들 때는 <table>, <tr>, <td>등의 요소를 사용해야 합니다.

콘텐츠에 맞는 요소를 적용해야 올바른 문서가 완성되는 것입니다. (= 시맨틱 요소로 구성된 HTML)

 

이렇게 '시맨틱 요소(semantic element)'로 HTML을 구성하면 문서의 구조를 파악할 수 있습니다.

즉 보조 기술을 사용하는 분들 또한 콘텐츠를 이해하는데 큰 도움이 된다는 것입니다.

시맨틱 요소로 구성되어 있기 대문에 보조 기술은 요소별로 이 콘텐츠가 무엇인지 파악할 수 있으며 그것을 그대로 사용자에게 전달 해 줄 수 있기 때문입니다.

 

HTML을 '시맨틱 요소(semantic element)'로 구성해야 문서의 구조를 파악할 수 있습니다.

그래서 HTML을 '시맨틱 요소(semantic element)'로 구성하는 것은 기본입니다.

 

---

 

G115: Using semantic elements to mark up structure

https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G115.html

G115: Using semantic elements to mark up structure | Techniques for WCAG 2.0