| Semantic Web(시맨틱 웹)

> 정의

즉, 시멘틱 웹은 의미론적인 웹이며, 웹 사이트를 구성하고 있는 코드들이 단순한 코드구성이 아닌 의미를 가지고 있다는 것을 말해준다.

근데 사실 뒷 부분은 잘 읽히지도 않고, 이해하기도 쉽지가 않다.*
-> 등장한 이유를 좀 알아보자

> 등장배경

먼저 웹 기술은 정보의 표현과 전달을 위한 간편한 방법을 제공해 주었고, 이에 따라 인터넷이 실생활에 까지 확산이 되면서 웹상에 방대한 양의 정보가 쌓였다.

하지만,

• 정보 접근의 한계성: 웹 기술은 방대한 데이터와 정보에 접근 시 키워드(keyword)를 통한 접근만 가능하였고,
• 불필요한 정보: 그에따라, 정보에 접근을 위한 키워드 검색 시 많은 불필요한 정보들이 노출되었다.
• 사용자의 개입 필요: 또한, 컴퓨터 스스로 필요한 정보를 추출, 해석, 가공 하지 못했기 때문에 정보를 사용하는 사용자가 직접 처리 해야했다.. !

이렇기 때문에 컴퓨터가 정보를 읽고 직접 처리 할 수 있는 웹을 개발하게 되었는데 . .!
이게 바로 Semantic Web(시맨틱 웹) 이다

| Semantic tag(시맨틱 태그)

> 왜 나왔나 ?

• HTML5 이전까지 Semantic tag는 존재하지 않았고, 당시 대부분의 태그는 div감싸져 있었다.

  <div id="header"> 내용 </div>

• 불편한 점
  • 개발자: 사이트 전체 구조를 한눈에 파악하기 힘들다.
  • 검색 엔진: 사이트의 의미를 정확히 파악하기 힘들다.
    • 그에따라, 검색 결과값의 정확도가 떨어지게 된다.

나온 대안이 시맨틱 웹이고, 그에 따라서 HTML5에서 시맨틱 태그(Semantic tag)라는 것이 나온 것이다.

> 새로운 Tag(태그)

<header> : 헤더를 의미한다.
<nav> : 네비게이션을 의미한다.
<aside> : 사이드에 위치하는 공간을 의미한다.
<section> : 본문의 여러 내용(artivle)을 포함하는 공간을 의미한다.
<article> : 본문의 주 내용이 들어가는 공간을 의미한다.
<footer> : 문서 또는 섹션의 바닥글을 지정한다.

> Semantic Tag의 사용

• 웹 사이트에 이미지를 넣는 방법

  • <img>

  <img alt="HTML" src="https://www.w3schools.com/whatis/img_js.png" >

  • background-image

  .bg-img {
  background-image: url("https://upload.wikimedia.org); 
  }

• <img>와 background-image의 차이점

  • img태그에는 src이외 atribute인 alt가 존재한다.
    • 그에 따라, 넣으려고 했던 이미지 로드에 실패할 경우 alt속성에 작성된 문자열이 뜨게된다. !
  • 반면 background-image는 alt 속성이 따로 없으며,
    • 이미지 로드만 실패하게 된다.

[왜 이것이 중요한가 ?]

사용자의 검색에 노출되기 위해선 img 태그를 사용해야한다

alt속성에 작성된 문자열은 meta정보가 되게 때문에 **사용자가 검색 시 alt속성에 지정된 문자열을 인식하게 되기 때문이다 ! !

하지만 단순히 사이트를 꾸미기 위해 이미지를 불러오려고 한다면 ?

background-image를 사용하는것이 좋다.