- 검색엔진은 로봇(Robot)이라는 프로그램을 이용해 매일 전세계의 웹사이트 정보를 수집한다.
(이것을크롤링
이라 하며 검색엔진의 크롤러가 이를 수행한다.)- 그리고 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 만들어 둔다.
(이것을인덱싱
이라 하며 검색엔진의 인덱서가 이를 수행한다.)
- 인덱스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보인데 결국 웹사이트의 HTML 코드이다. " 즉, 검색 엔진은 HTML 코드 만으로 그 의미를 인지하여야 하는데 이때
시맨틱 요소(Semantic element)를 해석
하게 된다. "
브라우저
,검색엔진
,개발자
모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다.
검색엔진
&브라우저
: 시맨틱 요소로 구성되어 있는 웹페이지는 검색엔진에 보다 의미론적으로 문서 정보를 전달할 수 있고 검색엔진 또한 시맨틱 요소를 이용하여 보다 효과적인 크롤링과 인덱싱이 가능해진다.개발자
: 의도한 요소의 의미가 명확히 드러나서 코드의 가독성을 높이고 유지보수를 쉽게 한다.- 시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다.
tag | 설명 |
---|---|
<header> | 페이지의 상단, 머리말 |
<nav> | 페이지의 네비게이션, 메뉴항목 |
<section> | 본문의 여러 내용을 포함하는 구획(공간) |
<article> | 본문의 주 내용 |
<aside> | 페이지의 사이드에 위치하는 공간 |
<footer> | 페이지의 하단 |
<details> | 추가적인 정보 |
<summary> | <details> 요소의 내용에 대한 요약이나 캡션 |
<figure> | 사진, 다이어그램 등과 같은 부가적인 요소 |
<main> | 페이지의 주가되는 컨텐츠 |
<mark> | 하이라이트나 참조와 같은 표시를 필요로하는 문자 |
<time> | 날짜나 시간 |
<img> | 이미지 |
<video> | 비디오 |
<audio> | 오디오 |
div
,span
등이 있다.
- '의미론적인 웹’이라는 뜻으로, 기계가 이해할 수 있는 형태로 제작된 웹을 의미한다.
- 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.
<!-- Semantic -->
<h1>Hello</h1>
<!-- Non-semantic -->
<font size="6"><b>Hello</b></font>
<!-- 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
태그의 경우 웹 문서의 중요한 제목이라고 개발자, 검색엔진, 브라우저 모두가 이해할 수 있다.- 그러나,
size
와b
태그 를 이용해서 만든 Hello 는h1
태그와 페이지에 출력되는 것은 동일하지만 개발자, 검색엔진, 브라우저 모두가 어떠한 의미를 갖고 있는지 얼마나 중요한 제목인지를 알 수가 없다.
img
태그도 마찬가지로 시맨틱 태그로서, 이미지 파일이라는 것을 개발자, 검색엔진, 브라우저가 이해할 수 있고, 또한 이미지 파일에 문제가 있더라도alt
라는 속성으로 인한 대체 텍스트로 어떠한 이미지인지를 알 수 있다.- 그러나
style
에background-image
를 이용하여 이미지 파일을 사용하면, 페이지에 출력은 동일하게 되지만 의미가 없는 태그로서 개발자, 검색엔진, 브라우저는 이 태그가 어떤 의미인지를 알 수 없다.
또한, 이미지에 문제가 발생할 경우, 대체 텍스트가 출력되지 않기 때문에 어떤 이미지인지 알 수 없다.
Reference
나는 검색된다.
고로 존재한다.
End.