시맨틱 태그 (SemanticTag)

시맨틱태그(SemanticTag)

포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그. block element 이면서 사이트의 구조(레이아웃)을 설계하기 위해 존재한다.

<header>,<nav>,<section>,<footer>,<main>등이 있다. 이러한 시맨틱 태그 요소는 콘텐츠를 논리적 섹션으로 구성하고, 각 부분의 역할과 기능을 전달하는데 도움이 된다.

 

태그에 의미를 부여함으로써 웹사이트의 구조를 파악하기 쉽도록 도와주는 태그

 

시맨틱 태그 종류

 

 

article

• 독립적인 글을 다루는데 사용하는 태그, 블로그 게시물, 뉴스기사, 제품 리뷰 등 독립적으로 배포하거나 재사용 할 수 있는 독립형 콘텐츠

aside

• 옆에 위치하는 콘텐츠를 담는 태그, 페이지 콘텐츠를 제외한 콘텐츠를 정의, 주로 문서에선 사이드바

details

• 사용자가 보거나 숨길 수 있는 추가 세부 정보를 정의하는 태그, 사용자와 상호작용 가능하다는 특징이 있다. 기본적으로 닫은 상태, 클릭하면 내용이 보이며 확장.
• details와 함께쓰이는 summary 태그는 details의 보이는 부분을 담당, summary태그는 details의 첫번쨰 하위 항목이여야 함

figure,figcaption

• figure는 일러스트레이션, 다이어그램, 사진, 코드목록 등과같은 자체 포함된 컨텐츠를 지정
• figcaption은 figure요소에 대한 캡션을 의미, 문서에 대한 간략한 설명

footer

• 섹션의 바닥글, 문서의 아래쪽, 연락처정보, 사이트맵, 웹사이트를 하나로 묶고 SEO를 강화하는데 도움을 주는 소셜 미디어 사이트 들의 링크를 가지고 있다.

header

• 문서나 섹션의 머릿글, 로고, 탐색, 제목및 기타 등 정보가 포함됨, 메타태그정보, 키워드, 등이 포함되는 경우도

main

• 메인내용을 담는 태그, 문서에서 유일해야 하고 article,aside,footer,header,nav등 모든 페이지 태그의 앞에 옵니다.

nav

• 웹사이트의 메뉴, 탭, 탐색 링크 포함된 페이지

section

• 문서의 부분을 의미하는 태그로 기본컨텐츠 내의 특정 주제 또는 부제목과 관련된 콘텐츠 그룹을 정의, section안에 section을 넣을수도 있고, article로 내용을 넣을 수도 있다.

시맨틱 태그 장점

• 화면 판독기, 키보드, 음성명령과 같은 보조 기술에 대한 유용한 정보의 단서를 제공할 수 있다.
• 스크린 리더에게 큰 이점을 준다. 신체적,인지적 장애가 있는 사람을 포함하여 원할한 경험을 할 수 있도록 돕는다.
• SEO향상
  • 구글 과 같은 검색엔진 상 웹사이트 순위에 영향을 미친다.

 

 

 

 

참고사이트 : 

https://seo.tbwakorea.com/blog/what-is-semantic-tag/#:~:text=%EC%8B%9C%EB%A7%A8%ED%8B%B1%20%ED%83%9C%EA%B7%B8%20(Semantic%20Tag)%EB%8A%94,%EC%84%A4%EA%B3%84%ED%95%98%EA%B8%B0%20%EC%9C%84%ED%95%B4%20%EC%A1%B4%EC%9E%AC%ED%95%A9%EB%8B%88%EB%8B%A4.

시맨틱 태그 (Semantic Tag)란? - 태그 요소의 종류와 이점