728x90
반응형
시멘틱 마크업
시멘틱(Semantic)의 사전적 뜻은 "의미론적인" 정도로 해석할 수 있다. 이것은 마크업을 할 때 의미를 부여하는 태그로 보면 된다.
실제로 마크업을 할 때는 작업자마다 콘텐츠의 의미를 해석하는 차이가 조금 있을 수도 있지만 가급적 시멘틱하게 마크업을 하려고 노력하는 것도 중요하다.
시멘틱 마크업의 사용 이유
1. 검색 엔진 최적화(SEO)
- 검색 엔진이 시멘틱 태그를 중요한 키워드로 간주하기 때문에 유리하다.
2. 웹 접근성
- 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹 사이트를 이용할 수 있게 하는 방식을 가리킨다.
- 사이트가 올바르게 설계되어 개발되고 편집되어 있을 때 모든 사용자들은 정보와 기능에 동등하게 접근할 수 있다.
3. 가독성
- 단순한 태그로 둘러싸인 요소보다 의미있는 태그를 찾는 것이 더 쉽다.
시멘틱 마크업 태그 종류, 배열
- header : 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 로고, 검색 등의 요소가 포함될 수 있다.
- nav : 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 내비게이션을 말합니다. 메뉴, 목차, 색인 등에 사용됩니다.
- main : 문서의 주요 콘텐츠를 나타냅니다.
- section : 일반적인 문서나 애플리케이션 영역을 표시합니다.
- article : 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분되는 요소에 사용됩니다.
- aside : 좌측과 우측 사이드 위치의 공간을 의미하며, 주요 콘텐츠 이외의 참고가 될 수 있는 컨텐츠 표시합니다.
- footer : 바닥글, 문서 하단에 들어가는 정보로, 사이트의 제작자나 저작권 정보 등을 주로 표시합니다.
논리적인 순서 마크업
시멘틱한 마크업과 함께 논리적인 순서에 의해 마크업을 하는 것도 매우 중요하다.
논리적 순서에 의한 마크업은 키보드나 터치패드와 같은 입력 장치만으로 HTML 문서의 모든 콘텐츠를 논리적 순서로 이동하여 사용 할 수 있도록 하는 입력장치 접근성과 밀접한 관련이 있다.
- 논리적 순서 마크업은 위와 같이 사용자가 필요로 하는 콘텐츠를 논리적인 순서대로 배열을 하는 것으로 볼 수 있다.
728x90
반응형
