시멘틱 마크업이란?
시멘틱의 사전적 뜻은 '의미론적인' 정도로 해석할 수 있는데, 이것은 마크업을 할 때 의미에 부합하는 태그를 사용하라는 뜻입니다. 실제 마크업을 할 때는 작업자마다 콘텐츠의 의미를 해석하는 차이가 조금 있을 수도 있지만 가급적 시멘틱하게 마크업을 하려고 노력하는 것이 중요합니다.
즉, 개발자와 브라우저에게 의미있는 태그를 제공한다고 이해하면 됩니다.
간단한 예로 <div>는 non-senamtic 태그라 볼 수 있고 <table>,<header>,<footer>등은 semantic태그라고 볼 수 있습니다.
<table>이면 표가 들어 갈 것이고, <nav>는 네비게이션을 의미할 것이라 유추 할 수 있습니다
이렇게 의미를 가진 태그는 검색엔진이나 그 이외에 기계적인 동작들이 웹페이지를 쉽게 이해 할 수 있게 됩니다.
<시멘틱 마크업 작성의 장점>
- 접근성이 좋아집니다.
- 검색 엔진 최적화 : SEO(Search Engine Optimization)
- 코드 가독성이 좋아집니다.
- 코드와 데이터의 재사용성이 높아집니다.
- 호환성과 운용성이 확보됩니다.
<시멘틱 마크업 태그들>
- header
- nav
- section
- article
- aside
- main

논리적 순서 마크업
논리적 순서에 의한 마크업은 키보드나 터치패드와 같은 입력 장치만으로 HTML 문서의 모든 콘텐츠를 논리적 순서로 이동하여 사용할 수 있도록 하는 '입력장치 접근성'과 밀접한 관련이 있습니다. 따라서 마크업을 할 때 최대한 논리적 순서에 맞게 마크업하는 것이 중요합니다.
마크업을 할 때는 디자인의 시각적 흐름보다는 내용에 대한 논리적 흐름 순서를 잘 파악하여 마크업 하는 것이 무엇보다 중요합니다.
예) 1번 쇼핑 -> 2번 G마켓 -> 3번 옥션 -> 4번 하프클럽, 쿠팡, 11번가 GS샵, 패션플러스, STL 일상공감 .....가 내용 흐름 순서에 더 적합 합니다.