HTML 시맨틱 웹과 시맨틱 태그에 대한 내용입니다. 😊

📑 시맨틱(Semantic) 개론

HTML 공부를 하다보면, 시맨틱 태그에 대한 내용을 꼭 마주하게 된다. 이전에, HTML 태그를 공부하면서

전부 <div> 로 작성해도 작동이 되는데, 굳이 다른 태그들이 필요한건가?

문득 이런 생각이 들었는데, 역시 이유 없이 존재하는 태그는 없다 이말이다. 매번 이유에 집착하게 만드는 나로써는 시맨틱 웹(Semantic Web)과 시맨틱 태그(Semantic Tag)는 좋은 집착의 대상이 되기에 충분했다. 그렇게 공부할 기회가 생긴다면, 포스팅을 작성하면서 이를 정리하고 싶었는데 오늘이 그 날이다.

사실 지금 당장에 필요한 내용은 아닐 수도 있지만, 시맨틱 태그의 경우 습관을 잘못 들이면, 이를 바꾸는 것이 많이 힘들 것 같다 싶어 기초를 탄탄하게 하자는 취지로 먼저 작성하게 되었다!

우선 시맨틱(Semantic)의 정의는 "의미론적인, 의미의"라는 뜻을 가진다. 해당 정의에서 유추해 볼 수 있는 시맨틱 웹과 시맨틱 태그의 의미는 의미있는 웹, 의미있는 태그 정도일 것이다.

그렇다면 의미있다는 것은 무슨 의미일까? 자 이제 시맨틱 웹과 태그에 대해 Araboza.

🌐 시맨틱 웹(Semantic Web)

웹 기술의 발전은 인터넷을 실생활까지 확산되는 결과를 이뤄냈지만, 축적되는 정보 속에서 불필요한 정보 또한 우후죽순으로 늘어났다. 그리고 그러한 정보들은 정보 검색 시 정보 홍수를 가중시켜, 올바른 데이터를 검색하는데 문제를 발생시켰다.

그런 문제들에 대해 2001년 팀 버너스리 등에 의해 제시된 웹 기술의 비전이 시맨틱 웹(Semantic Web)인 것이다. 시맨틱 웹이란 컴퓨터가 이해할 수 있는 잘 정의된 의미를 기반으로 의미적 상호운용성(semantic interoperability)을 실현하여, 다양한 정보 자원의 처리 자동화, 데이터의 통합 및 재사용 등을 컴퓨터가 스스로 수행하여, 인간과 컴퓨터 모두 잘 이해할 수 있는 웹이다.

간단히 말하자면 검색 과정에서 좀 더 정확한 정보를 가져오는 좋은 웹이라는 것이다!

그렇다면 왜 시맨틱 웹은 검색 과정에서 이점을 가질까? 이에 대한 내용을 검색 엔진 최적화(SEO : Search Engine Optimization)에 대한 개념과 함께 간단히 알아보자

💡 검색 엔진 최적화(SEO)와 시맨틱 웹

검색 엔진 최적화(SEO)란 검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정이라고 정의된다. 웹사이트는 검색 엔진 상단에 노출되는 것이 중요하고, 검색 엔진 최적화의 여부는 이를 결정하는데 그 기준이 될 수 있다는 것이다.

검색 엔진은 로봇(Robot)이라는 프로그램을 통헤 크롤링을 진행하여 다수의 웹사이트 정보를 수집하고, 수집한 데이터를 키워드 색인을 통해 가공하여 사용한다. 이 과정에서 컴퓨터는 어떠한 데이터가 강조된 데이터 인지 구분하지 못한다. 그렇기에, 컴퓨터 입장에서 시맨틱 웹은 보다 명확히 데이터를 전달하는 친절한 웹인 것이다.

명확한 의미 인지는, 웹을 더 의미있는 데이터를 포함한 웹으로 만들고, 이는 검색 엔진 최적화의 측면에서도 효율적이다.

HTML으로 작성된 문서는, 메타데이터와 자연어가 뒤섞여 있고 이에 대해 개발자의 의도가 명확히 전달되면서 작성된 웹이 시맨틱 웹이라고 할 수 있다.

🔗 시맨틱 태그(Semantic Tag)

그렇기 때문에, 우리는 <div>를 남발하지 않고, 명확한 의미를 부여하는 시맨틱 태-그에 대해 인지하고 적재적소에 사용해야 하는 것이다.

그렇다면, "나는 검색 엔진 상단에 위치할 필요 없으니깐, <div> 로 도배하고 작동만 하게 할래요 🤪" 라고 생각할 수도 있으시겠다.

