TIL 79 | Semantic Web & Semantic Tag

YB.J·2021년 10월 6일
0

HTML/CSS

목록 보기
15/16
post-thumbnail

Semantic Web과 Semantic Tag에 대해 알아보자

Semantic Web 탄생배경❗

  • 웹 기술이 발전하고 인터넷이 보급되면서 무분별하게 많은 정보들이 축적되자, 컴퓨터가 정보를 해석하고 가공할 수 없는 상태가 되었다.
  • 모든 정보를 사용자가 직접 정보를 처리해야 되는 불편함이 생긴 것이다.
  • 이러한 문제를 해결하고자, 기계가 읽고 처리할 수 있도록 개발한 웹이 Semantic Web이다.

일반 웹은 컴퓨터가 정보를 알지 못하지만 semantic 웹은 컴퓨터가 정보를 알 수 있다

Semantic Tag란❓

  • 시맨틱 태그(Semantic Tag)에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고, 데이터를 활용할 수 있는 시맨틱 웹(Semantic Web)을 실현할 수 있다.
  • 의미가 없는 태그를 무분별하게 사용하는 것이 정보의 혼란을 야기하기 때문에, HTML4에서 HTML5로 넘어가면서 의미있는 태그들을 개발하기 시작했다.
  • 즉, 시맨틱 태그(Semantic Tag)란 의미있는 태그이다. 브라우저, 컴퓨터, 검색엔진 등 콘텐츠의 의미를 명확히 설명하는 역할을 하며, 시맨틱 웹(Semantic Web)을 구축하여 컴퓨터는 정보를 좀 더 효율적으로 받아 올 수 있고, Tag의 의미를 통해 더욱 정확하게 정보를 제공한다.

Semantic Tag 종류와 의미❗

  • form, table, img_** 등 content의 의미를 명확하게 설명하는 태그이다.
  • HTML5에 들어서면서
  • <article> : 그 자체로 의미가 있는 웹사이트의 부분, 게시물, 잡지 또는 신문 기사, 블로그 작성글, 제품 카드, 댓글, 대화형 위젯 등.
  • <aside> : 간접적으로 문서와 관련된 내용을 나타냄. 사이드바 또는 콜아웃 상자로 사용됨.
  • <footer> : 일반적으로 섹션의 작성자에 대한 정보, 저작권 데이터 또는 관련 문서에 대한 링크를 나타냄.
  • <header> : 페이지의 제목과 같은 소개 내용을 포함.
  • <main>: 지배적인 콘텐츠 영역을 나타내는 태그.
  • <nav> : 메뉴, 목차 등에 사용.
  • <section> : 구체적인 시맨틱 태그가 없는 문서의 독립적인 영역을 나타냄. 섹션에는 소수의 예외를 제외하고 일반적으로 제목이 있다.

Semantic Tag 장점❗

  • 검색엔진최적화(SEO) : 검색엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단한다. 따라서 시맨틱 태그를 사용한 코드 블록을 찾는 것은 끝없는 div(div > div > div ...)를 탐색하는 것보다 훨씬 쉽다.

  • W3C에 따르면 "시맨틱 웹을 사용하면 애플리케이션, 기업 및 커뮤니티에서 데이터를 공유하고 재사용할 수 있다"고 한다. 한 마디로 코드 가독성과 품질이 올라간다는 뜻.

Semantic Tag 사용 유의사항❗

  • 사용할 태그의 의미가 무엇인가? : 사용할 HTML은 태그는 데이터를 기반으로 결정되어야 한다.
profile
♪(^∇^*) 워-후!!(^∀^*)ノシ

0개의 댓글