[HTML] Semantic

Semantic HTML

• Semantic : '의미를 담고 있는'을 의미
• div, span과 같은 태그는 non-semantic한 태그이다.
• div 대신 header를 사용한다면 대략적으로 이 웹 상의 도입부라는 것을 알 수 있게 된다.

Semantic의 장점

1. 접근성 : screen reader 혹은 browser가 코드를 더 잘 해석할 수 있는 덕분에 더 좋은 접근성을 가질 수 있다.
2. SEO(Search Engine Optimization ; 검색 엔진 최적화) : 웹 페이지의 구조에 의미를 부여하기 때문에 좀더 검색 엔진을 활용하기에 유리하다.
3. 개발자들이 코드를 볼 때 가독성이 좋아진다.

 

출처 : codecademy

<!-- div로 썼을 때 -->

<div id="header">
  <h1>
  	hello world, i'm jayden!
  </h1>
</div>

<!-- header로 썼을 때 -->

<header>
  <h1>
     hello world, i'm jayden!
  </h1>
</header>