Semantic Web & Semantic Tag

지원·2022년 8월 16일
0
post-thumbnail

Semantic web

시맨틱 웹(Semantic Web)은 "의미론적인 웹"이라는 뜻으로, 기계가 이해할 수 있는 형태로 제작된 웹이다.

시맨틱 웹은 기계가 사람을 대신해서 웹 페이지의 정보를 이해하고, 우리에게 필요한 정보만 보여주거나 정보를 가공해서 우리가 필요로 하는 형태로 가공해줄 수 있다.

시멘틱 웹은 기계 뿐만 아니라, 코드를 작성하지 않은 다른 개발자들도, 웹을 이해하는데에 도움이 된다.

점점 방대해지는 정보의 홍수 속에서! 빠른 정보 처리를 위해
semantic web의 중요성은 커지고 있다...


Semantic tag

'이 HTML 엘리먼트가 가진 목적이나 역할은 무엇인가?'를 쉽게 확인 할 수 있는 tag이다.

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

  • 푸터는 일반적으로 페이지 최하단에 위치하며, 작성자, 저작권 정보, 관련 문서 등의 내용을 담는다.
profile
안녕하세요 지원입니다.

0개의 댓글