[HTML] 시맨틱 웹(Sementic Web) / 시맨틱 태그(Sementic tag)

 

 

오늘은 시맨틱 웹(Sementic Web)과 시맨틱 태그(Sementic tag)에 대해 알아보자 

 

 

 

[ 시멘틱 웹 ]

시멘틱 웹이란? 

시멘틱 웹은 '의미론적인 웹'이라는 뜻으로, 현재의 인터넷과 같은 분산 환경에서 리소스(웹 문서, 각종 파일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임 워크이자 기술이다.

 

 

[ HTML5에서의 시맨틱 웹 ]

 

HTML5에서는 시맨틱 웹을 쉽게 구성할 수 있도록 만들어주는 요소들이 추가되었다. 

 

예를 들어 기존에는 

 

<div id="header"> 내용 </div>

로만 나타낼 수 있던 머리 부분을 

 

<header> 내용 </header>

로 쉽게 더 의미론 적으로 나타낼 수 있게 되었다. 

이는 div와 id = header 모두 읽었던 예전 XHTML이나 HTML4보다 훨씬 효율적이라 할 수 있다. 

 

 

[ 검색엔진에 노출되는 방법 ] 

 

SEO (검색엔진 최적화: Seacrch Engine Optimization) 같은 마케팅 도구를 사용하여 검색엔진이 본인의 웹사이트를 검색하기 알맞은 구조로 웹사이트를 조정하기도 하는데, 이것은 기본적으로 검색엔진이 웹사이트 정보를 어떻게 수집하는지 아는 것으로부터 시작된다. 

 

 

검색엔진은 로봇(Robot)이라는 프로그램을 이용해 매일 전 세계의 웹사이트 정보를 수집한다. (이것을 크롤링이라 하며 검색엔진의 크롤러가 이를 수행한다.) 그리고 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)를 만들어둔다. (이것을 인덱싱이라 하며 검색엔진의 인덱서가 이를 수행한다.)

 

 

인덱스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보인데 이것이 웹사이트의 HTML 코드이다. 

즉, 검색 엔진은 HTML 코드 만으로 그 의미를 인지하여야 하는데 이때 시맨틱 요소를 해석하는 것이다. 

 

 

[ 시맨틱 웹의 중요성 ]

 

다음 예시를 살펴보자 

 

<font size="6"><b>My Website</b></font>

<h1>>My Website</h1>

 

 

HTML으로 작성된 문서는 컴퓨터가 해석할 수 있는 메타데이터와 사람이 사용하는 자연어 문장이 뒤섞여 있다.

 

 

※ 메타데이터란?

메타데이터(metadata)는 데이터(data)에 대한 데이터이다. 

좀 더 자세히 말하자면, '어떤 목적을 가지고 만들어진 데이터 (Constructed data with a purpose)'라고도 정의한다.

 

 

위의 예시는 1행과 2행은 브라우저에서 동일한 외형을 갖는다. 

 

 

그러나, 1행의 요소는 의미론적으로 어떤 의미도 가지고 있지 않다. 즉, 의도가 명확하지 않다. 

개발자가 의도한 요소의 의미를 명확하게 나타내지 않고 폰트 크기와 볼드체를 지정하는 메타데이터만을 브라우저에게 알리고 있다. 반면, 2행의 요소는 header(제목)중 가장 상위 레벨이라는 의미를 내포하고 있어서 개발자가 의도한 요소의 의미가 명확히 드러나고 있다. 

 

 

이것은 코드의 가독성을 높이고 유지보수를 쉽게한다.

 

 

검색엔진은 대체로 h1 요소 내의 콘텐츠를 웹문서의 중요한 제목으로 인식하고 인덱스에 포함시킬 확률이 높다. 

또한, 시각적으로 봤을 때 사람도 h1 요소 내의 콘텐츠가 제목임을 인식할 수 있다. 

시멘틱 요소로 인해 이로 구성되어 있는 웹페이지는 검색엔진에 보다 의미론적으로 문서 정보를 전달할 수 있고, 검색엔진 또한 시맨틱 요소를 이용하여 보다 효과적인 크롤링과 인덱싱이 가능해졌다. 

 

 

즉, 시멘틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다.

 

 

[ 시맨틱 태그 ]

 

시맨틱 웹에서 쓰는 시맨틱 태그는 Semantic의 '의미론적인'이라는 뜻을 가진 형용사의 뜻을 따라, 의미가 있는 태그를 말한다.

 

 

 

[ 시맨틱 태그의 장점 ]

 

1. 검색엔진 최적화(SEO) : 검색 엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단하기 때문에, 의미에 맞는 올바른 태그를 사용하면 페이지 탐색에 있어 도움이 된다. 

 

