Semantic tag
HTML에는 Semantic tag와 Non-semantic tag가 존재합니다.
Semantic tag란 이름만으로 그 태그가 어떤 역할을 수행하는지 알 수 있는 태그들을 의미합니다.
<header>,<h1>,<img>와 같은 태그들이 Semantic tag인데, 이름만 보고도 컴퓨터/사람이 해당 태그가 어떤 역할을 하는지 알 수 있는 태그라고 볼 수 있습니다.
<header>
<h1>난 제목이야</h1>
</header>반면 <div>,<span>처럼 이름만 보고는 어떤 역할을 하는지 예상할 수 없는 태그들을 Non-semantic tag라고 합니다.
<div>무슨 역할을 하는건가요</div>Semantic tag를 사용하면 SEO최적화에 유리한데 검색엔진이 태그에 목적에 부합하게 설계되어 있는 사이트에서 보다 효율적으로 정보를 파악할 수 있어 검색결과 노출에 유리할 수 있게 해주기 때문입니다.
Semantic web
Semnatic web이란 '의미론적인 웹'이라는 뜻을 가지고 있는데 현재의 인터넷에서 리소스에 대한 정보와 자원 사이의 관계를 온톨로지 형태로 표현해서, 기계가 처리하도록 하는 프레임워크이자 기술이라고 할 수 있습니다.
img태그와 background-image
img태그와 background-img 둘 다 이미지를 넣을 수 있지만 차이점이 존재합니다.
<img src="imageurl" alt="text">background-image: url(imageurl)바로 img태그에는 alt속성이 존재한다는 것인데 img태그는 이미지 로드가 실패하면 대체텍스트가 보이는 반면 background-image는 대체텍스트가 보이지 않습니다.
만약 이미지가 콘텐츠 영역에서 중요하지 않은 이미지였다면 굳이 대체텍스트를 사용할 필요가 있을까요? 대체텍스트를 사용한다는 것은 이미지가 단순한 디자인 요소가 아니라 콘텐츠의 일부라는 것을 의미하는 것입니다.
반면 background-image의 경우 이미지가 단순한 디자인의 경우 사용할 수 있습니다.
