HTML - Semantic Web/Tag

김지현·2021년 5월 24일

background image img semantic semantic tag semantic web web

HTML

목록 보기

1/1

시멘틱 웹이란 무엇인가?



<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>시멘틱 웹이란 무엇인가?</title>
</head>
<body>
    <h1>'의미의','의미론적인'</h1>
</body>
</html>

시멘틱 웹이란, '의미론적인 웹'을 의미한다.

의미론적이라는 말이 몸소 와 닿지 않을 수 있다. 쉬운 예를 들어 보자.

💡 띄어쓰기와 들여 쓰기가 하나도 되어 있지 않은 글을 처음 마주 했을 때 느낌이 어떤가?
우리의 눈은 가독성이 떨어지는 그 글을 이해하기 위해 수도 없이 눈동자를 굴려야 하고, 필요 이상의 에너지를 소비해야 할 것이다.

사람에게 가독성이 부족한 글이 이해하기 힘들듯, 컴퓨터 에게도 명확한 의미가 정립되지 않은 웹은 받아들이기 힘들다. 😅

이해하기 쉬우며 내가 전하고자 하는 바를 명확하게 전달 가능하도록 만들기 위한 용도로 탄생한 것이 바로 시멘틱 웹, 그리고 시멘틱 웹을 구성하는 요소가 바로 시멘틱 태그이다.

시멘틱 웹이 왜 필요한가?

🚀가독성 (Readability)

📚서점에 가서 아무 책이나 집은 뒤 페이지를 한 장 한 장 넘겨 보자.
대부분의 책들이 목차, 서론, 본론, 그리고 마무리 글로 이루어져 어떤 흐름을 가지고 있는 지, 독자들로 하여금 어떤 메세지를 전달하고 싶은 지 명확하게 드러나 있을 것이다.

이런 저런 내용들이 뒤섞여 중구난방인 책을 구매하고 싶은 독자는 없을 것이다. 😂

책에서의 서론, 본론처럼 웹 페이지의 구성 요소를 보기 좋게 나누는 역할을 담당하는 것이 시멘틱 태그이며, 시멘틱 웹은 이러한 다양한 시멘틱 태그로 구성되어 하나의 정보의 집합체로서 기능적 편의를 제공한다.

🚀 웹 접근성 (Web Accessibility)

웹 접근성 측면에서 보아도 시멘틱 웹의 개념은 필수적이다.

웹 사이트는 모든 사람을 위한 콘텐츠 이지만, 모두가 똑 같진 않다. 시각 장애를 가지고 있는 사람들의 경우, 스크린 리더와 같은 기계의 힘을 빌려 웹을 해석한다. 시멘틱 웹은 각기 다른 태그 들의 기능을 통해 중요한 부분은 어떤 것인 지 쉽게 알아차릴 수 있게 하며, 원하는 정보를 보다 더 쉽게 캐치 할 수 있도록 돕는다. 따라서 시각 장애를 가지고 있는 사람들에게 더 친절한 웹으로서 다가갈 수 있다.

보편적인 생각에 그친 웹 사이트가 아니라, 세상 모든 사람들이 편리하게 이용 가능한 웹을 만들기 위해서는 시멘틱 웹을 적극 활용해야 한다고 생각한다.

🚀 검색엔진 최적화 (Search Engine Optimization, SEO)

검색엔진 최적화란, 검색 엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성하여 해당 웹 페이지가 검색 시 상위에 노출 될 수 있도록 하는 작업을 말한다. 따라서 검색엔진 최적화, SEO에 신경 쓰면서 웹 페이지를 제작해야 더 많은 사람들이 페이지를 방문할 수 있을 것이다.

SEO의 핵심에 시멘틱 태그가 존재한다.

❓ div, span 등의 의미 없는 태그로만 이루어진 웹과, 뚜렷한 의미와 기능을 가진 시멘틱 태그를 사용한 웹을 비교했을 때 어떤 웹 사이트가 먼저 사용자에게 노출될까?

✅ 답은 후자이다.

div, span으로만 구성된 웹 사이트는 어떤 부분이 중요한 내용이고, 어떤 부분이 부수적인 내용인지 검색 엔진이 파악할 수 없다. div, span과 같은 태그들은 그저 block level/inline level로 구역을 나누는 역할만 수행할 뿐, 기능적 단위로서 활용할 수는 없다. 따라서 자연스럽게 검색 엔진은 내가 작성한 글이 어떤 메세지를 내포하고 있으며, 어떤 주제를 전하고자 하는 지 단 번에 알아차리기 어렵다.

하지만 시멘틱 태그를 사용한 웹의 경우, 'header' 태그를 사용한 부분은 핵심 내용이며 'aside' 태그를 사용한 부분은 부수적인 내용을 담았구나, 하고 검색 엔진이 알아차릴 수 있다.
더불어 시멘틱 태그는 상위 레벨의 태그이기 때문에, 다시 말해 높은 권한을 가지는 태그이기 때문에 개발자의 의도를 그대로 반영할 수 있으며, 이는 가독성이 좋으며 유지 보수를 용이하게 한다.

