Semantic Web과 Semantic Tag

지원 ·2021년 8월 4일
0

HTML&CSS

목록 보기
1/3

1.Semantic Web이란?

[개념]
웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여,
기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는
거대한 데이터베이스로 구축하고자 하는 발상이다.

[목표]
시맨틱 웹은 기존 웹을 확장하여 컴퓨터가 이해할 수 있는 잘 정의된 의미를 기반으로 의미적 상호운용성을 실현하여, 다양한 정보자원의 처리 자동화,데이터의 통합 및 재사용등을 컴퓨터가 스스로 수행하여, 인간과 컴퓨터 모두 잘 이해할 수 있는 웹을 만드는 것이 목표이다.

2.Semantic Tag란?

[역할]
시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다.
이러한 시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다.

3.div 태그 vs img 태그

그렇다면 img 태그를 사용하는 것과 div 태그에 background-image 속성을 추가해서 이미지를 넣는 방법의 차이점을 알아보자.

"Wecode" 라는 글자를 나타낼 때 아래와 같이 두 가지 방법으로 표현할 수 있다.

  • semantic 요소 : 내용을 분명히 정의한다.
    ex) form, table, img 등

  • non-semantic 요소 : 내용에 대해 아무것도 알려주지 않는다.
    ex) div, span 등

non-semantic 요소(span)로 표현하게 되면 의미론적으로 어떤 의미도 가지고 있지 않지만, semantic 요소(h3)로 표현하게 되면 개발자가 의도한 요소의 의미가 명확히 드러나고 있다.

시맨틱 요소를 사용하게 되면,

1. 코드의 가독성을 높일 수 있고,
2. 유지보수 또한 쉽게 할 수 있다.
3. 노출도를 높일 수 있다.

profile
개발자, 과정을 기록하다

0개의 댓글