[HTML] 시맨틱 태그

시맨틱 태그

<div>와 기능은 똑같지만 의미가 담겨있는 태그들을 '시맨틱 태그'라고 한다.

엄격한 사용법이 있는 건 아니고 작성하는 사람의 의도가 중요하다.

시맨틱 태그를 잘 활용하면 검색 엔진 최적화(SEO)나 접근성(Accessibility)을 높이는데 도움이 된다.

 

태그이름	용도
<header>	영역 위쪽에서 로고나 제목, 메뉴 같은걸 담고 있는 도입부
<main>	사이트의 본격적인 내용으로 페이지에서 딱 한 번만 사용 가능
<footer>	영역 아래쪽에서 여러 가지 연락처나 관련 정보를 담고 있는 영역
<article>	하나의 완성된, 독립적인 내용을 나타내는 영역
<section>	어떤 것의 일부분을 나타내는 영역
<figure>	이미지와 이미지 설명을 담고 있는 영역

 

시맥틱 태그를 사용하면 좋은 점

1. 검색 엔진 최적화(SEO) 

구글이나 네이버 같은 사이트에서 크롤링을 통해 사이트의 정보를 수집한다.

메타 데이터와 시맨틱 태그가 잘 작성돼있으면 검색 엔진에서 정보를 더 잘 수집하여 더 높은 수준의 최적화를 할 수 있다.

2. 접근성(Accessibility)을 높일 수 있다.

접근성은 A11y 라고도 한다. 

시각 장애인은 스크린 리더를 통해 인터넷을 이용하는데, 스크린 리더는 <div> 태그로 되어있는 사이트 보다는

뜻하는 바가 뚜렷한 시맨틱 태그를 이용한 사이트 쪽을 더 잘 읽는다.

3. 협업 시 가독성을 높일 수 있다.

개발자끼리 협업을 하면서 코드를 주고 받는다.

<div> 태그보다는 시맨틱 태그를 사용하는게 개독성 측면에서 더 좋아 이해하기도 쉽고, 따라서 생산성을 높일 수 있다.