[Wecode] Semantic Web, Semantic Tags

Semantic Web / Tag

- 의미론적인 웹

- 기계가 이해할 수 있는 형태로 제작된 웹

- 웹에 존재하는 수많은 웹들의 메타데이터를 부여하여, 잡다한 데이터 집합이 아닌 ‘의미’와 ‘관련성’을 가지는 거대한 데이터 베이스를 구축하고자 하는 발상

 

semantic web을 고안해서 semantic tag들이 나오게 됨

ex) header, nav, section, article, aside, footer

 

img 태그와 background-image 속성의 차이

 

차이점 :

1. 대체 결과물 출력 여부

-> img 태그는 이미지 로딩이 실패할 때, alt=“대체 메시지”로 대체 결과물을 출력할 수 있으나 background-image는 안됨.

 

2. 성능

-> img 태그는 HTML 구문 분석될 때 요청이 이루어지므로 성능면에서 background-image 보다 좋다.

 

3. 검색 노출
-> img 태그는 검색 엔진에서 색인을 생성하여 검색시에 노출이 되지만 background-image는 자동으로 색인화하지 않기 때문에 검색 시 노출되지 않음.

 

결론적으로 img태그가 background-image 속성보다 더 semantic 하다고 볼 수 있다.

 

검색 시 노출 되도록 만들고 싶을때
콘텐츠에 관련이 있는 이미지일 때
웹페이지 성능을 높이고 싶을때
-> img 태그 사용

 

디자인 요소로만 이미지를 활용하고 싶을때
콘텐츠와 관련이 없어 이미지를 불러오지 못해도 상관없을때
-> background-image 속성 사용

 

 

https://daco2020.tistory.com/m/54

<img > 태그 와 {background-image} 의 차이를 알고 싶어?

Semantic Web, Semantic Tag 이해

Semantic Web, Semantic Tag 이해

Semantic Web | PoiemaWeb

Semantic Web | PoiemaWeb