이전 글을 통해서 사이트에 이미지를 넣는 두가지 방법에 대해서 다루어 보았다.
글 후반부에 <img> 태그는 Semantic tag로 컴퓨터가 이를 이해할 수 있고, 더 나아가 Semantic web 으로 의미론적 데이터베이스로 구축해나갈 수 있다고 언급하였다.
그렇다면 여기서 사용된 Semantic web, Semantic tag란 무엇일까?
1. Semantic web
우선적으로 'semantic'의 사전적인 의미부터 알아보자.
따라서 semantic web이란 semantic(의미론적인) + web(웹) 즉, 의미론적인 웹으로 문서의 의미에 맞게 컴퓨터나 기계가 이해할 수 있는 형태로 제작된 웹을 의미한다.
다시 말해, 시맨틱 웹 semantic web 이란 웹에 존재하는 수많은 웹페이지들에 메타데이터를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 '의미'와 관련성을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.
semantic web가 아닌 기존의 일반 웹은 무분별한 정보의 집합체로 개발자가 의도한 요소의 의미가 모호하게 전달되어 코드의 가독성이나 유지보수에 용이하지 않았다. 그러나 semantic web를 통해서는 브라우저가 웹 문서의 소스코드를 보기 쉽게 구조화할 수 있고 사람이 코드를 읽을 때도 어느 부분이 어떠한 의미를 내포하고 있는지 알 수 있어 (ex.<header>, <nav>) 코드의 가독성을 향상시켜 효율을 높일 수 있다.
또한 semantic web는 기계로 하여금 데이터를 더욱 의미론적으로 해석할 수 있게 하여 검색 엔진 최적화(SEO)를 용이하게 한다. 이는 인터넷 사용자가 증가함에 따라 정보의 중요성이 증대되는 현재 시점에서 매우 중요한 의미를 갖는다.
이러한 semantic web는 semantic tag를 사용하여 웹 접근성과 검색 엔진 최적화를 높일 수 있다.
2. Semantic tag
html로 볼드체를 통해 텍스트를 강조하고 싶을 때 사용하는 태그에는 <b>와 <strong> 두가지가 존재한다. 이 둘에는 어떤 차이가 있을까?
<div>나는 김치 만두보다 <b>고기 만두</b>가 더 좋다.</div>
<div>나는 김치 만두보다 <strong>고기 만두</strong>가 더 좋다.</div>
나는 김치 만두보다 고기 만두가 더 좋다.
나는 김치 만두보다 고기 만두가 더 좋다.
두 가지 태그 모두 고기 만두를 굵게 하여 시각적인 강조를 한다는 점에서는 동일하다. 하지만 <b>와 <strong> 사이에는 명백한 차이가 있다.
바로 <b>는 단순히 글자가 굵게 보이는 시각적 형태만 나타내는 non-semantic tag인 것에 반해, <strong>는 글자를 굵게 표현하여 시각적 형태를 강조할 뿐만 아니라 태그로 감싸진 내용들이 중요한 내용이라는 정보를 브라우저에게 전달하는 역할을 한다. 그러므로 <strong> 는 semantic tag이다.
시맨틱 태그를 통해 태그가 의미를 가지게 되어 태그만 봐도 어떤 역할을 하는지 쉽게 알게 되어 사이트에 대한 정보를 검색 엔진의 크롤링에게 더 자세하고 정확하게 제공할 수 있게 된다.
이 외에 주요한semantic tag의 종류에 대해 알아보자.
헤더 영역을 나타내는 <header>
웹 사이트에서 주로 <header>는 맨 위쪽에 있으며, 검색 창이나 사이트 메뉴를 삽입하는 데에 많이 사용된다.
내비게이션 영역을 나타내는 <nav>
<nav>는 한 웹 문서 안에서 다른 위치로 이동하거나 다른 웹 문서로 연결하는 링크를 만드는 태그이다.
핵심 콘텐츠를 내포하는 <main>
<main> 태그에는 웹 문서에 핵심이 되는 내용을 넣는다. 이 태그는 웹 문서에서 한 번만 사용할 수 있다.
독립적인 콘텐츠를 제공하는 <article>
<article> 태그를 통해 웹에서 실제로 보여주고 싶은 내용을 넣을 수 있다. 앞선 <main>태그와는 달리 여러 번 사용할 수 있다.
콘텐츠 영역을 나타내는 <section>
<section> 태그는 웹 문서에서 콘텐츠 영역을 나타낸다. 독립된 콘텐츠를 담는<article> 태그와 다른 점은 <section> 태그는 몇 개의 콘텐츠를 묶는 용도로 사용할 수 있다는 부분이다.
사이드 바 영역을 나타내는 <aside>
<aside> 태그를 통해 본문 내용 외에 왼쪽, 오른쪽, 아래쪽에 사이드바를 만들 수 있다.
푸터 영역을 나타내는 <footer>
<footer> 태그를 통해 웹 문서에 맨 아래쪽에 푸터를 배치하여 정보, 저작권 정보, 연락처, sns 링크 등을 넣을 수 있다.
여러 소스를 묶는 <div>
앞서 언급한 <header>,<section>과 같은 시맨틱 태그가 등장하기 전에는 <div>를 사용하여 문장 구조를 구별하였다. 여전히 영역을 구별하거나 스타일로 문서를 꾸미기 위해 사용하는 경우가 많다.
이 글을 작성하면서 그동안 얼마나 스스로가 무분별하고 가독성이 떨어지는 코드를 작성해왔는지 반성하게 되었다. 또한 이러한 시맨틱 웹을 만들기 위해 시맨틱 태그를 적재적소에 사용하는 능력이 필요함을 알게 되었다.
또한 code refactoring 과정에서도 html의 시맨틱 태그 사용을 권장하는 분위기이다.
프런트엔드 개발자의 웹의 구조에 대한 이해가 얼마나 중요한지에 대해서 느끼게 되었다.
