Semantic Web 이란 ?
The term "Semantic Web" refers to W3C's vision of the Web of linked data. Semantic Web technologies enable people to create data stores on the the Web, build vocabulary, and write rules for handling data. (www.w3.org)
쉽게 말하자면 Semantic Web은 의미를 가지는 웹이다.
사람의 개입 없이, 컴퓨터가 직접 정보를 읽고, 해석하고 관련된 정보를 수집하여 웹에 보여줄 수 있는 지능형 웹이다.
프론트앤드 개발자가 만족스러운 시맨틱 웹을 구현하기 위해 정보의 의미와 걸맞는 Semantic Element을 사용해야 한다.
Semantic Elements/Tags
의미를 가지는 HTML 요소
태그가 의미를 가지면 검색엔진의 웹크롤러에게 사이트에 대한 정보를 비교적 정확히 제공할 수 있게 된다.
1. Semantic elements vs. Non-semantic elements
- non-semantic : <div>, <span>
- semantic : <section>, <img>, <table>, <button>
Non-semantic 태그는 콘텐츠 대해 아무런 의미를 제공하지 않는 반면 semantic 태그는 콘텐츠에 대한 명확한 설명을 해준다.
2. HTML5에 등장한 새로운 Semantic elements
<header>, <nav>, <section>, <article>, <aside>, <footer>, <main> 등 등장했다.
3. Non-semantic, Semantic 태그의 차이점
사이트에 이미지를 넣는 방법은 두 가지가 있다. <img> 태그를 사용하는 것과 <div> 태그에 background-image 속성을 추가하는 것.
<img>
- 사용자 검색어에 노출되어 사용자가 내 이미지를 쉽게 찾을 수 있게 된다.
- <img>의 속성 중 alt 를 사용하게 되면 이미지와 관련된 문자열을 넣을 수 있다.
<div> 와 background-image
- 말 그대로 배경 그림일 뿐, 그 어떤 의미도 담고 있지 않다.
