시맨틱 = 의미론적인
HTML 구조를 설계하는데에 div태그만 쓴다면 웹사이트의 구조를 파악하기 힘들것이다.
하지만 시맨틱 태그의 등장으로 보다 명시적이면서 직관적인 구조의 설계가 가능하게 됐다.
시맨틱 태그의 이점
1. 접근성 향상
화면 판독기, 음성명령 등 유용한 정보 제공
2. SEO 향상
시맨틱 태그를 잘 활용한 웹사이트일수록 검색엔진 상에서 높은 순위를 유지할 가능성 증가
3. 가독성 향상
HTML구조를 만들고 파악하는데에 있어서 더욱 좋은 가독성을 제공한다
4. 브라우저 렌더링 최적화
시맨틱 태그를 사용하면 페이지의 구조가 명확하기 때문에, 브라우저가 콘텐츠를 더욱 효율적으로 렌더링
-> 검색엔진이나 보조 기술이 크롤링하거나 해석할 때 효율성 향상
주요 시맨틱 태그
- <header>: 문서나 섹션의 머리글을 나타냄.
- <footer>: 문서나 섹션의 바닥글을 나타냄.
- <article>: 독립적인 콘텐츠 블록을 나타냄.
- <section>: 관련된 콘텐츠 그룹을 나타냄.
- <nav>: 내비게이션 링크의 그룹을 나타냄.
- <main>: 문서의 주요 콘텐츠 영역을 나타냄.
- <aside>: 페이지의 부가적인 내용을 나타냄.
시맨틱을 잘 활용한 사이트
1. 쿠팡
2. Google play
3. Vibe
3. 카카오
4.라이엇 게임즈
5. 배틀그라운드
etc. 신기했던 태그
ke, kc와 같은 사내 규칙을 활용해서 사용자 정의 태그를 사용하는 것을 볼 수 있었음.
