[HTML] Semantic Web과 Semantic Tag

Semantic Web

semantic 요소들로 구성되어 있는 웹사이트

• semantic 요소들로 구성되어 있어, 정보를 보다 더 정확히 검색 / 분석 할 수 있다.
• 시각장애인을 위한 screen reader에 적합하다.

---

Semantic Tag

semantic Web을 활성화 시키기 위한 요소로, 코드를 보고 그 의미를 짐작할 수 있는 태그

• header main footer등등
• 가독성이 높으며 코드의 핵심부분을 잘 파악할 수 있다.
• 개발자 뿐만아니라 브라우저에게도 의미를 전달 할 수 있기때문에 웹사이트 내에서 더 정확하고 빠르게 검색 할 수 있다.

---

Semantic tag vs Non-Semantic Tag

▶️img 태그와 div + background image속성

img 태그 (Semantic)

• 이미지를 불러오지 못하더라도 alt속성으로 대체 텍스트를 표시 할 수 있다.
• 웹페이지에서 이미지가 중요한 역활을 하고 검색에 노출이 되어야 할 경우 사용한다.
• 검색엔진에 이미지를 인식시켜야 할 경우 사용한다.

div + background image속성 (Non-Semantic)

• 이미지가 특별한 의미 없이 사이트를 꾸며주는 용도일 때 사용한다.