Semantic Web과 Semantic Tag의 중요성

개발자 공부를 시작하고 웹에 대해 배웠다. 문제에서 이런 질문을 던져 줬다. 

 

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

 

HTML과 CSS를 이해함에 있어 태그는 매우 중요한 개념이다. 웹사이트는 태그로 시작해서 태그로 끝난다고 봐도 된다. <img>, <div> 태그를 사용해서 똑같은 결과물을 얻을 수 있다. 차이점을 이해하려면 필요한 개념이 Semantic Web과 Semantic Tag이다.

Semantic을 사전에서 찾아보면 "의미의", "의미론적인"이라는 뜻이 나온다. 의미 있는 웹과 태그다. 단순히 생각하면 같은 결과물(시각적)을 얻기 때문에 의미는 상관없을 수 있다. 하지만 이건 옛날 생각이다. 1990년대 아마존, 애플, 코카콜라 웹들을 찾아보면 정말 단순하고 정적이다.

1997년 애플 웹사이트

이때는 의미가 없는 태그인 <div>를 써도 태그 수가 많지 않았을 것이다. 인터넷이 점점 발전하면서 인터넷을 기반으로 하는 IT 대기업들이 생겨나기 시작했다. 구글, 마이크로소프트, 넷플릭스, 페이스북, 카카오 등등. 인터넷 없이는 이 기업들은 상상도 할 수 없다. 웹도 발전을 거듭하면서 복잡해지고 반응도하고 멋있어졌다. 2022년 애플 홈페이지는 정말 살아움직이는 것 같다. 

 

그리고 IT기업들이 발전하면서 데이터들이 많이 쌓이고 있다. 수많은 데이터들 중에서 의미있는 것들을 찾아 제공해서 돈이 되는 세상이 되고 있다. 마지막으로 웹에 대한 접근성이 용이해지고 분석할 수 있는 사람들이 많아지고 있다. 한 사람당 최소 2대의 컴퓨터를 들고 다닌다. 스마트폰, 개인용 노트북, 태블릿, 스마트워치 등등. 예전에 글자를 읽을 수 있는 사람들이 얼마 없었는데 지금은 거의 모든 사람들이 책을 읽고 있다. 이처럼 웹도 일반 대중들도 가볍게 분석할 수 있는 시대가 조만간 열릴 것이다. 이러한 상황 속에서 의미를 알 수 없는 <div> 태그로만 개발을 하는 것은 지양해야 한다고 생각한다.  

 

그러므로 Semantic Tag를 사용하면 좋은점 3가지가 있다. 

1. seo(Search-Engine Optimization) - 검색엔진 최적화

2. Accessibility(웹접근성) 

3. 또 다른 개발자들을 위해

 

위에 질문을 다시 생각해보자. <img> 태그를 사용하는 것과 <div> 태그의 차이점은?

 

이렇게 답하고 싶다. 

 

웹에서 정말 중요한 사진이라면 <img> 태그를 사용하고 웹에서 부가적인 것 기능을 담당하는 사진이라면 <div>를 태그를 쓰면 좋을 것 같다. 

<img>와 <div> 말고도 여러 가지 차이점이 있는 태그들이 있다.

 

-<i> 시각적으로만 이탤릭체 / <em> 강조하는 이탤릭체 

-<b> 시각적으로만 볼드체 / <strong> 정말 중요한 볼드체

- <ul> 순서 없음 / <ol> 순서가 중요 / <dl> 정의, 설명, 목록

-<button> 특정한 액션을 위해! / <a> 어디론가 이동할 때(링크)

 

등등.

 

HTML에는 수많은 태그들이 있다. 앞으로의 발전될 시대를 위해 <div>, <span> 태그들도 좋지만 Semantic Tag를 쓰는 습관을 가지려고 노력해보자. 

 

어떤 태그들이 있는지 궁금하다면 아래 홈페이지 참고

https://developer.mozilla.org/ko/docs/Web/HTML/Element

HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN