시멘틱 마크업
시멘틱(Semantic)의 사전적 뜻은 "의미론적인" 정도로 해석할 수 있습니다.
이것은 마크업을 할 때 의미를 부여하는 태그로 보면 됩니다.
실제로 마크업을 할 때는 작업자마다 콘텐츠의 의미를 해석하는 차이가 조금 있을 수도 있지만
가급적 시멘틱하게 마크업을 하려고 노력하는 것도 중요합니다.
사용 방법
헤더/푸터에 <header>와 <footer> 사용한다.
메인 컨텐츠에 <main>과 <section> 사용한다.
독립적인 컨텐츠에 <article> 사용한다.
최상위 제목으로 <h1> 사용한다.
순서가 없는 목록으로 <ul>과 <li> 사용한다.
내비게이션에 <nav> 사용한다.
이런 식으로 태그가 가지고 있는 의미에 맞게 사용 한다.
필요성
SEO(검색엔진 최적화)
적절한 태그의 사용으로 키워드에 맞는 웹사이트를 구성하여, 검색 결과 상위에 나올 수 있도록 한다.
웹 접근성 (Web Accessiblilty)
장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹 사이트를 이용할 수 있게 하는 방식을 가리켜,
사이트가 올바르게 설계되어 개발되고 편집되어 있을 때 모든 사용자들은 정보와 기능에 동등하게 접근할 수 있다.
For us (개발자 측면)
우리와 같은 개발자들이 그리고 앞으로의 개발자들이 구조를 쉽게 파악하여 유지와 보수를 쉽게 하도록 한다.
논리적 순서 마크업
시멘틱한 마크업과 함게 디자인적인 것으로만 보는 시선보다 논리적인 순서에 의해 마크업을 하는 것도 매우 중요합니다.
논리적 순서에 의한 마크업은 키보드나 터치패드와 같은 입력 장치만으로
HTML 문서의 모든 콘텐츠를 논리적 순서로 이동하여 사용 할 수 있도록 하는 입력장치 접근성과 밀접한 관련이 있기에
마크업을 할 때는 최대한 논리적 순서에 맞게 마크업을 하는 것이 중요합니다.