[1주차-1] Semantic Web과 Semantic Tag

JH Cho·2022년 8월 16일
0

span의 경우 컨텐츠만큼만 영역이 적용되어 텍스트 얼라인을 주더라도 변화가 일어나지 않는다.

text-indent : 들여쓰기

  : 스페이스 두번

Semantic Web

정의

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

why?

인터넷 사용자들은 원하는 정보를 얻기 위해 구글이나 네이버 같은 검색사이트를 이용함.

검색엔진은 로봇(Robot)이라는 프로그램을 이용하여 매일 전세계의 웹사이트 정보를 수집하는데 이를 크롤링이라고 하며 또한 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 만들어두는데 이를 인덱싱이라고 한다.

인덱스를 생성할 때 사용하는 정보는 로봇이 수집한 정보인 웹사이트의 HTML 코드이다. 이 때 검색엔진은 HTML코드만으로 그 의미를 인지하여야하며 이 때 시맨틱 요소(Semantic element)를 해석한다.

<font size="6"><b>Hello</b></font>
<h1>Hello</h1>

위 코드의 결과는 같게 출력된다.
하지만 첫번째 코드는 요소의 의미가 없이 폰트 크기와 볼드체를 지정하는 "메타데이터" 만을 브라우저에게 알린다.
두번째 코드는 h1 즉 header(제목)이라는 의미를 내포하고 있어서 개발자의 의도가 명확히 드러나며 이는 코드의 가독성을 높이고 유지보수를 쉽게할 뿐만 아니라 검색엔진이 보다 효과적으로 크롤링과 인덱싱을 할 수 있도록 돕는다.

non-semantic 요소 & semantic 요소

  • non-semantic : div, span 등

  • semantic 요소 : form, table, img 등(컨텐츠의 의미를 명확히 설명)

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

응용 질문!!

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

대답) 시맨틱 태그란 포함하고 있는 컨텐츠에 의미를 부여하는 역할을 합니다. 예를 들어 단순히 non-semantic tag인 div에 제목이란 컨텐츠가 담겨 출력되는 것과 semantic tag인 header tag에 제목이란 컨텐츠가 담겨 출력되는 것은 웹페이지를 보는 사용자에게는 큰 차이가 없지만 예를 들어 검색엔진 등이 크롤링과 인덱싱을 할 때에는 html의 코드를 중점으로 정보를 수집하기 때문에 컨텐츠의 의미를 명확하게 알려주는 시맨틱 태그의 효용성이 증폭됩니다.

(시각장애인을 위한 웹페이지에도 관련이 있지 않을까 생각해보자)

profile
주먹구구식은 버리고 Why & How를 고민하며 프로그래밍 하는 개발자가 되자!

0개의 댓글