2. 시각 장애가 있는 사용자가 스크린 리더를 사용하여 페이지를 탐색할 때 도움이 된다. 

 

3. 개발자의 명확한 의미를 전달할 수 있다. 

 

 

 

[ non-semantic / semantic ] 

 

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

 

• non-semantic 요소 div, span 등이 있으며 이들 태그는 content에 대한 어떤 설명도 하지 않는다.

 

• semantic 요소 form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명한다. 

 

 

다음은 HTML5에서 새롭게 추가된 시맨틱 태그이다. 

 

tag	Description
header	header를 의미한다.
nav	내비게이션을 의미한다.
aside	사이드에 위치하는 공간을 의미한다.
section	본문의 여러 내용(article)을 포함하는 공간을 의미한다.
article	본문의 주 내용이 들어가는 공간을 의미한다.
fotter	footer를 의미한다.

 

※ header (블록 요소)

 

• <header> 태그는 사이트의 소개 및 메뉴 그룹을 나타내는 섹션을 설정한다.
• <header> 태그에는 제목, 로고, 검색, 아이콘, 저자 정보 등을 포함할 수 있다.
• <header> 태그는 섹션 요소이기 때문에 제목 태그를 포함하여야 하지만 필수사항은 아니다. 

 

※ nav (블록 요소)

 

• <nav> 태그는 내부 페이지 및 외부 페이지에 대한 탐색 링크를 제공하는 페이지 섹션을 설정한다.
• <nav> 태그는 사이트의 주요 메뉴 및 목차 등을 표현한다.
• 사이트의 모든 링크가 <nav> 태그에 포함될 수 없지만, 핵심 탐색 링크에는 <nav> 태그를 사용한다.
• <nav> 태그가 웹 문서에 여러 개 사용된 경우에는 접근성을 높이기 위해 aria-lavelledby 속성을 사용할 수 있다.
• 일반적으로 <footer> 영역에 사이트 링크는 <nav> 태그를 사용하지 않는다.

 

※ aside (블록 요소)

 

• <aside> 태그는 주요 콘텐츠의 보조적 콘텐츠 섹션을 설정한다
• <aside> 태그는 웹 페이지의 메인 콘텐츠와 관련된 사이드의 정보, 광고 등 부분적인 정보를 나타낼 때 사용한다.

 

※ section (블록 요소)

 

• <section> 태그는 주제별 그룹의 콘텐츠 섹션을 정의한다.
• <section> 태그는 탭 페이지, 홈페이지의 소개, 연락처, 뉴스항목 등과 같이 주제별로 분류할 수 있다.
• <section> 태그에는 제목을 나타내는 <h1> ~ <h6> 태그가 포함되어야 한다. 
• <section> 태그는 문장이나 문서의 스타일링 요소가 아니다. 스크립트의 편의나 영역을 위함이라면 <div> 태그가 더 좋다.
• <section> 태그가 일반적인 영역의 주제가 아니라면, 구체적인 요소 (<article>, <aside>, <nav>)를 대신 사용하는 것이 더 적절하다.

 

※ article (블록 요소)

 

• <article> 태그는 사이트의 독립적인 콘텐츠 섹션을 설정한다.
• <article> 태그는 포럼, 신문기사, 잡지, 블로그 항목, 게시판 글 등 콘텐츠의 독립적인 항목을 나타낸다.
• <article> 태그는 독립적인 콘텐츠의 내용이 명시적으로 나열되고, 각각의 콘텐츠에는 제목(<h1>~<h6>)이 표시되어야 한다. 
• <section>은 하나의 주제를 나타낸다면, <article>은 주제를 묶는 독립적인 콘텐츠를 나타낸다.
• <section> 요소 안에 <article> 요소를 쓸 수 있으며, <article> 요소 안에도 <section> 요소를 쓸 수 있다. 

 

※ footer (블록 요소)

 

• <footer> 태그는 사이트 관련 정보 및 관련 링크 콘텐츠 섹션을 설정한다.
• <footer> 태그는 사이트와 관련된 정보, 저작권, 연락처, 사이트 맵, 관련된 문서 링크를 제공한다.
• <footer> 태그에는 연락처 정보를 설정하는 <address> 태그가 포함될 수 있다.
• <footer> 태그는 화면 판독기에 의해 "콘텐츠 정보"라고 표현되지 않기 때문에 footer 요소에는 role="contentinfo" 속성을 추가해 주는 게 좋다.

 

ref: https://webzz.tistory.com/category/HTML

@web's Reference

 

 

 

 

HTML Semantic element

 

ref: https://poiemaweb.com/html5-semantic-web

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

      https://ko.wikipedia.org/wiki/%EB%A9%94%ED%83%80%EB%8D%B0%EC%9D%B4%ED%84%B0