Semantic Web & Semantic Tag

shorry·2022년 2월 15일
0

HTML

목록 보기
1/2

✔️Semantic Tag


📌검색엔진의 웹사이트 정보 수집 방법

  • 검색엔진은 로봇(Robot)이라는 프로그램을 이용해 매일 전세계의 웹사이트 정보를 수집한다.
    (이것을 크롤링이라 하며 검색엔진의 크롤러가 이를 수행한다.)
  • 그리고 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 만들어 둔다.
    (이것을 인덱싱이라 하며 검색엔진의 인덱서가 이를 수행한다.)
  • 인덱스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보인데 결국 웹사이트의 HTML 코드이다. " 즉, 검색 엔진은 HTML 코드 만으로 그 의미를 인지하여야 하는데 이때 시맨틱 요소(Semantic element)를 해석하게 된다. "

📌시맨틱 요소? 시맨틱 태그?

  • 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다.
    • 검색엔진 & 브라우저 : 시맨틱 요소로 구성되어 있는 웹페이지는 검색엔진에 보다 의미론적으로 문서 정보를 전달할 수 있고 검색엔진 또한 시맨틱 요소를 이용하여 보다 효과적인 크롤링과 인덱싱이 가능해진다.
    • 개발자 : 의도한 요소의 의미가 명확히 드러나서 코드의 가독성을 높이고 유지보수를 쉽게 한다.
  • 시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다.

📌시맨틱 요소(태그)의 종류

tag설명
<header>페이지의 상단, 머리말
<nav>페이지의 네비게이션, 메뉴항목
<section>본문의 여러 내용을 포함하는 구획(공간)
<article>본문의 주 내용
<aside>페이지의 사이드에 위치하는 공간
<footer>페이지의 하단
<details>추가적인 정보
<summary><details> 요소의 내용에 대한 요약이나 캡션
<figure>사진, 다이어그램 등과 같은 부가적인 요소
<main>페이지의 주가되는 컨텐츠
<mark>하이라이트나 참조와 같은 표시를 필요로하는 문자
<time>날짜나 시간
<img>이미지
<video>비디오
<audio>오디오

일반적인 태그 (non-semantic tag)

  • div, span 등이 있다.

✔️Semantic Web


  • '의미론적인 웹’이라는 뜻으로, 기계가 이해할 수 있는 형태로 제작된 웹을 의미한다.
  • 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.

✔️Semantic VS Non-semantic


h1 태그

<!-- Semantic -->
<h1>Hello</h1>

<!-- Non-semantic -->
<font size="6"><b>Hello</b></font>

img 태그

<!-- Semantic -->
<img src="" alt="000"/>

<!-- Non-semantic -->
<div class="bg-img"></div>
<!-- css -->
<style>
.bg-img {
	background-image: url("");
  	height: 000px;
  	width: 000px;
  	background-size: 100%;
}
</style>
  • h1 태그의 경우 웹 문서의 중요한 제목이라고 개발자, 검색엔진, 브라우저 모두가 이해할 수 있다.
  • 그러나, sizeb태그 를 이용해서 만든 Hello 는 h1태그와 페이지에 출력되는 것은 동일하지만 개발자, 검색엔진, 브라우저 모두가 어떠한 의미를 갖고 있는지 얼마나 중요한 제목인지를 알 수가 없다.
  • img태그도 마찬가지로 시맨틱 태그로서, 이미지 파일이라는 것을 개발자, 검색엔진, 브라우저가 이해할 수 있고, 또한 이미지 파일에 문제가 있더라도 alt라는 속성으로 인한 대체 텍스트로 어떠한 이미지인지를 알 수 있다.
  • 그러나 stylebackground-image를 이용하여 이미지 파일을 사용하면, 페이지에 출력은 동일하게 되지만 의미가 없는 태그로서 개발자, 검색엔진, 브라우저는 이 태그가 어떤 의미인지를 알 수 없다.
    또한, 이미지에 문제가 발생할 경우, 대체 텍스트가 출력되지 않기 때문에 어떤 이미지인지 알 수 없다.

Reference



나는 검색된다.
고로 존재한다.

End.

profile
I'm SHORRY about that

0개의 댓글