👉🏻 Semantic Web

Semantic은 '의미론적인'이라는 뜻이다.
웹이 발전하고 정보로서의 가치가 중요해지면서 사람에게도 의미가 있고 스크린 리더와 같은 기계들에게도 활용하기 좋은 형태의 데이터로 웹을 발전 시키기 위한 노력을 하게된다.

그 과정에서 생겨난 것이 Semantic Web

검색 엔진에 노출되지 않는 정보는 존재 의미가 없는 것이나 다름 없다.
검색엔진은 매일 웹사이트 정보들을 수집한 뒤 예상되는 검색 키워드에 대응하는 인덱스를 만들어 놓는다.
이러한 인덱스를 수집하는 기준이 바로 HTML의 태그인데, 그 중 시맨틱 태그의 사용 유무에 따라 인덱스 포함 여부가 결정된다.

html이라는 태그 안에서 사용되는 여러가지 정보들을 의미에 맞게 잘 표현하기 위한 태그가 Semantic Tag

👉🏻 Semantic Tag

<!-- 시맨틱 태그 미사용 예 -->

<div class="header">
  <div style="font-size:40px; font-weight:bolder">
    호정
  </div>
</div>

<!-- 시맨틱 태그 사용 예 -->

<header>
  <h1>
    호정
  </h1>
</header>

일일히 css를 주는 것 보다 h1을 통해 명확한 의미가 있는 태그를 사용함으로 코드의 가독성을 높일뿐 아니라 문서의 핵심요소를 빠르게 파악할 수 있다.

시멘틱 태그 종류
https://www.w3schools.com/html/html5_semantic_elements.asp

📌 <img> VS <div> + background-image

<img> 태그는 의미가 내포되어 있는 시맨틱 태그로 alt값을 통해 이미지 오류 시, 이미지가 화면에 출력되지 않더라도 alt값을 통해 어떤 이미지인지 유추 할 수 있다.

반면, <div>를 사용해 css에 background-image를 주게 되면 이미지 오류 시, 이미지가 화면에 출력되지 않으면 그 이미지가 무엇인지 유추가 어렵다.

상황과 용도에 맞게 적절한 태그를 쓰는 것이 중요하다 ‼️