semantic web
시맨틱 웹은 기계에게 단순히 단어를 제공하는 것이 아니라, 이해할 수 있는 형태로 제작된 웹을 말한다.(ex: {바나나, 노란색}이라는 형태가 아닌 {바나나, 색, 노랑}이라는 바나나라는 것의 색상이 노랗다는 것을 이해시킴)
non-semantic tag
div, span 등과 같은 태그는 콘텐츠에 대한 어떤 설명이 없는 태그이다.
semantic tag
시맨틱 태그는 form, table, img 등 콘텐츠의 의미를 명확하게 설명하는 태그를 말한다.
예를 들어,
<div id="header">는 시맨틱 태그로 <header>라고 표현할 수 있다.
img vs div background-image
img 태그를 사용시 alt 속성에 문자열을 넣을 수 있으며 이에 대한 정보를 사용자에게 전달할 수 있고, css를 사용시 단순한 이미지 첨부이며 문제가 생겼을 시 어떠한 정보도 담지 않는다.
결론적으로, 이미지가 사용자에게 노출되며 이에 대한 정보를 반드시 제공해야 한다면 img를 사용하는 것이 좋고, 순수한 장식을 위해서라면 css를 사용하는 것이 좋다.
HTML 태그로 표현한 이미지 <img alt="error" src="https://www.w3schools.com/whatis/img_js.png">
CSS로 표현한 이미지 .bg-img { background-image: url("https://www.w3schools.com/whatis/img_js.png"); width: 150px; height: 170px; background-size: 100%; }
위 두 가지 방법으로 표현한 이미지는 코드는 다르지만 서로 같다.