시맨틱태그란?

1. 시맨틱 태그란?

시맨틱 태그는 그 자체로 의미를 가지며, 문서의 구조를 명확하게 표현하는 HTML 태그를 말합니다. 예를 들어, header, nav, main, article, section, footer 등이 있습니다. 이러한 태그들은 웹 페이지의 구조를 이해하기 쉽게 만들어주어 검색 엔진 최적화(SEO)에도 도움이 됩니다.

📌 시멘틱 태그의 종류

1. header : 제목, 웹사이트를 나타내는 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있다.

2. nav : nav 태그는 내비게이션 표현을 위한 태그로써 동일한 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크들의 모음을 나타낸다. header 안에 여러가지 메뉴들이 모여있을 때, div 대신 nav 태그를 사용한다.

3. footer : 일반적으로 웹 문서 끝자락에 들어가는 태그로 보통 저작권 정보나 저작권 표기와 같은 내용이 들어가는 부분이다. footer 태그 안에 section, article 등 다른 레이아웃 태그들을 모두 사용할 수 있고 이런 태그들을 활용하여 푸터 안에 다양한 정보들을 넣을 수 있다.

4. main : main 태그는 해당 페이지의 메인 콘텐츠를 나타낼 때 사용하며 반드시 한 번만 사용된다. main 태그 내의 콘텐츠는 해당 문서의 중심이 되는 주제나 확장되는 콘텐츠로 구성되어야 하며, 문서 전반에 걸쳐 반복되는 내용을 포함해서는 안 된다.

5. aside : main 안에서도 페이지의 컨텐츠와 직접적인 상관이 없는 내용들은 여기에 집어넣는다. ex) 광고, 페이지와 연관된 다른 링크들 등

6. article : 한마디로 정의하자면 태그를 적용한 부분을 떼어 내 독립적으로 배포하거나 재사용하더라도 완전히 하나의 콘텐츠가 된다면 article 태그를 사용할 수 있다.

7. section : 콘텐츠의 영역. 즉 여러 가지 콘텐츠들을 그룹으로 묶어주는 역할을 담당합니다. 문맥 흐름 중에서 콘텐츠를 주제별로 묶을 때 사용하며, 그 안에는 섹션 제목을 나타내는 h1 ~ h6 태그들이 함께 사용된다.

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

시맨틱 태그를 사용하면 검색 엔진이 웹 페이지를 더 잘 이해할 수 있습니다. 이는 검색 결과에서 상위에 노출되는데 도움이 됩니다. 예를 들어, header, nav, main, article 등의 태그는 검색 엔진에게 해당 영역이 어떤 역할을 하는지 알려주어 검색 결과의 정확성을 향상시킵니다.