Semantic Tag

시맨틱(Sematic) 태그 란?

Semantic은 '의미의', '의미론적인'이라는 뜻을 가진 형용사이다. 따라서 시맨틱 태그란 의미를 가진 태그를 말한다.

시맨틱 태그를 사용하는 이유

• 검색엔진최적화(SEO): 검색엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단한다. 따라서 제목은 h1, 중요한 단어는 strong 또는 em을 사용하는 등 의미에 맞는 올바른 태그를 사용하는 것이 중요하다.

• 웹 접근성 (스크린 리더): 시각장애가 있는 사용자가 스크린 리더를 사용하여 페이지를 탐색할 때 도움이 된다.

• 의미가 있는 요소는 개발자 모두에게 명확한 의미를 전달한다. 코드의 재사용성이나 기업간 공유 등 해당 코드의 의미를 전달하기에 용이하다.

시맨틱 태그의 종류와 용도

1. <header>

• 페이지의 제목과 같은 소개 내용을 포함한다.
  일반적으로 heading 태그나 로고 또는 아이콘, 저작권 정보, 검색 양식, 작성자 이름 등을 포함한다.

2. <nav>

• 페이지의 메뉴 목차등을 나타내기 위해 사용한다.

3. <aside>

• 페이지의 사이드바를 나타내기 위해 사용한다.

4. <section>

• 구체적인 시맨틱 태그가 없는 문서의 독립적인 영역을 나타낸다.
• 제목을 가진 콘텐츠를 나타낸다.

5. <article>

• 그 자체로 의미가 있는 웹사이트의 부분이며, 독립적으로 배포 또는 재사용되도록 의도 된 문서이다.
• 게시물, 잡지 또는 신문 기사, 블로그 작성글, 제품 카드, 사용자가 제출한 댓글, 대화형 위젯 등이 있다.

6. <footer>

• 최 하단의 영역으로 보통 작성자의 정보나 저작권, 관련 문서에 대한 링크를 포함한다.

기타 - <mark> <main> <surmary> <time> <details> 등...

참고

https://www.w3schools.com/html/html5_semantic_elements.asp
https://velog.io/@syoung125/%EC%8B%9C%EB%A7%A8%ED%8B%B1-%ED%83%9C%EA%B7%B8-Semantic-Tag-%EC%9E%98-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
https://www.wa.or.kr/m1/sub1.asp