사이트에 이미지를 넣는 방법은 두 가지가 있습니다.

• <img>태그를 사용하는 것
• <div>태그에 background-image 속성을 추가하는 것.

실제로 보기에는 차이가 없으며, 코드를 확인해야만 알 수 있다
그렇다면 어떤 방법이든 상관없을까?
지향해야하는 방식이 있을까?
있다면 어떤 방식일까?

Semantic Web

<em>바나나</em>는 <em>노란색</em> 이다
<urn: 바나나, urn: 색, urn: 노랑>

위 내용은 같은 의미이지만 다른 표현 방식이다
첫 줄의 표현방식에서 '바나나', '노란색' 이라는 텍스트는 컴퓨터에게 있어 단지 입력값일뿐 전혀 의미를 갖지 않는다(<em>으로 강조해야하는 객체 정도)
둘째 줄은 '바나나','색','노랑'의 개념을 해석하고 처리하여 의미를 갖게 해주는 표현 방식이다
아래 방식이 시맨틱 웹으로의 방향성이다.

개념

• '의미론적인 웹' 이라는 뜻으로 정보와 자원 사이의 관계-의미 정보를 컴퓨터가 직접 처리할 수 있도록 표현하고 처리하도록 하는 기술이다

목적

• 지금과 같이 사람들만이 웹 상의 정보를 파악하고 교환하는 방식과 달리 자동화된 기계가 직접 의미를 해석하고 처리하여 교환할 수 있게끔 만드는 것이다

Semantic Tag

<div id="header"> 내용 </div>
<header> 내용 </header>

위 태그 두줄은 모두 header라고 지칭하여 다룰 수 있는 표현방식이다
하지만, 첫째 줄은 <div> 라는 단지 섹션을 나누고 'header'라고 이름을 붙였을 뿐이다
둘째 줄은 <header>라는 태그를 사용하여 단순 내용이 아닌 머릿말 이라는 의미를 갖춘 태그이다

• 이처럼 의미를 지니고 있는 태그를 semantic tag 라고 한다

앞선 질문에 대하여

<div class="bg-img"> 배경이미지 </div><!-- css background-image property -->
<img alt='error' src='http://www..'>

첫째줄과 둘째줄 어떤 방식을 지향해야 하는가?

• 앞으로 자동화된 기계의 정보처리방식인 semantic web, semantic tag 개념을 이해하더라도 웹에서 의미론적으로 해석하고 처리할 수 있는 표현방식을 지향해야 할 것이다