시맨틱 태그(Semantic Tag)
시맨틱 태그란?
시맨틱 태그(Semantic Tag)란 HTML의 구조를 설계하는데 있어 태그에 의미를 부여함으로써 사이트의 구조를 파악하기 용이할 수 있도록 도와주기 위해 만들어진 태그라고해요.
아래의 예시를 통해 시맨틱 태그에 대해 더 자세히 이해해볼 수 있겠습니다.
웹페이지에 이미지를 넣는 방식
❓ 방법1. HTML에서
img태그 사용<img src="이미지 링크"/>
❓ 방법2. CSS에서
background-image속성 사용{ background-image: url("이미지 링크"); }
위와 같이 2가지 방법을 사용하여 웹페이지에 이미지를 넣을 수 있는데요. (방법1)은 의미를 알아볼 수 있는 시맨틱 태그인 img를 사용하였고, (방법2)는 시맨틱 태그를 사용하지 않고 있습니다. 이렇게 시맨틱 태그인 img를 사용했을 때와 사용하지 않았을 때는 아래와 같은 차이를 보여줍니다.
✅ 차이점
- 이미지 로딩 실패 시
- (방법1)은
alt="대체 메시지"로 결과물 출력- (방법2)는 대체 메시지 출력되지 않음
- HTML 구문 분석
- (방법1)은 구문 분석 시 요청이 이루어짐. 이는 성능면에서 유리함.
- (방법2)는 요청 이루어지지 않음
- 검색 시 노출 여부
- (방법1)은 검색 엔진에서 색인을 생성하여 검색 시 노출됨. 이는 시멘틱 태그인
img를 사용했기 때문임.- (방법2)는 자동으로 색인화하지 않기 떄문에 검색 시 노출 안됨.
이처럼, 시맨틱 태그는 HTML 요소의 의미를 보다 명확하게 함으로써, 검색엔진이 이를 인식할 수 있도록 만들어줍니다.
정리
📝 시맨틱 태그는 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확하게 설명하는 역할을 합니다.
시맨틱 웹(Semantic Web)
지금까지 설명한 시맨틱 태그에 의해 컴퓨터는 HTML요소의 의미를 보다 명확하게 해석하여 데이터를 활용할 수 있는 시맨틱 웹을 실현할 수 있습니다. 시맨틱 웹은 보통 아래와 같이 설명됩니다.
📜 시맨틱 웹
웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 구촉하고자 하는 발상입니다.
굉장히 어려워보이는 이 시멘틱 웹이란 것을 조금 더 쉽게 설명해보자면, 결국 시맨틱 웹(Semantic Web)은 "의미론적인 웹"이란 뜻으로, 기계가 이해할 수 있는 형태로 제작된 웹을 의미합니다.
참고
모던 자바스크립트 Deep Dive, 시맨틱 요소와 검색 엔진
daco2020, img태그 와 {background-image} 의 차이를 알고 싶어?