하지만, 시맨틱 태그는 단순히 웹 검색 엔진 상단에 위치하기 위해서만 사용하는 것이 아니다.

시맨틱 태그(semantic tag)란 개발자와 브라우저 모두에게 의미를 주는 태그라고 할 수 있다. 시맨틱 태그가 존재하듯이 논 시맨틱 태그(non-semantic tag) 또한 존재한다. 대표적으로 우리가 밥먹듯이 사용하는 <div>가 이에 해당한다.

• 시맨틱 태그(semantic tag) : <table>, <article> 등
• 논 시맨틱 태그(non-semantic tag) : <div>, <span> 등

시맨틱 태그의 경우, content 에 대한 설명을 명확히 포함하지만, 반대의 경우에는 이를 포함하지 않는 태그라고 할 수 있다.

시맨틱 태그의 이유

시맨틱 태그의 사용을 비유하자면, 물을 마시는 행위를 냄비나 그릇을 사용하여 할 수 있지만, 컵을 이용하여 마시는 것이 적절한 것과 비슷하다.

이를 간단한 예시와 함께 알아보자.

<!-- in HTML -->
<em>Hello</em>
<i>Hello</i>
<!-- 텍스트가 기울어지는 결과를 똑같이 출력 -->

위 두 줄의 코드는 똑같이 Hello 라는 텍스트가 기울어진 형태로 출력된다. 출력 결과에 대해서 사람들은 같은 내용이라고 인식하겠지만, 컴퓨터의 경우에는 이를 다르게 인식한다.

앞의 <em> 태그는 강조된 텍스트(emphasized text)를 의미하며 태그 안의 content 를 강조하는 의미를 갖고, 이어지는 <i> 태그의 경우에는 단순히 텍스트를 기울임꼴로 표시하는 기능을 가진 태그이다.

만약, 내가 content 를 강조하고자 하는 목적으로 태그를 사용한다면 화면 상으로 같은 결과를 보이지만, 브라우저에게 명확히 이를 강조하겠다고 의미를 부여하는 <em> 태그를 사용함이 효과적일 것이다.

이렇게, 브라우저로 하여금 의미있는 데이터를 제공받게 되면, 웹 접근성(Web Accessibility) 측면에서도 다른 일반 웹들과 비교하여 우위를 갖게 된다.

브라우저는 의미있는 데이터를 받을 때, 이를 가공하고 전달하는 과정에서 좀 더 효율적인 결과물을 만들어 낼 수 있기에 시맨틱 태그는 이러한 측면에서도 중요성을 알 수 있다.

💡 웹 접근성(Web Accessibility)

웹 접근성의 정의는 신체 및 정신적 장애의 유무와 관계 없이 모든 사람들이 웹사이트를 이용할 수 있는 것을 말한다.

장애라는 요소를 특정 짓긴 했지만, 웹 접근성은 장애를 갖지 않은 사람에게도 이점이 있다.

예를 들어, 팔이 부러지거나 안경을 잃어버리는 등의 과정에서 "일시적 장애"를 겪는 사람들에게나, 밝은 햇빛, 시끄러운 소리 등의 환경적 요소로 인해 상황적 제약을 겪는 사람 등이 이에 해당할 수 있다.

마지막으로, 코드를 작성하는 우리를 위한 것이기도 하다.

만약, 모든 코드가 <div> 태그로 구성되어 있다면, 작동은 원활히 하겠지만, 직접 보기에 직관적으로 이해되는 느낌이 있다면 그건 아마 시맨틱 태그로 작성된 부분일 것이다.

<div> 태그로 작성할 경우 이를 id 로 구분하거나 class 명을 통해 구분하는데, 코드 작성 길이가 길어질 수록 불편함에 대한 체감이 더 커진다고 한다.

협업의 측면에서도 서로가 이해하기 쉬운 코드를 작성하는 것은 중요한 부분일 것이고, 유지 및 보수에 용이하고, 가독성이 높은 코드를 작성하고 싶다면 시맨틱 태그로 코드를 작성하도록 하자! 😊

그렇게 시맨틱 태그로 작성해야 하는 이유를 정리하면 다음과 같다.

• 검색 엔진 최적화(SEO : Search Engine Optimization)
• 웹 접근성(Web Accessibility)
• 유지 보수 및 가독성

SEO와 시맨틱 태그의 연관성을 확인하기 위해 작성하신 seongkyun님의 포스트를 보면, 시맨틱 태그가 웹에 어떤 영향을 주는 지에 대해 조금 더 체감 될 것이다.

지금까지 시맨틱 웹과 태그에 대해 간단히 알아봤으니, 이제 그 예시에 대해 간단히 알아보자.

