HTML - Semantic HTML

Semantic HTML이란?

HTML을 의미론적으로 구조화하는 것

왜 필요한가?

브라우저, 크롤러, 개발자가 서로 다른 유형의 데이터를 더 쉽게 구별하도록 한다.
이를 통해 얻을 수 있는 세 가지 이점은 SEO, 접근성, 유지 및 관리가 쉬워진다.
HTML은 처음부터 시맨틱 마크업을 일부 지원했으나, HTML 5로 넘어오면서 section, article, footer 등의 여러 semantic 태그가 추가되었다. 즉, 반드시 사용하라고 만든 것.

1. SEO
SEO(Search Engine Optimization)이란 쉽게 말하면 구글, 네이버 등의 검색 엔진이 수많은 검색 결과 중, 어떤 것들을 선별해서 우선적으로 보여줄 지에 대한 최적화 기법이다.
이 기법에 따르면 <h1> 태그는 <p> 태그보다 더 중요한 정보로 취급되어 검색 엔진의 검색 결과에 영향을 미치게 된다.
중요한 정보를 계층 구조의 상위에 배치하면, 검색 엔진에 중요한 컨텐츠가 무엇인지 효과적으로 알릴 수 있게 된다.

2. 접근성
웹 접근성이라 함은, 다양한 origin에서 특정 웹 페이지에 접근하는 방식을 의미한다.
div와 span 만으로 구성된 웹사이트는, 보이스리더를 사용하는 시각장애인에게 어떤 중요도도 전달해 줄 수 없을 것이다.

3. 유지보수
시맨틱 마크업을 사용하면 명확하고 표준화된 코드를 짤 수 있으므로 장기적으로 시간을 절약할 수 있다.
또한 다른 개발자가 와서 작업하더라도 논리적인 형태의 코드가 존재하므로 혼동 없이 작업할 수 있다.