시맨틱 마크업, 사용 이유와 시맨틱 태그 종류

HTML에 대해서 알게 되었다면 꼭 듣는, 보는 말이 있습니다. HTML을 구성할 때는 시맨틱 태그를 사용하여 시맨틱 마크업을 해야 한다는 것입니다.

 

여기서 시맨틱 마크업은 무엇인지, 어떤 태그들이 있는지 알아보겠습니다.

 

 

시맨틱 마크업(Semantic Markup)

우선 시맨틱(Semantic)은 “의미의” 또는 “의미론적인”이라는 사전적 정의를 가지고 있습니다. 이렇게 사전적 의미만 본다면 시맨틱 마크업은 의미론적인 마크업이라고 할 수 있습니다.

시맨틱 마크업을 위해서는 시맨틱 태그를 사용하여 HTML을 구성하면 됩니다. 그렇다면 여기서 시맨틱 태그는 의미론적인 태그일 것입니다. HTML 구조를 구성할 때 의미가 적합한 태그를 사용하여 적합한 구조로 마크업하는 것입니다.

 

시맨틱 태그를 사용하여 시맨틱 마크업을 해야 하는 이유

이 글을 시작할 때 궁금했던 왜 HTML을 구성할 때 시맨틱 태그를 사용하여 시맨틱 마크업을 해야 하는지 알아봅시다.

 

1.모든 사람이 정보를 전달받기 위해

HTML 문서를 웹 브라우저에서 보기 위해서 시각적인 요소들을 사용하여 웹사이트 이용자들에게 정보가 전달됩니다. 이러한 정보들은 웹사이트를 보는 모든 사람들에게 전달이 되어야 하는데 이를 위해서는 HTML을 구성할 떄 시맨틱 태그를 사용해야 한다는 것입니다. 시맨틱 태그를 사용하여 시맨틱 마크업을 한다면 시각장애인 또한 음성을 통해서 웹사이트의 콘텐츠 정보를 전달받을 수 있습니다.

2.검색엔진최적화를 위해

HTML에서 어떤 태그를 사용하느냐에 따라 구글이나 네이버 등과 같은 검색 엔진에서 웹사이트의 중요한 키워드를 보여질 수 있습니다. 즉, 검색엔진최적화(Search Engine Optimization, SEO)에 유리합니다.

3.코드를 쉽게 읽기 위해

HTML을 작성한 사람이 다시 작성된 문서를 읽거나 다른 사람이 읽을 때 의미가 없는 태그인 <div>로만 구성이 되어 있다면 태그마다 어떤 역할인지 쉽게 파악하기 어렵습니다. 또한 태그 내에 들어갈 데이터가 어떤 유형인지도 더 빨리 파악하기 위해서 시맨틱 태그를 사용하는 것이 좋습니다.

 

시맨틱 구조(Semantic Elements)

그럼 이제 처음 웹사이트를 구성할 때 어떤 태그를 사용하여 시맨틱 구조를 잡는 것이 좋은지 알아봅시다.

문서의 큰 구조를 잡는 태그들입니다.

 

<header> 태그는 가장 상단에 위치할 수 있는 태그이며, 어떤 웹사이트인지 소개하거나 알기 쉽게 도움을 주는 태그입니다. 이 태그 내에는 웹사이트의 로고나 제목를 넣어 웹사이트의 첫 이미지를 보여주고 검색창을 넣어 이용자가 손쉽게 검색할 수 있습니다.

<nav>태그는 웹사이트의 현재 페이지 내에서 보고 싶은 부분으로 이동하거나 현재 페이지에서 다른 페이지로 이동하기 위해 사용합니다. 이 태그를 사용하여 웹사이트의 메뉴를 구성할 수 있습니다.

<main> 태그는 웹사이트의 주요 콘텐츠를 보여주는 태그입니다. 이 태그는 하나의 문서에 하나만 사용할 수 있고, 하나 이상 사용해서는 안됩니다. 대신 hidden이라는 속성을 사용한다면 가능합니다. 여기서 hidden 속성을 설정한 요소들은 브라우저에서 렌더링하지 않아 보이지 않습니다.

<article> 태그는 하나의 문서에서 여러 개 사용할 있고, 문서 내에서 자유롭게 구분하고 배치하여 콘텐츠를 보이는데 사용할 수 있습니다. 보통 지금처럼 한 장의 블로그 글이나 게시판 등에서 사용할 수 있습니다. 만약 여러 개의 블로그의 글을 한 페이지에서 다 볼 수 있는 블로그 형식이라면 한 문서에 여러 개의 <article>태그를 사용할 수 있습니다.

<section> 태그는 문서 요약이나 <article> 태그 내에서 구역을 나누어야 할 때 사용할 수 있는 태그입니다. <section> 태그는 단순히 꾸밀 목적으로 사용하지 않는 것이 좋으며, 이럴때는 아무 의미가 없는 태그인 <div> 태그를 사용하는 것이 좋습니다. 이렇게 본다면 <article> 태그와 어떻게 구분해서 사용해야 할지 고민일 것입니다. 만약 어떤 요소의 콘텐츠를 다른 것들과 구분짓고 싶다면 <article> 태그를 사용하여 구분하고 그 <article> 태그 내에 <section> 태그를 사용하는 것이 좋을 것 같다고 생각합니다.

<footer> 태그는 <header>와 반대로 가장 하단에 위치하는 태그입니다. <footer> 태그에는 웹사이트의 정보나 저작권 정보 등의 내용을 포함하여 만들 수 있습니다. 보통 <nav> 태그에 포함시키지 않는 링크들도 포함할 수 있어 사이트맵같은 요소를 포함시키기도 합니다.

 

 

W3C에서 권장하는 태그 사용법이 있으니 검색엔진최적화나 모든 사람들이 웹사이트를 사용하기 쉬울 수 있게 적절한 태그를 사용하시길 바랍니다.

또한 이 글에서 소개하는 태그 이외에도 정말 많은 태그들이 있으니 W3C를 보고 필요한 태그들을 찾아 사용합시다.