[TIL][HTML] Semantic Web, Semantic Tags 이해하기

🧐 Sematic

개발자가 문서의 의미론적인 구조를 쉽게 파악하게 해준다.
또한 검색엔진에게도 의미론적으로 중요한 부분과 덜 중요한 부분을 파악할 수 있게 해주어 효율적인 검색이 가능하도록 만들어 준다.

Sematic web - 기계가 읽고 처리 할 수있는 웹

Semantic Tag & Non-semantic tag

Semantic Tag - 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명 가능
<header>,<form>,<table>, 등

Non-sematic Tag - 태그 안에 들어간 내용의 의미를 알 수 없음
<div>,<span>, 등

✍ img vs background-image

img 태그가 사용하기 좋은 경우

• 이미지 자체가 컨텐츠인 경우
• 이미지에 문구가 사용되어 의미를 가진 경우
  -<alt>태그를 사용하여 어떤 이미지인지 알려줄 수 있다.

background-image를 사용하는 경우

• 단순 사이트를 꾸미는 용도인 경우