<시멘틱 마크업> 이미지 출처
우선, 마크업 언어(markup language)란 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지입니다.
태그는 원래 텍스트와는 별도로 원고의 교정부호와 주석을 표현하기 위한 것이었으나 용도가 점차 확장되어 문서의 구조를 표현하는 역할을 하게 되었고, 이러한 태그 방법의 체계를 마크업 언어라 합니다.
내용을 어떠한 표시나 표현을 하라는 의미로 해석 하시면 됩니다.
★시멘틱 마크업
시멘틱(Semantic)의 사전적 뜻은 "의미론적인" 정도로 해석할 수 있습니다.
이는 마크업을 할 때 의미를 부여하는 태그로 보면 됩니다.
또한 시멘틱 요소는 개발자와 브라우저에 명확하게 그 존재 의미를 전달하는 요소입니다.
실제로 마크업을 할 때는 작업자마다 콘텐츠의 의미를 해석하는 차이가 조금 있을 수도 있지만 가급적 시멘틱하게 마크업을 하려고 노력하는 것도 중요합니다.
시각장애인의 경우에는 HTML 문서의 콘텐츠 정보를 음성으로 전달해 주어야 하는데 이런 경우 전달하려는 태그의 의미가 적절해야 합니다.
시맨틱 마크업은 HTML5 부터 등장한 마크업 방식의 하나로 담고있는 내용에 부합하는 시맨틱 요소를 사용해 코드의 가독성과 재사용성을 높이는 마크업 방식이라고 할 수 있습니다.
작성방법 예시들
시맨틱 마크업을 하기 위해선 각 태그를 그 용도에 맞게 사용하여야 합니다.
- 헤더/푸터에 <header> 와 <footer> 사용
- 메인 컨텐츠에 <main> 과 <section> 사용
- 독립적인 컨텐츠에 <article> 사용
- 최상위 제목으로 <h1> 사용
- 순서가 없는 목록으로 <ul> 과 <li> 사용
- 내비게이션에 <nav> 사용
★논리적 순서 마크업
시멘틱한 마크업과 함께 논리적인 순서에 의해 마크업을 하는 것도 매우 중요합니다.
논리적 순서에 의한 마크업은 키보드(Tab)키나 터치패드와 같은 입력장치만으로 HTML문서의 모든 컨텐츠를 논리적 순서로 이동하여 사용할수 있도록 하는 '입력장치 접근성'과 밀접한 관련이 있습니다.
초점 이동은 논리적 구조로 마크업하여 사용자가 예측하는 순서가 같아야 합니다.
