Semantic Web

• 예전에는 사람이 직접 눈으로 보고 자료를 이해하는 구조였다, 인터넷이 보편화되면서 방대한 양의 정보를 사람이 직접 다 찾는데에 한계가 생겼다.
• 그래서 발전된것이, HTML5로 넘어오면서 컴퓨터도 자료를 이해하고 소통 가능할 수 있게 한 것이다.
• 즉, 컴퓨터도 이해할 수 있는 형태의 웹으로 발전되었다.

Semantic Tag

• 그래서, 컴퓨터가 쉽게 정보를 이해하기 위한 태그들이 사용되는데
• 기존에는 의미가 명확하지 않는 태그들이 사용되었다면, HTML5으로 넘어오면서 <meta>태그를 사용하게 된다.

예시 <div> vs <header>

쉽게 예를 들어보자,

1. <div>나는 그냥 글이디</div>

2. <header>나는 그냥 글이다</header>

이 둘을 중에서 컴퓨터가 소통하기 쉬운 방식,
검색엔진에 노출되기 쉬운 방식은? 2번이다.

예시 <div> vs <img>

또다른 예로,

1. <div>태그 속성의 background-image

2. <img>태그

• 웹페이지에 표출되는 모습은 동일하다. 다만, <img>를 사용하면 지금 내가 제공하는 정보가 이미지라는 것을 비교적 정확하게 알려줄 수 있다.
• 그래서 해당 이미지에 대한 정보를 담은 웹페이지 또는 검색엔진에 해당 이미지를 보여주길 원한다면 <img>태그를 사용하는 것이 좋다. <div>태그에 background-image 속성을 다는게 좋다.

Semantic Tag vs Non-semantic Tag

• Semantic Tag는 <header>, <aside>, <section> 등의 태그들로 content의 의미를 명확하게 담고 있다.
• 반면, Non-Semantic Tag는 <div>, <span>과 같은 태그는 구체적인 설명이 없다.