개인 공부를 위해 작성했습니다

Semantic Web과 Semantic Tag!

시맨틱(Semantic) : "의미의, 의미론적인"

●Semantic Web?

• 시맨틱 웹이란 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다

  즉, 문서의 의미에 맞게 / 어플리케이션의 의미에 맞게 구성된 웹

●Semantic Tag?

• 시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다

  즉, 태그가 의미를 가짐으로써 검색엔진의 크롤러에게 사이트에 대한 정보를 비교적 정확히 제공할 수 있게 된다

• HTML 요소(element)에는 2가지 타입이 있는데,

  1. non-semantic 요소가 있고 div, span 등

  2. semantic 요소가 있다

  • <form>, <table>, <img>
  • HTML5에서 새롭게 추가된 시맨틱 태그
    • header 헤더를 의미
    • nav 네비게이션을 의미
    • aside 사이드에 위치하는 공간을 의미
    • section 본문의 여러 내용 (article)을 포함하는 공간을 의미
    • article 본문의 주 내용이 들어가는 공간을 의미
    • footer 푸터를 의미

Q) "사이트에 이미지를 넣는 방법은 두 가지가 있습니다. <img> 태그를 사용하는 것과 <div>태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."

A) 검색엔진은 HTML 코드만으로 그 의미를 인지하는데, 개발자가 <img> 태그를 사용하느냐(이미지를 직접 삽입하느냐), 또는 <div> 태그에 background-image 속성을 추가하느냐(배경으로써 그 이미지를 사용하느냐)에 따라 검색엔진이 그 의미를 명확히 해석하고 그 데이터를 활용할 수 있게 한다
즉, 이미지가 이미지로서의 정보를 가지고 기능을 하게 하려면 img 태그를 사용하고, 그 이미지가 어떠한 배경으로 스타일용으로 사용하고 싶다면 요소에 background-image 속성을 사용하면 된다

✨참고✨크롤링: 검색엔진은 로봇(Robot)이라는 프로그램을 이용해 매일 전세계의 웹사이트 정보를 수집하는 것

✨참고✨인덱싱: 검색엔진이 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 만드는 것

✅ 목표!

• Semantic의 개념을 이해하고 ("의미론적인"이라는 뜻)
• 검색엔진이 내가 의도한 목적대로 나의 웹 페이지를 검색할 수 있도록 Semantic Tag를 사용하여 작성할 수 있다