[HTML] Semantic Web, Semantic Tag

🤔 서론

위코드 사전스터디 과제를 진행하며 Semantic Tag에 대해 아래와 같이 간단히 정리한 적이 있다.

이에 더하여, 의미론적인 웹페이지(Semantic Web)이 왜 필요한지, 적용배경을 더하여 포스팅 해보겠다.

---

HTML4까지는 구역을 나눌때 <div> 위주로 구성하고 id, class를 부여하는 식이었다.

HTML5가 도래하면서 이름이 있는 태그들을 지원하여, 컨텐츠를 명확히 정의하고 코드 가독성을 높이고자 하였다.

이 이름있는 태그를 바로 Semantic Tag라고 한다. 종류는 포스팅 링크 참고(abangpa1ace.tistory.com/3?category=910459)

---

🚀 Check Point

Assignment #2

"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. <img> 태그를 사용하는 것과 <div> 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."

 

<img>는 HTML 태그입니다. Semantic Web에서 이미지로서 접근성 및 활용성이 우수하며, broken image 와 alt 텍스트를 통해서 이미지 로드가 실패했을 때 정보누락을 방지할 수 있습니다. 상대적으로 중요한 이미지 컨텐츠를 다룰 때 사용된다고 생각합니다.

 

{background-image} 는 CSS 속성으로 <div> 등의 태그 대상으로 적용됩니다. 이미지 로드 실패시에는 <div>가 최소화되고 배경이 transparent가 되는 점 외의 대체정보가 없습니다. 이미지가 정보 전달보다는 단순한 디자인 목적으로 활용될 때 사용된다고 생각합니다.

---

📙 Semantic Web이란?

시맨틱 웹(Semantic Web)은 "의미론적인 웹"이라는 뜻으로, 기계가 이해할 수 있는 형태로 제작된 웹을 의미합니다.
1998년 웹의 창시자인 팀 버너스리(Tim Berners-Lee)가 최초로 제안했고, 현재 W3C에 의해 표준화 작업이 진행중입니다.
- Wiki 백과

쉽게 말해서, 기계가 웹페이지의 정보를 이해하고, 우리에게 필요한 정보만 가공해서 보여주는 웹의 진보된 형태인 것이다.

 

웹 2.0시대(집합지성의 쌍방향 공유 네트워크)가 시작되면서, 정보량이 방대해지고 그만큼 필요한 정보를 찾기가 힘들어졌다.

이렇게 인간이 직접 필요한 정보를 탐색하는 방식에서, 기계가 웹페이지의 정보를 이해하고 가공하는 방식이 제안된 것이다.

 

이러한 Semantic Web이 실현되려면, 기계가 웹페이지를 이해하도록 정보를 담는 수단(*온톨로지)으로 표현되어야 한다.

* 온톨로지(Ontology) : 개념의 타입이나 사용상 제약조건을 컴퓨터에서 다루는 형태로 정의한 모델링 기술이다.

 

 

📙 Semantic Tag

말 그대로, "의미를 가진 태그" 이다. Semantic Tag를 사용하는 이유는 크게 두가지이다.

 

1. 웹 접근성

<div> 와 <span> 만으로 웹페이지를 구성할 수 있지만, 시각장애인의 경우 스크린 리더를 통해 소리로 웹페이지를 경험할 때 상당한 혼란을 야기할 수 있다. Semantic Tag를 사용하면 각 요소들이 어떤 컨텐츠를 포함하는지에 대한 시인성과 접근성이 크게 향상된다.

 

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

구글 등 검색엔진이 웹사이트를 방문하면 문서의 링크를 따라가며 관련 페이지를 모두 수집한다. 이 때, <div> 와 <span> 으로만 구성되어있다면 어느 부분이 중요한지 구분이 어렵지만, <h1> 제목이나 <main> 본문영역 등 Semantic Tag는 주요항목 확인에 매우 용이하다.

 

기존에 <img>, <form>, <video> 등의 Semantic Tag가 존재했으며, HTML5가 도래하면서 각 영역을 명시하는 태그들도 추가됬다.

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

 

이같은 Semantic Tag 성질을 참고하면, 웹페이지에 이미지를 삽입하는 두 가지 방법의 차이점을 비교할 수 있다.(체크 포인트)

---

😃 결론

체크포인트를 처음 접하고, 당연하지만 대답이 바로 떠오르지 않았다ㅠ 마크업을 나름 열심히 공부했다 생각했는데, 원론적인 이해가 부족함을 느꼈다.

 

또한, Semantic Tag에 대해서만 알고 포스팅을했지, 이것의 근본적인 이유였던 Semantic Web에 대한 이해와 이를 통한 <img> 태그와 background-image 의 차이에 대한 공부까지!

한 번 공부한 내용이라고 까불지 말고... 복습한다는 생각으로 보강한다는 생각으로 모든 위코드 세션에 충실히 임하고자 다짐했다.