Semantic Web & Semantic Tags

"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. img 태그를 사용하는 것과 div 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."

위의 질문에 답하기 위해서는 먼저 Semantic Web & Semantic Tags의 개념을 알아야한다.

Semantic Tag : 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다.

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

• Semantic Tag는 자신이 사용된 의미를 명확히 전달하는 요소로, form, table, img 등이 있다.

다음으로는 HTML5에 추가된 Semantic 요소들이다.

요소	의미
header	헤더를 의미
nav	네비게이션을 의미
aside	사이드에 위치하는 공간을 의미
section	본문에 여러 내용(article)을 포함하는 공간을 의미
article	본문의 주 내용이 들어가는 공간을 의미
foorter	푸터를 의미

• Non-Semantic 요소로는 div, span 등이 있으며 이 요소들은 의미가 없는 요소들이다.

이 개념들을 토대로 위에 질문에 답을 하면,

img태그와 background-image 속성을 추가해서 이미지를 넣을 때 웹브라우저에서 나오는 모습은 동일하지만, img태그를 사용하면 의미있는 정보를 가진 웹페이지가 되고, background-image 속성을 사용하면 단순히 이미지를 첨부하는 것 뿐, 아무런 의미가 없다.
즉, 사용자가 정보를 얻으려 할 경우에는 img태그를, 단순히 웹페이지를 꾸미는 용도로는 background-image 속성을 사용하는 것이 좋다.

참고(https://poiemaweb.com/html5-semantic-web)