[HTML5] 시멘틱 웹이란?

HTML5로 넘어오면서 시멘틱 태그가 생겼습니다!

그래서 HTML5 웹 페이지를 시멘틱 웹이라고도 말합니다. 

 

Semantic = 의미론적인 이라는 뜻입니다.

 

우리는 웹 페이지의 구조를 봤을 때 쉽게 구조를 파악할 수 있습니다.

위 유튜브의 웹 페이지를 봐도 어디서 검색을 할지, 어디를 클릭하면 어떤 행위를 할 수 있을 지, 어디서 스크롤이 가능할 지 등등

다양한 상황에 대해 쉽게 파악할 수 있습니다.

 

그러나 컴퓨터한테는 쉽지 않습니다. 검색 엔진에서는 어떠한 태그가 어떤 기능을 수행하는 지 알 수 없고,

이로인해 웹 페이지에서 효율적인 데이터를 추출하는 데 한계가 있습니다. 

이를 해결하기 위해 만들어진 게 시멘틱 태그입니다. 

 

수 많은 시멘틱 태그들이 있지만, 주요 태그들을 확인해봅시다.

Sementic Tag	Intro
<header>	웹 페이지의 헤더
<nav>	내비게이션
<aside>	웹 페이지의 사이드에 위치
<section>	중심 내용을 포함하는 공간
<article>	많은 글자가 들어가는 부분
<footer>	웹 페이지의 푸터
<details>	사용자가 보거나 숨길 수 있는 세부 콘텐츠
<summary>	<details> 내부 콘텐츠를 담는 태그
<figure>	다이어그램, 사진 등 자체 콘텐츠 지정
<figcaption>	<figure>태그로 정의한 콘텐츠의 제목 및 설명 작성
<main>	페이지의 가장 중요한 부분 지정

 

HTML5 이전엔 시멘틱 태그를 지원하지 않아 아래 예시처럼 div를 통해 해당 구조를 짰습니다.

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

<div id="nav"></div>

<div id="aside"></div>

...

 

HTML5 부터는 시멘틱 태그를 지원하므로 아래와 같이 작성할 수 있습니다.

<header></header>

<nav></nav>

<aside><aside>

...

컴퓨터, 개발자 입장에서 더 명확하게 작성할 수 있습니다.

 

물론 <div> 태그와 같이 시맨틱 태그 또한 인라인이 아닌 블록 태그로서 작동됩니다.

 

 

 

시멘틱 태그를 사용하는 이유는 무엇일까?

 

우리가 모두 아는 <h1> 태그에 대해 생각해봅시다.

 

대부분 제목에 쓰이는 태그라는 걸 쉽게 알 수 있습니다.

 

허나 span태그를 이용해 style을 통해 어떤 글자를  h1태그의 크기로 키운다고 생각해봅시다.

 

<h1>이것은 제목<h1>

<span style="font-size: 32px;"> 이것도 제목? </span>

 

우리 눈에서는 똑같이 보일 수 있습니다.

 

허나 컴퓨터에서는 h1이 제목이라 생각하지 아래 span태그를 제목이라 생각하기 어려울 것입니다.

 

시맨틱 태그에 의해 컴퓨터가 HTML요소의 의미를 보다 명확히 해석하고, 그 데이터를 활용할 수 있는 

시멘틱 웹이 실현될 수 있습니다.

 

 

시멘틱 웹이 필요할까?

 

시멘틱 웹이란, 웹에 존재하는 수 많은 웹 페이지들에 메타데이터를 부여해, 데이터에 대해 의미와 관련성을

가지는 거대한 데이터베이스로 구축하고자 하는 발상입니다.

 

즉 구조를 잘 짤수록 검색 엔진에 쉽게 노출될 수 있다는 의미입니다.

여전히 div로 구성한 HTML구조보다는 시멘틱 태그로 구성한 시멘틱 웹이

검색엔진에게 친화적이며, 더 쉽게 노출될 것입니다.