시맨틱 태그에 대해서
시맨틱 태그의 개념과 사용
HTML 의 태그이며, 안에 들어가는 컨텐츠의 의미를 갖고 있는 태그
자주 사용하는 시맨틱 태그와 용도를 나타낸 그림이다.
<header>
문서의 머릿글, 페이지의 상단에 위치하는 경우가 많고, 섹션의 머릿글로도 사용된다. 페이지의 로고, 제목 등을 넣음
<nav>
사이트의 메뉴들이 담겨져있는 태그. 네비게이션 바로 많이 활용된다.
<main>
사이트의 메인 내용(본문)을 포함하는 태그이며, HTML 문서에서 main 태그는 유일해야 한다. 위 그림에서 예시를 들면 section과 aside를 포함하는 main태그를 만들 수 있겠다.
<section>
본문이 있을 때의 부제목, 예를 들면 하나의 컨텐츠의 제목을 담는 태그
<article>
하나의 독립적인 컨텐츠 영역이며, 여러 페이지에서 재사용할 수 있는 내용들이다. 대표적으로는 뉴스 기사나 블로그의 글들 이지만, 게시물, 위젯, 댓글 등도 article 태그의 컨텐츠들로 포함할 수 있다.
<footer>
문서의 맨 아래에 위치하는 바닥글 태그. 사이트의 정보, 개발자의 정보, 여러 링크들을 포함하는데 사용된다.
시맨틱 태그를 사용하는 이유?
참고: https://seo.tbwakorea.com/blog/what-is-semantic-tag/
가독성
시맨틱 태그는 컨텐츠의 명확하고 일관된 흐름과 구조를 만드는데 도움이 된다. 시맨틱 태그를 생각하면서 코드를 계획해서 짜면 불필요하거나 중복되는 코드를 피하게 짤 수 있다. 또, 다른 사람들이 코드를 볼 때 시맨틱 태그만 보고도 어떤 컨텐츠를 담고 있는지 짐작할 수 있기에 가독성이 향상된다.
접근성
시맨틱 태그는 웹 페이지의 접근성을 향상시킨다. 음성, 키보드, 스크린 리더가 시맨틱태그를 통한 웹페이지의 정보들을 탐색하고 사용자와 상호작용 하도록 도움을 준다.
SEO
검색 엔진을 최적화 하는데는 여러가지 방법이 있고, 시맨틱 태그를 활용하는 것 또한 그 방법 중 하나이다. 예를들어 <footer> 태그에서 사이트의 정보, SNS 링크들을 포함하여 SEO를 강화한다. (SNS 노출 극대화)
footer 뿐만 아니라 이런 시맨틱 태그들이 검색엔진에 정보를 제공할 수 있기에 전체적으로 페이지의 검색엔진이 최적화된다.