연습장

3. 시멘틱 웹 본문

HTML5

3. 시멘틱 웹

js0616 2024. 6. 24. 11:18

검색 엔진은 웹사이트 정보를 수집하며 (크롤링) 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인) 를 만들어 둔다 (인덱싱) 

 

인덱스를 생성할때 사용되는 정보는 웹 사이트의 HTML 코드이며

즉, 검색 엔진은 HTML코드만으로 그 의미를 인지하여야 하는데, 이때 시멘틱 요소를 해석하게 된다. 

 

HTML 으로 작성된 문서는 컴퓨터가 해석할 수 있는 메타데이터와 사람이 사용하는 자연어 문장이 뒤섞여 있다. 

<font size = "6" > <b> hello </b> </font>

<h1> hello </h1>

 

1행의 요소는 의미론적으론 어떤 의미도 가지고 있지 않다. 의도가 명확하지 않다. 개발자가 의도한 요소의 의미를 명확하게 나타내지 않고 , 폰트 크기와 볼드체를 지정하는 메타데이터만 사용중

 

그러나 2행의 요소는 header 중 가장 상위 레벨이라는 의미를 내포 하고 있다. 개발자가 의도한 요소의 의미가 명확히 드러나고 있다. 이것은 코드의 가독성을 높이고 유지보수를 쉽게한다. 

 

검색 엔진은 대체로 h1 요소내의 컨텐츠를 웹 문서의 중요한 제목으로 인식하고 인덱스에 포함시킬 확률이 높다. 

 


 

시멘틱 요소로 구성되어 있는 웹페이지는 검색엔진에 보다 의미론적으로 문서 정보를 전달할 수 있고 

검색엔진 또한 시맨틱 요소를 이용하여 보다 효과적인 크롤링과 인덱싱이 가능해졌다.

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

시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다. 

 

 

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

-> 태그를 컬럼, 속성으로 가지며 웹페이지는 하나의 튜플, 데이터와 같이 이용될 수 있다는 뜻일까 

 


 

non-semantic 요소 

div , span 등 이들 태그는 content 에 대하여 어떤 설명도 하지 않음

 

semantic 요소 

form, table , img 등  이들 태그는 content 의 의미를 명확히 설명한다.

 

HTML5 에서 새롭게 추가된 시맨틱 태그이다.

header 

nav

aside

section

article

footer

 

 

 

 


 

Q. 시멘틱 웹이란?

 

의미를 가지는 시멘틱 요소(태그)를 사용하여 만든 웹이며

이는 검색엔진에게 컨텐츠의 의미를 잘 설명해주어서 검색 인덱싱이나 크롤링에 도움을 주는 장점이 있다.

 

 

 

 

https://poiemaweb.com/html5-semantic-web

'HTML5' 카테고리의 다른 글

6. HTML의 핵심 개념인 Hyperlink  (0) 2024.06.24
5. 텍스트 관련 태그  (0) 2024.06.24
4. 웹 페이지를 구성하는 기본 태그  (0) 2024.06.24
2. HTML5  (0) 2024.06.24
1. 프런트엔드 개발자 학습 방향  (0) 2024.06.24