TIL - 22.01.24

 

개인 공부 후 자료를 남기기 위한 목적이므로 내용 상에 오류가 있을 수 있습니다.

 

1월 24일(월)

---

Semantic Web

시맨틱 웹(Semantic Web)이란?

 

1. 시맨틱 웹은 "의미론적인 웹"이라는 뜻으로, 기계가 이해할 수 있는 형태로 제작된 웹을 의미한다.
2. 인터넷이 폭발적으로 보급되고 웹 상에서 축적되는 정보의 양이 방대해짐에 따라 정보 검색 시 불필요하거나 연관성이 적은 정보는 걸러야 할 필요성이 커졌다. 이러한 이유로 오직 사람만이 웹 정보를 파악하는 것이 아닌, 자동화된 기계가 그 의미를 해석하고 정보간의 관계를 이해할 수 있도록 하는 시맨트 웹이 등장한 것이다.
3. 즉, 시맨틱 웹은 기계가 사람을 대신해서 웹 페이지의 정보를 이해하고 우리에게 필요한 정보만을 보여주거나 우리가 필요로 하는 형태로 정보를 가공해주는 역할을 한다.

 

Semantic Tag

시맨틱 태그(Semantic Tag)란?

 

1. 시맨틱 태그란 의미를 가지는 태그를 의미한다.
2. 대표적으로 header, nav, aside, section, article, footer, img 태그 등이 시맨틱 태그이다.

(참고)

Semantic Tag

 

시맨틱 태그를 사용하는 이유는?

 

1. 웹 문서를 작성할 때, 시맨틱 태그를 사용하지 않아도 문법적으로는 아무런 문제가 없다. 하지만 시맨틱 태그를 사용하는 가장 큰 이유는 바로 SEO 때문이다.
2. SEO(Search Engine Optimization)은 "검색엔진최적화"의 의미로 검색엔진에서 웹 문서가 잘 검색되도록 만들어준다.
3. 검색엔진은 저마다 웹 사이트를 돌아다니면서 웹 문서를 읽은 후, 입력되는 검색어에 맞게 웹 사이트를 노출시켜준다.
4. 시맨틱 태그를 사용하면 이런 '검색엔진최적화'가 보다 효율적으로 이루어진다.
5. 따라서 검색엔진에 노출 되어야만 하는 웹 사이트들은 div 태그와 같은 일반 태그 보다 시맨틱 태그를 사용해주는 것이 좋다.

 

 

추가내용

<img> 태그 VS <div> 태그 + background-image 속성 

 

1. 두 방식 모두 이미지를 웹 사이트에 구현하는 방법이지만, <img> 태그는 의미를 가지는 시맨틱 태그이고 <div> 태그는 의미가 없는 일반적인 태그라는 점에서 차이점이 존재한다.
2. 즉, <img> 태그(시맨틱 태그)를 사용하면 '검색엔진최적화'가 효율적으로 이루어지기 때문에 검색엔진에 노출이 잘 된다.
3. 참고로 <img> 태그는 회사로고, 인물 프로필 사진 등 콘텐츠 정보와 연관되어 있는 이미지에 주로 사용된다.
4. 반면에 <div> 태그 + background-image 속성은 이미지가 콘텐츠의 일부가 아니며, 해당 이미지가 단순히 웹 페이지의 배경을 채우는 용도로 쓰일 때 주로 사용된다.

 

 

참고 출처

• https://fierycoding.tistory.com/55
• https://falaner.tistory.com/48