시맨틱 웹(Semantic Web)은 "의미론적인 웹"이라는 뜻으로, 기계가 이해할 수 있는 형태로 제작된 웹이다.
시맨틱 웹은 기계가 사람을 대신해서 웹 페이지의 정보를 이해하고, 우리에게 필요한 정보만 보여주거나 정보를 가공해서 우리가 필요로 하는 형태로 가공해줄 수 있다.
시멘틱 웹은 기계 뿐만 아니라, 코드를 작성하지 않은 다른 개발자들도, 웹을 이해하는데에 도움이 된다.
점점 방대해지는 정보의 홍수 속에서! 빠른 정보 처리를 위해
semantic web의 중요성은 커지고 있다...
non-semantic tag
div
span
등의 태그들이 해당되며,
해당 내용에 대한 어떠한 설명도 하지 않는다.<div class="header"> page title </div>`
다른 개발자가 코드를 봤을 때, class명을 확인하기 전에는 이
div
가 어떤 역할을 하는지 알 수 없을 뿐더러, 기계는 class명을 확인한다고 한들, 이게 어떤 역할을 하는 구간인 지 알 수가 없다.vs
semantic tag
아주 간단하면서 명확하게 element의 내용을 설명할 수 있다.
<header> page title </header>
semantic tag의 예시들을 보자면,
header
- 머리말(헤더)를 의미.
- 문서의 제목, 로고, 작성자, 작성일과 같은 메타 정보를 배치한다.
nav
- 내비게이터를 의미.
- 페이지 이동 등의 주요 메뉴가 배치된다.
main
<body>
의 주요 콘텐츠를 나타낸다.- 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어 진다.
section
- 본문의 여러 내용(article)을 포함하는 공간.
article
- 본문의 주내용이 들어가는 공간.
form
- 웹 유저들이 내용을 작성하고(input), 제출할 수 있는 양식
<input>
,<textarea>
,<button>
,<select>
,<option>
등의 요소를 하위 요소로 가질 수 있다.
footer
- 푸터는 일반적으로 페이지 최하단에 위치하며, 작성자, 저작권 정보, 관련 문서 등의 내용을 담는다.