🔍 Sementic Web

sementic은 '의미의' 내지 '의미론적' 정도의 사전적 의미를 가지고 있다.
따라서, sementic web을 해석하면 '의미론적 웹' 정도가 되고, 이를 조금 의역하면 '의미를 가지고있는, 확인할 수 있는 웹' 정도가 될 수 있다.

웹의 발달로 인해 인터넷 상 정보의 양이 지나치게 방대해졌고, 수많은 정보중에서 필요한 정보를 선별하는 작업에 매번 개발자(인간)이 개입하는 것의 비효율이 증가하게 되자, 기계가 정보의 의미를 구분할 수 있도록 웹 제작 환경이 발전하며 sementic web이 등장하게 되었다.

📝 Sementic tag

HTML에서 대표적인 non-sementic tag와 sementic tag는 다음과 같다.

✔️ non-sementic tag

div, span

위 tag들은 내용에 어떠한 의미도 담고 있지 않다.

✔️ sementic tag

header, nav, section, article, footer

위 tag들은 tag가 포함하는 영역의 내용이 어떤 성격인지 tag 자체로서 그 의미를 가진다. 즉, 정보를 취득하려는 주체인 인간이 일일이 확인하지 않더라도, 정보의 분류가 가능해진다는 장점이 있다.

✅ img와 div background-image의 차이

img 와 div background-image 모두 웹사이트에 원하는 이미지를 넣을 수 있는 태그인데, 중요한 차이점이 존재한다.

우선, img 태그는 alt attribute에 이미지에 대한 설명을 첨부할 수 있고, 그 내용은 기계가 확인할 수 있다. 즉 검색엔진에 노출시킬 수 있다.
그러나, div background-image는 눈에 보이는 이미지는 동일하지만, 검색엔진으로서는 해당 그림에 대한 정보, 의미를 알 수 없다.

따라서, 웹사이트에 사용한 이미지와 그 정보를 검색엔진에 노출시키고자 한다면 img 태그를, 단순히 꾸미기용도로서 검색엔진 노출을 원하지 않는 경우에는 div background-image 태그를 사용하는 것이 효율적이다.

참고
https://www.w3schools.com/html/html5_semantic_elements.asp