Semantic

Semantic web

컴퓨터가 이해하기 편하게 만든 웹(의미론적인 웹)

Semantic Tag

각 태그의 의미를 더욱 명확하게 할 수 있습니다.
div에 class명을 지을때 직관적으로 지어야한다고 하는데, 이때 이유가 나타납니다.

1.class명에 따라 태그 내부에 어떠한 내용을 채워야하는지 이정표가 됨
2.tag들이 메타데이터가 되면서 검색엔진 연관성 증가
3.시각장애인에게 정보 제공시 관련 내용을 찾기가 더 수월해짐
4.같은 맥락에서 개발자가 관련 내용을 찾기 더 수월해짐

<div class=tigerpic>
	<img src= 코끼리 사진>
    <p>코끼리는 어쩌구 저쩌구 뭘하고있다</p>
</div>

위와 같은 상황이면 검색엔진에 코끼리 사진을 띄우고 싶은데 태그상 연관성이 떨어져 노출될 확률이 적어질 것 입니다.
또한 다른 개발자가 위 부분을 수정해야 하거나, 시각장애인이 내용을 찾을때 어려움에 처할 가능성이 높아집니다.

이러한 원리로 img 태그는 사용자에게 노출되어야 하는 이미지를 업로드 할때 사용하는것이 좋습니다.

반대로 background-image는 이미지 자체가 가지고있는 의미가 없기 때문에 단순한 배경을 꾸밀때 사용하는것이 좋겠습니다.

background-image:정보 없음 단순 꾸미기
img태그 :alt 내부에 입력된 텍스트를 토대로 검색엔진에서 노출되기때문에 사용자에게 노출이 필요할시 사용