Semantic Web, Semantic Tags

🔶 Semantic Web, Semantic Tags

참고 사이트 : https://poiemaweb.com/html5-semantic-web

Semantic Tags란?

Semantic은 '의미의', '의미론적인'이라는 뜻을 가진 형용사이다. 따라서 시맨틱 태그란 의미가 있는 태그를 말한다.

• 의미
  div나 span과 같이 의미가 없는 태그는 태그 이름만 보고는 어떤 내용인지 전혀 유추할 수가 없는 반면, form, table, article 등 의미가 있는 태그는 내용을 명확하게 정의한다.

• 장점
  1) 검색엔진최적화(SEO) 🔍 : 검색엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단한다. 검색엔진에 노출이 잘 될 수 있습니다
  2) 가독성이 좋다.
  

---

🔶 "img태그"와 "div태그에 background-image 속성 사용"의 차이점

참고사이트
1. https://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image
2. https://www.youtube.com/watch?v=xDFNvEwPYYY
3. https://daco2020.tistory.com/m/54

사이트에 이미지를 넣는 방법은 두 가지가 있다.
<img> 태그를 사용하는 것과 <div> 태그에 background-image 속성을 추가하는 것.

🔆 1. 두 가지 방법의 차이점

• img태그는 semantic적 의미를 갖는 태그여서, 사람(개발자)이나 기계(검색엔진 등) 입장에서 잘 읽힌다.
• div태그는 semantic적 의미가 없어서 가독성이 안좋다.

🔆 2. 각각 어떠한 경우에 사용하면 좋은지

1) <img /> 태그 활용

• 검색 시 노출이 되도록 만들고 싶을 때
• 콘텐츠에 관련이 있는 이미지일 때
• 웹페이지 성능을 높이고 싶을 때

2) CSS background-image 속성 활용

• 디자인적인 요소로만 이미지를 활용하고 싶을 때
• 콘텐츠와 관련이 없어 이미지를 불러오지 못해도 상관 없을 때