의미 있는 시멘틱 태그를 적재적소에 사용하여 만든 시멘틱 웹은 사용자에게도, 검색 엔진에게도, 그리고 제작자 모두에게 편리함을 제공하는 좋은 도구인 셈이다.

Semantic vs Non-semantic


<div class="header">Headline</div>
<header>Headline</header>


<div class="main">Main Contents</div>
<main>Main Contents</main>

위 코드들의 차이점이 무엇일까?

✔️ 우선 첫 번째 코드들을 살펴보면 웹 사이트 문서의 헤드라인을 표시하기 위한 태그임을 알 수 있다. 두 번째 코드들은 해당 페이지에서 가장 주요한 내용에 해당하는 메인 콘텐츠를 담고 있다는 사실을 알 수 있다.

하지만 위 아래 두 코드들은 극명한 차이를 보여 준다.
우리의 눈으로 확인하는 시각적인 요소에는 차이가 없지만, 그 속을 들여다 보면 해당 요소가 가지는 의미가 확연히 달라진다.

div로 감싼 요소는 그저 'Headline', 'Main Contents' 라는 이름을 붙여줬을 뿐, 해당 요소가 내포하는 의미는 없다.

📍 그러나 각각 header와 main으로 감싸준 아래의 요소들은 그 요소가 어떤 역할을 수행하며, 어떤 콘텐츠를 내포하고 있는 지 단 번에 파악할 수 있다.

📌 비단 의미론적 기능 수행'만'을 위해서 이러한 태그를 사용하는 것만은 아니다.
시멘틱 태그를 사용하지 않고 div와 span으로만 구성된 웹은 한 마디로 지저분한 웹 사이트가 될 것이다.

만약 개발 마무리 단계에서 특정 부분을 수정하려고 한다면, 수 많은 div와 span 지옥 속에서 고군분투 해야 할 것이다. 💦

Types of Semantic Tags

🚀 그럼 이제, 시멘틱 태그에는 어떤 것들이 있는 지 알아보자.

Semantic Tags	Description
Header	문서의 머리말을 지정할 때 사용한다. 문서 맨 윗단에 작성한다.
Nav	링크를 내포하는 네비게이션 바를 생성할 때 사용한다.
Section	문서의 섹션을 정의한다. 문서 내에서 article(내용)을 담고 있다.
Aside	페이지의 좌/우 측면부에 위치하며 광고, 보조 이미지 등의 정보를 제공한다.
Article	본문 내용이 들어가는 공간을 지정한다.
Main	본문 중에서도 가장 중요한 부분을 나타낼 때 사용한다.
Footer	문서 최하단부를 담당한다. 주로 저작권 정보, 회사 주소 등을 담고 있다.

✨Today's Checkpoint

img 태그 vs background-image 속성

✔️ 웹 페이지에 이미지를 로드 하는 방법은 두 가지가 있다.

1️⃣ img 태그 이용하기
2️⃣ CSS 속성 - background-image 이용하기

위 두 방식 모두 이미지를 로드 한다는 목적은 같지만, 용도와 기능은 다르다.

🚀 img 태그를 이용하는 방식의 경우, 문서와 직접적인 관련이 있는 이미지를 로드 할 때 사용한다.
쇼핑몰 페이지를 클릭 했을 때 보여지는 수 많은 상품 사진들, 여행사 홈페이지를 클릭 했을 때 보여지는 여행 감성을 자극하는 사진들 모두 해당 웹 페이지를 구성하는 데 있어 반드시 필요한 요소이다.
즉, 웹 페이지의 메인 콘텐츠가 되는 정보와 밀접한 관련이 있는 이미지를 웹 페이지에 표시하기 위해 사용하는 태그이다.

🚀 반면, background-image 속성을 통해 표현하는 이미지는 본문과 밀접한 관련이 있는 것이 아닌, 데코레이션의 용도를 위한 이미지를 로드 한다. 심심한 웹 사이트의 배경에 재미 있는 배경 요소를 통해 꾸며주거나, 혹은 스크롤을 할 때마다 달라지는 배경 이미지 등 재미와 디자인적 요소를 충족시키기 위한 태그이다.

🤔 두 가지 요소들 중 어떤 것을 사용하는 것이 더 바람직할까?

두 요소의 사용 용도가 다르기 때문에 반드시 어떤 태그, 어떤 속성을 사용해야 한다! 라고 명확하게 결론을 내리기는 다소 어렵다. 하지만 권장되는 방식이라고 한다면 img 태그를 사용하는 것이라고 말할 수 있다.

이는 지속적으로 언급한 'Semantic Web'과 밀접한 관련이 있다.

'background-image' 속성을 이용하는 것은 SEO적으로 성능이 좋지 않다. 그 자체로 '이미지를 삽입한다'라는 의미의 기능적 단위가 아닌, CSS와 div 태그를 사용하여 HTML 요소를 꾸며주는, 부수적인 역할을 수행하는 속성 이기 때문이다. 따라서 검색 엔진에 노출되지 않게 되고, 그에 따라 SEO의 기능을 수행하기에는 부적합하다.