시맨틱 태그들

위 다이어그램을 보면, <div> 태그 만을 사용한 코드와 시맨틱 태그를 사용한 코드가 직관적으로 어떻게 차이가 나는지 인지할 수 있다.

각 요소를 최상단부터 해당 다이어그램에 존재하지 않는 시맨틱 태그까지 정리해보도록 하자.

header and nav

header 는 대체로 웹페이지 상단 정보 영역을 의미하고, nav 태그 는 페이지의 네비게이션 영역을 지정한다. 네비게이션 영역에 자주 쓰이는 예제로 메뉴, 목차, 색인 등이 이에 해당한다.

main

main 은 위에서 언급한 header 영역과 구분되어, HTML 문서 body 영역의 주요 컨텐츠나 핵심적인 내용을 포함하는 영역이다.

이어서 설명할 article 이나, section 등의 영역이 포함되기도 하는 영역이다.

article and section

article 은 신문 기사 하나와 같이 독립적인 콘텐츠 영역을 의미하며, 예시로 게시판과 블로그 글, 매거진이나 뉴스 기사 등이 이에 해당한다.

section 은 본문 영역의 연관성 있는 여러 영역들을 감싸는 용도로 사용 가능하다. 일반적인 섹션을 정의할 때 사용하고 주로 제목 요소(h1 ~ h6)를 포함하는 경우가 많다.

위 예시처럼 article 영역의 주황색 부분이 section 이 되어 구성될 수도 있고, 반대로 section 이 article 영역을 감쌀 수도 있다.

💡 <article> vs <section>

article 에 대해 자세히 설명하자면, 다른 페이지에서 보여져도 이해하는데 문제 없고, main 안의 다른 정보들 필요 없이 고유하게 독립적인 정보를 나타낼 수 있는 부분을 article 로 지정한다.

콘텐츠가 사이트에 포함된 독립적인 섹션의 성향이 크다면, section 대신 article 을 사용 함이 맞다.

aside

aside 는 문서 주요 내용과 직접적인 관련은 없지만, 부가적인 정보나 주 내용과 간접적으로 연관된 부분을 나타낸다. 주로 사이드바 혹은 콜아웃 박스 등으로 나타난다.

figure and figcaption

<!-- figure & figcaption structure -->
<figure>
    <img>
    <figcaption></figcaption>
</figure>

figure 은 이미지나 비디오, 코드 등과 같은 자료를 포함할 수 있는 영역이다. figcaption 은 부모 figure 태그에 포함된 자료의 설명이나 범례 등에 해당하며, figure 태그 안에 포함된다.

ul & ol & dl

<!-- ul & ol & dl structure -->

<ul> <!-- or ol -->
  <li>item1</li>
  <li>item2</li>
</ul>

<dl>
  <dt>description term</dt>
  <dd>description detail</dd>
</dl>

ul 의 경우 순서가 없는 리스트(Unordered list)를 나열할 때 사용하고, ol 의 경우 순서가 있는 리스트(Ordered list)를 나열할 때 사용하며, 두 태그 모두 li 를 사용하여 목록 요소들을 표현한다.

dl 은 설명 목록(description list)을 나타낼 때 사용하며, dt 로 설명할 단어(description term)를 표현하고, dd 에 설명 내용(description detail)을 작성한다.

button and a

button 은 클릭 가능한 버튼 요소를 의미하고, a 는 href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치로 이동할 수 있는 하이퍼링크를 만든다.

💡 button vs a

button 과 a 는 CSS로 똑같이 이를 꾸몄을 때, 같은 외형을 갖지만 용도를 다르게 해야 한다.

우선 button 의 경우에는 눌렀을 때 특정한 행동이 실행되는 경우에 사용한다. 예를 들어, 로그인 버튼이나 가입 등과 같은 기능이 이에 해당한다.

a 의 경우에는 위에서 언급한 하이퍼링크에 대한 내용과 같이 특정 링크로 이동하고자 할 때에 사용하는 것이 효과적이다.

footer

footer 는 주로 웹페이지 하단에 해당하는 영역으로, 일반적으로 작성자, 관련 문서, 저작권 정보 등의 내용이 포함된다.

이외에도 많은 시맨틱 태그가 있기에 차차 사용해보면서 추가로 정리할 예정 😊

🔖 출처

시맨틱 태그 : bining님 벨로그 : [html] 시맨틱 태그(sementic tag)
시맨틱 태그 : Codesigner's Dev Story : Semantic HTML(시맨틱 HTML) 이란?

🔖 전체적인 참고

각각의 시맨틱 태그 : MDN Web Docs