[HTML] Semantic Web & Semantic Tag

semantic : 의미의, 의미론적의

🌲 Semantic Web (Web 3.0)

semantic web이란,

W3C(World Wide Web Consortium)에서 제정한 World Wide Web의 확장판으로, 웹의 각종 정보들에게 의미(metadata)를 가지게 한다. 각종 정보들에게 의미를 부여하기 위해서는 semantic tag가 필요하다.

🌴 Semantic Tag

semantic tag란,

시맨틱 태그란 의미가 있는 태그를 말한다. 예를 들어, div나 span과 같이 의미가 없는 태그는 태그 이름만 보고는 어떤 내용인지 전혀 유추할 수가 없다. 반면에 form, table, article 과 같은 태그는 내용을 명확하게 정의한다.

💚 이미지를 첨부하는 두 가지 방식
[HTML] img태그 vs [CSS] div 태그 + background img 속성

html 에서 이미지를 첨부할 때, 크게 두 가지의 방식을 사용한다.
1) HTML에서 < img > 태그를 사용하거나,
2) CSS에서 < div > 태그에 background img 속성을 넣는 방식이다.

🪴 두 방식의 차이점

1)은 이미지 로딩이 실패할 때, 대체 메시지를 넣어 별도의 설명이 가능하다.
또한 1)은 HTML 구문 분석시에 요청이 이루어지므로 성능면에서 좋다.
더불어 1)은 검색 엔진에서 색인을 생성하여 검색시에 노출이 되는 반면, 2)는 자동으로 색인화 하지 않기 때문에 검색시 노출되지 않는다.

🌿 활용 예시

1) HTML < img > 태그 활용

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

2) CSS background-image 속성 활용

디자인적인 요소로만 이미지를 활용하고 싶을 때
이미지가 콘텐츠의 일부가 아닐 때
페이지 프린트시 이미지가 나오지 않게 할 때