✔ 시맨틱 태그

: 태그 자체의 기능은 없으나 어떤 역할을 하는지 사람과 브라우저에게 의미를 부여하는 태그

• div, span으로만 이루어진 HTML문서보다 검색 엔진의 검색 결과의 상위에 노출될 수 있다.

• header, nav, article, aside, section, footer, main 등이 있다.

✔ 시맨틱 웹

: 검색어의 의미를 분석, 추론하여 사용자가 원하였던 정보를 찾아내고 관련된 다른 정보까지 함께 제공하여 기존의 단순히 키워드만 연결시켰던 검색방식을 보완하고 대체할 수 있는 웹

• HTML5에서 지원한 시맨틱 태그 등을 사용하여 검색 엔진이 사이트의 의미를 정확히 파악하게끔 하고 검색 결과값의 정확도를 올린다.
  시맨틱 웹을 고안하고서 시맨틱 태그들이 나오게 되었다.

단순하게 정보가 나열된 문서는 중요도를 구분하기 어렵다.
크롤링 시에도 중요성의 우선순위를 결정하지 못해 엉뚱한 데이터를 긁어 올 수 있다. 따라서 이러한 시맨틱 웹은 검색 엔진 검색 최적화 및 데이터 활용에도 매우 유용하다.

✔ img 태그 vs background 속성

img 태그는 alt 속성으로 인해 기본적으로 에러가 떠도 설명과 함께 이미지가 깨져있음을 보여준다.

하지만 background-image 에 넣은 이미지가 에러가 뜨면 설명이 불가능하다.
따라서 깨진 이미지와 설명 모두가 노출되지 않기 때문에 이미지를 넣지 않은 것과 동일하게 된다.

따라서 사용자들이 컨텐츠를 더 이해하기 쉽게 하기 위해 img 태그를 쓰고, 그렇지 않으면 background image 를 쓴다고 한다.

background-image는 심미적인 요소로써 이미지를 사용할 때 주로 사용한다.