인생 첫 홈페이지를 만들었을 때를 생각해보자. 코딩의 'ㅋ'도 모르던 내가 그럴싸한 모양의 웹사이트를 만들어내다니! 뭔가 대단한 첫 걸음을 내딛은 것 같고, 이것 저것 많은 기능을 넣어서 더 완성도 있는 웹사이트를 만들고 싶었을 것이다.
혹시 코드가 복잡해질수록 이런 경험을 한 적이 없는가.
- 예전에 작성했던 코드를 알아보기가 힘들다.
- 다른 사람한테 코드를 보여주니까 알아보기 힘들어한다.
- 코드가 길어질수록 더 헷갈린다.
그렇다면 혹시 의미없는 태그나 의미없는 이름을 사용해서 코딩을 하지는 않았나 생각해 보자.
✅ 시멘틱 웹
시멘틱 웹을 사전적으로 풀면 '의미론적 웹'을 의미한다. 쉽게 이해하자면 '의미'와 '관련성'을 가지는 웹 페이지를 말하며, 인터넷에서 리소스에 대한 정보와 자원사이의 관계를 온톨로지 형태로 표현해서 기계가 처리하도록 하는 프레임워크이자 기술이다. 여기서 온톨로지란 '정보를 컴퓨터에서 다룰 수 있는 형태(데이터)로 표현'하는 것을 말한다.
그럼 시멘틱 웹이 왜 중요한가?
작성한 코드의 요소의 의미가 명확하면 코드의 가독성이 높아지고 유지보수가 쉽다. 예전에 작성했던 코드를 시간이 지나서 보면 잘 이해가 안되고, 수정도 어려워 머리를 싸매는 일을 크게 줄일 수 있게 된다.
또한, SEO(Search Engine Optimization, 검색엔진 최적화)에 유리하게 되어 사용자의 접근성을 높힌다. 의미있는 태그를 사용하여 코딩을 하면 컴퓨터가 그 정보에 대한 의미를 이해하고 검색에 잘 노출되도록 해준다. 컴퓨터가 정보에 대한 이해도를 높이면 검색 뿐만 아니라 다양한 분야에서 활용할 수 있게 된다. 예를 들어 한 웹 사이트를 크롤링을 하고자 하는데, 아무 태그나 사용해서 만든 사이트라면 원하는 정보를 수집 할 수 없다.
✅ 시멘틱 태그
시멘틱 웹을 만들기 위해서는 의미있는 요소와 의미없는 요소를 알아야 한다.
1. non-semantic 태그
그저 문단을 나누는 역할만 하는 태그다.
흔히 쓰이는 <div>와 <span>은 아무런 의미를 담고 있지 않는다.
2. semantic 태그
content의 의미를 명확히 설명할 수 있는 요소다.
예를 들어 <table> 은 표를 만드는 태그임을 알 수 있고, <img> 는 이미지를 나타내는 태그임을 알 수 있다.
