xtring.dev

[HTML] 시맨틱 웹(Semantic Web)이란? - HTML의 기본 중 기본 본문

Front-End/HTMLL & CSS

[HTML] 시맨틱 웹(Semantic Web)이란? - HTML의 기본 중 기본

xtring 2021. 1. 29. 12:50

 

 

  이번 포스트에서는 시맨틱 웹에 대해서 설명드리겠습니다. 🤓 제가 갑자기 HTML을 다시 찾아보게 된 이유도 사실 이 때문입니다. Front end 개발자로 1년 넘게 일하면서 HTML을 잘 사용한다고 생각했지만 되돌아보니 막무가내로 바른 div와 none semantic하게 작성한 HTML 문서를 보고 현타가 왔기 때문입니다. 🥲그래서 다시 한번 알아보려고 해요. 부족하거나 틀린 부분에 대해서는 댓글을 달아주세요 .😁

 

 

🧐  시맨틱 웹(Semantic Web) 그게 뭘까요? 

  인터넷의 활성화를 시작으로 웹의 사용은 폭발적으로 늘어났습니다. 그에 따라 웹상에 축적된 정보의 지나친 비대로 인해 많은 문제에 봉착하게 되었습니다. 웹 기술은 축적된 방대한 데이터에 대하여 키워드(keyword)에 의한 정보접근만을 허용하고 있어, 정보 검색 시 무수히 많은 불필요한 정보가 처리되어 정보의 홍수를 가중시켰습니다. 또한 검색 시 컴퓨터가 필요한 정보를 추출, 해석, 가공할 수 있는 방법이 없어, 모든 정보를 사용자가 직접 개입해서 처리해야 하는 문제가 발생했습니다.

 위와 같은 문제로 팀 버너스리의 팀은 웹 기술의 비전으로 시맨틱 웹(Semantic Web)을 제시했습니다.

 

 

 

 

🤔  그렇다면 시맨틱 웹의 목적과 사용 이유가 뭘까요?

 

  시맨틱 웹이 등장한 이유와 같이 웹상의 검색엔진의 최적화를 위해서 입니다. 우리는 현재 구글, 네이버 등과 같은 검색 사이트를 이용합니다. 그리고 이 검색 사이트들은 어떤 웹 사이트를 검색하기 위해 검색엔진을 사용합니다. 우리 개발자들은 프로덕트를 만들게 되면 사용자들의 검색어에 많은 노출을 할 수 있어야 하게 때문에 검색엔진 최적화(SEO: Search Engine Optimization)를 고려해줘야 합니다. 따라서 검색엔진에 잘 노출 되려면 시멘틱 웹을 따라야한다는 뜻이기도 합니다!

 

 

 

 

 

  앞서 설명이 길었네요. 🧐 그렇지만 시맨틱 웹에 대한 더 깊은 이해를 원하신다면 또 다른 레퍼런스를 참조하세요!

poiemaweb.com/html5-semantic-web

 

 

 

 

 

🤓  그렇다면  구체적으로 시맨틱 웹이 뭔지 알아 볼까요?

 

시맨틱 웹은 개발자가 의도한 요소의 의미가 명확히 드러나게 작성하는 방법이자 방식입니다. 이 방법은 코드의 가독성을 높이며 유지보수를 높일 수 있습니다.

 

 

  예를 들어 단순히 제목을

 

<div class="title">합리적인 소비와 함께하는 여행</div>

 

처럼 작성하는 것 보다

 

<h1 class="title">합리적인 소비와 함께하는 여행</div>

 

으로 작성했을 때 태그만 보고도 '이건 제목이구나!'라고 바로 알 수 있습니다. 또한, 검색엔진은 대체로 h1 요소 내의 콘텐츠를 웹문서의 중요한 제목으로 인식하고 인덱스에 포함시킬 확률이 높습니다. 또한 h1 요소 내의 콘텐츠가 제목임을 알 수 있습니다. 이 처럼 의미를 가진 HTML 요소 작성 방식(즉, Semantic Web)은 SEO에 기여할 수 있는 좋은 방법인 거죠!

 

 

  한 문장으로 정리하면

  시맨틱 웹이란 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축하고자 하는 방상입니다.

 

 

 

 

  HTML 요소는 non-semantic 요소semantic 요소로 구분할 수 있습니다.

 

  • none-semantic 요소  div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않습니다.
  • semantic 요소  for, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명합니다.

 

  둘을 분리하고 보니 명확히 Semantic에 대한 이해가 되네요!

 

 

 

  시맨틱 웹을 위한 HTML의 태그를 소개합니다. 현재 2021년에는 자연스럽게 사용하고 있지만, 2014년 HTML5가 출시되며 새로운 시맨틱 태그를 출시 했습니다.

 

  • header  헤더를 의미합니다.
  • nav  네비게이션을 의미합니다.
  • aside  사이드에 위치하는 공간을 의미합니다.
  • section  본문의 여러 내용(article)을 포함하는 공간을 의미한다.
  • article  본문의 주내용이 들어가는 공간을 의미합니다.
  • footer  푸터를 의미합니다.

 

 

  프론트엔드라면 신경써야하는 시멘틱 요소 사용법! 'SEO 그걸 개발자인 우리가 신경써야해?' 라는 생각은 금물이에요. 회사의 비즈니스를 위해 개발단에서 해줄 수 있는 웹 최적화 작업이라고 생각합니다 😎

 

  그렇다면 이제 시멘틱 태그로 HTML을 작성해볼까요? 🧑🏻‍💻

 

 

 

 

 

📗 Ref.

poiemaweb.com/html5-semantic-web

ko.wikipedia.org/wiki/%EC%8B%9C%EB%A7%A8%ED%8B%B1_%EC%9B%B9

반응형
Comments