시멘틱 웹이란 ?
시멘틱 웹은 보여주고자 하는 구조(기능)에 맞게 시멘틱태그(구조에 맞는 태그) 를 사용하여 만든 웹이다.
(문서의 의미에 맞게 구성된 웹.)
시멘틱 태그란 ?
* 시맨틱 태그는 의미가 있는 태그로써 개발자와 브라우저 모두 이해할 수 있는 태그입니다.
아래의 사진의 구조를 보면
머릿말을 나타내는 header
본문 및 본문 내용을 나타내는 section , main
section 안에서 구분을 지을때 사용하는 article
본문 사이드에 들어가는 aside
페이지 가장하단에 들어가는 footer
아래의 예시 에는 빠졌지만 메뉴,상태바 등을 나타내고있는 navigation 등 이처럼 설명한것 외에도 다양한 시멘틱 태그가있다.
하지만,
우리가 가장 기본적으로 배운. 요소들을 감싸는 div라는 태그를 사용하지않고 왜 ? 위와 같은 태그를 사용할까 ?
시멘틱 태그를 사용하는 이유는 ?
1. 검색엔진 최적화
시멘틱 태그를 사용하였을 경우 브라우져의 검색엔진이 시멘틱 태그를 해석하여 검색결과를 상단에 올려준다.
ex) div안에 span을 사용한 제목 <<<<<< header 안에 h1태그를 사용한 제목 후자가 더 상단에 검색결과로 나타난다.
2. 웹 접근성 향상
시각장애인분들이 사용하는 화면 판독기 기계가 쉽게 태그를 읽고 해석할수 있다.
3. 유지 보수성
실제 현업에서는 오래된 코드를 유지보수할일도 많으며 다른사람이 만든 코드를 유지보수할때 시멘틱 태그를 사용한 코드가
구조파악이 쉬워 유지보수에 뛰어나다.