- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
시멘틱 마크업
시멘틱 (semantic) 의 사전적 뜻은 '의미론적인' 정도로 해석할 수 있는데, 이것은 마크업 할 때 의미에 부합하는 태그를 사용하라는 뜻입니다. 즉, 의미를 잘 전달 할 수 있도록 HTML 태그 문서를 작성하는 것을 말합니다.
시멘틱 마크업 종류
시멘틱 마크업 태그의 종류는 엄청 다양하지만, 주로 사용되는 태그에 대해서만 알아보도록 하겠습니다.
- header : 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 로고, 검색 폼 등의 요소가 포함될 수 있습니다.
- nav : 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 내비게이션을 말합니다. 메뉴, 목차, 색인 등에 사용됩니다.
- main : 문서 <body>의 주요 콘텐츠를 나타냅니다.
- article : 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분되는 요소에 사용됩니다.
- section : 일반적인 문서나 애플리케이션 영역을 표시합니다.
- footer : 바닥글, 문서 하단에 들어가는 정보로, 사이트의 제작자나 저작권 정보 등을 주로 표시
- aside : 좌측과 우측 사이드 위치의 공간을 의미하며, 주요 콘텐츠 이외의 참고가 될 수 있는 컨텐츠 표시
논리적 순서 마크업
시멘틱한 마크업과 함께 논리적인 순서에 의해 마크업을 하는 것도 매우 중요합니다.
논리적 순서에 의한 마크업은 키보드나 터치패드와 같은 입력장치만으로 HTML 문서의 모든 콘텐츠를 논리적 순서로 이동하여 사용할 수 있도록 하는 '입력장치 접근성'과 밀접한 관련이 있습니다.논리적 순서 마크업 (Logical sequence markup)논리적 순서에 의한 마크업은 키보드(Tab)키나 터치패드와 같은 입력장치만으로 HTML문서의 모든 컨텐츠를 논리적 순서로 이동하여 사용할수 있도록 하는 '입력장치 접근성'과 밀접한 관련이 있다
웹 접근성에 대한 구체적인 내용은 웹 접근성 연구소에서 제공하는 '한국형 웹 콘텐츠 접근성 지침 2.1 을 참고 합니다.
예시)
| (1)공지사항 (2)더보기 |
(3)공지 내용들 |
예를 들어 (1)공지사항 -> (2) 공지내용 더보기 ->(3)공지 내용들'의 순서 보다는 (1)공지사항 -> (3)공지내용들 ->(2) 공지내용 더보기 가 내용 흐름 순서에 더 적합합니다.