✅ 시맨틱 태그란?
Semantic Tag : 의미를 가지는 태그
시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다.
✅ 시맨틱 웹이란?
웹이 존재하는 수 많은 웹페이지들에 메타데이터를 부여하여 기존의 잡다한 데이터 집합이었던 웹페이지를 의미와 관련성을 가지는 거대한 데이터 베이스로 구축하고자 하는 발상
✅ 사용이유
📌 웹 접근성(Web Accessibility)
웹 접근성이란 웹서비스에 장애/비장애(환경적 요소 포함)를 아울러 모든 사람들이 접근 가능하게 하고 이해와 사용가능하게 하는 것이다.
시맨틱 태그는 웹 페이지의 구조를 의미있게 만든 태그로, 스크린리더 등 보조기기를 사용하는 웹 서비스 사용자들이 시맨틱 태그를 통해 어느 부분이 제목이고, 내용인지 구별할 수 있으므로 정확히 정보를 전달받을 수 있기때문이다.
📌 SEO(Search Engine Optimization) : 검색엔진최적화
웹 문서를 작성할 때, 시맨틱 태그를 사용하지 않아도 아무 문제가 없다. 그러나 검색엔진에서 웹문서가 잘 검색되도록 하기 위해 사용한다.
검색엔진은 저마다의 로봇이 웹사이트들을 돌아다니면서 웹문서를 읽어들인다. 이렇게 웹문서를 읽은 다음 자기 검색엔진에 검색어가 입력되면 그에 맞게 웹사이트를 노출시킨다.
시맨틱 태그는 이런 검색엔진최적화가 보다 효율적이고 잘 되도록 도와주는 역할을 한다.
✅ 시맨틱 태그의 종류
참조 (세연아빠의 개발과 일상의 모습)
<header> : 사이트에 대한 소개 정보나 메인메뉴, 사이트 로고 등이 포함
<nav> : 사이트의 메뉴나 링크 같은 네비케이션 요소들
<main> : 문서의 주요 콘텐츠 부분으로 main안에 header,nav,aside,footer를 포함시켜서는 안됨(한 페이지에 한번만 사용 가능)
<section> : 제목을 갖고 있으면서 문서 전체와 관련이 있는 콘텐츠의 집합(article 아래에도 section 올 수 있음) - 문서에서 독립적인 특정 영역
<article> : 실질적인 내용을 넣음(뉴스 기사) - 영역속에서 독립적인 콘텐츠
<aside> : 사이드바라고도 부르며, 본문 이외의 내용을 담고 있음. 본문옆에 광고를 달거나 링크들을 이 공간에 넣음
<footer> : 화면 구조 중 제일 아래에 위치하며, 회사소개, 저작권, 약관, 제작정보 등이 위치
<address> : 주로 footer안에 연락처 정보를 넣을 때 사용
