HTML/CSS 과정에서 Semantic Web와 Semantic Tags에 대해 조사하여 작성하는 블로그 과제
정보의 대부분은 http://www.frotoma.com/sub2_2.do?display1=block&display2=block&display3=block (FROTOMA 회사) 로부터 적어왔다.

Semantic Elements 🛠

Semantic Elements는 browser와 developer 모두에게 그 듯이 명확하게 표현된다.

예시로 설명하면

Non-semantic elements : div / span
semantc elements : form / table / article


여기서 Non-semantic에 해당하는 요소들은 그 content에 대해 아무런 정보를 포함하고 있지 않지만 semantc는 그것에 해당하는 content를 명확히 정의내릴 수 있다.

Semantic Web & Semantic Tags

그렇다면 Semantic Web과 Semantic Tags는 무엇을 의미하는 걸까?

Semantic Web

Semantic Web : 웹의 창시자인 팀 버너스리가 1998년에 제안한 웹 기술. 현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 파일, 서비스 등)에 대한 정보와 자원 사이의 관계 (의미정도-Semanteme)를 기계가 처리할 수 있는 ontology 형태로 포현하고, 이를 자동화된 기계가 처리하도록 하는 Framework 이자 기술이다.

Ontology : 사람들이 세상에 대하여 보고 듣고 느끼고 생각하는 것에 대하여 서로 간의 토론을 통하여 합의를 이룬 바를, 개념적이고 컴퓨터에서 다룰 수 있는 형태로 표현한 모델로, 개념의 타입이나 사용상의 제약조건들을 명시적으로 정의한 기술
"의미론적 웹" 이라는 뜻을 갖고 있다.

"현재의 웹 + ontology => semantic web"
"사람들이 이해할 수 있도록 자연어 위주로 되어 있는 현재의 웹 문서와 달리, 정보자원들 사이에 연결되어 있는 의미를 컴퓨터가 이해할 수 있는 형태의 언어로 바꾸는 것이다."

기술의 이점 💡

(산업적 측면에서 바라봤을 때) 컴퓨터가 자동으로 정보를 처리할 수 있어 정보시스템의 생산성과 효율성이 극대화 된다.

기술의 목적 💡

컴퓨터가 정보자원의 뜻을 해석하고, 기계들끼리 서로 정보를 주고 받으면서 자체적으로 필요한 일을 처리하여 사용자가 필요로 하는 정보를 검색하고, 검색된 정보에서 지식을 추론할 수 있는 기능을 제공한다.
시맨틱 웹의 이상향은, 인터넷에 방대한 양의 온톨로지가 산재하고, 이를 자동으로 해석하여 처리할 수 있는 에이전트 소프트웨어에 사람 또는 에이전트가 질의를 하면, 컴퓨터가 자동으로 분산된 온톨로지를 탐색하고 추론하여 원하는 결과를 알려주는 것이다.

적용 효과 💡

Semantic elements는 HTML5에서 부터 적용된 개념이다. 이전까지는 semantic element의 개념이 없어 의미가 없는 div와 span에도 하나하나 selector를 붙여 구역을 나눠야 했다.

예시 (네이버 홈페이지 코드)

이미지 출처 : https://kutar37.tistory.com/entry/%EC%8B%9C%EB%A9%98%ED%8B%B1-%ED%83%9C%EA%B7%B8-Semantic-Tag

이게 많이 더러운 코드인가? 싶은 생각이 든다면 semantic elements를 적용한 결과와 비교하면 바로 눈에 보인다.

selector로 이름지어 주는 것이 아니라 명확한 뜻을 갖고 있는 semantic tags를 이용한다! 코드의 가독성 up!, 의미 전달력 up!

Semantic Tags (in HTML)

위의 네이버 예시에서 잠깐 살펴본 tag들 외에도 많은 semantic tag들이 있다. 먼저 이 tag들을 배치 이미지로 살펴보면 다음과 같다.

semantic tag의 종류 예시에는 다음과 같은 것들이 있다. (전부는 아님)

• article
• aside
• details
• figcaption
• figure
• footer
• header
• main
• mark
• nav
• section
• summary
• time
  
  
  각 요소들이 의미하는 바는 이름 그대로이다! (아래 이미지 참고)
  
  출처 : https://www.w3schools.com/html/html5_semantic_elements.asp

img 태그 vs background-image 속성 🔥

사이트에 이미지를 넣고자 할때
1. img 태그를 사용하는것
2. div 태그에 background-image 속성을 추가하는 것

각각의 방법은 어떤 상황에 더 어울릴까?

📱 img 태그를 사용!

• 프린트 출력시 이미지가 그대로 출력된다.
• alt attribute를 통해 이미지가 제대로 출력되지 않았을 시 내용을 알려줄 수 있다.
• img 태그 사용 자체로 의미가 부여되며, 해당 요소의 중요성이 올라간다.
  (semantic element로써 효과)

📲 div 태그에 background-image 속성을 추가!

• css를 통해 여러 상황에 맞춘 효과 지정이 가능하다. ex) hover 등..
• 말그대로 background로써 이미지를 활용하고 싶은 경우
  (어느 요소의 배경이미지로 넣고 싶을 때)
• 프린트 출력시 이미지 출력을 원치 않는 경우.
  (img 태그를 사용할때와 달리 css 를 통해 background-image 속성을 사용하면 프린트 출력에 적용되지 않는다.)
• background-image의 효과를 지정하고 싶을 경우. ex) 특수효과(반복 ..), 크기, 등..
  
  

그러나.. background 속성을 사용할 경우 검색엔진에서는 걸러진다!
screen reader X
크롤링 X

결론

즉, img 태그를 사용하는 경우는 이미지가 메인이 되는 경우, background 속성을 추가하는 경우는 이미지가 메인은 아닌 경우로 간단하게 표현할 수 있겠다.


"이미지 자체로 어떤 이미를 내포하고 있다면 img tag를 사용하는게 좋겠다!!"


상황에 맞게 선택해서 사용하자!👩🏻‍💻