Semantic Web (시멘틱 웹)
시멘틱 웹이란?
시멘틱 웹은 쉽게 설명하자면 의미를 이해하는 웹 이다. 정보를 단지 축적하거나 연결하는 것만이 아닌, 그 의미까지 이해하는 것이 시멘틱 웹의 목표라고 할 수 있다.
여기서 의미를 이해한다는 2가지 방식으로 이해 할 수 있다.
☝🏻첫번째, 웹이 인간이 준 데이터를 스스로 이해한다.
✌🏻두번째, 컴퓨터와 웹이 인간이 전달한 데이터의 의미를 이해할 수 있도록 좀 더 효율적으로 정보를 처리한다.
이를 바탕으로 시멘틱 웹을 다시 한번 정리하자면,
컴퓨터가 웹 정보의 의미를 스스로 이해, 검색, 추출, 해석 가공하게 하는 인공 지능을 갖춘 웹으로 기계가 스스로 읽고 처리할 수 있도록 웹을 개발하고자 탄생한 것이다.
Semantic Tags (시멘틱 태그)
시멘틱 태그란?
시멘틱 태그란 그 자체에 의미를 가지고 있는 요소를 말한다. 즉, 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해 주는 요소를 의미한다.
시멘틱 요소를 사용하지 않고 구조를 짜게 되면, class 또는 id값으로 구조를 파악하거나 내부 코드를 봐야 안에 내용이 무엇인지 알 수 있었다. 하지만 시멘틱 요소를 사용하면 이름만 봐도 구조를 파악하고 내용을 알 수 있다.
자세한 내용은 아래 그림을 참고하도록 하자.
<header> : 웹 문서 맨 윗부분, 웹 사이트 로고, 로그인, 회원가입, 사이트맵, 언어 선택
<nav> : 문서의 navigation , 메뉴 , 리스트와 링크(ul , li, a )
<section> : 문서에서 관련 있는 내용을 묶음
<article> : 독립적인 내용, 뉴스 기사나 블로그 내용 등
<aside> : 본문 글과 연관성 없는 내용 (배너 광고, 위젯등)
<footer> : 주소, 연락처, 저작권
시멘틱 태그의 장점
-
검색 엔진 최적화 (SEO)
검색 엔진이 자료를 검색하여 정보의 의미를 분석할 수 있게 도와준다. -
웹 접근성
시맨틱 태그를 사용하면 시각 장애인이 스크린리더기를 이용해 검색 엔진에서 웹 소스를 읽을때 어느 부분이 메뉴이고 본문인지 구분하기 수월해짐.
(웹 표준/웹 호환성/웹 접근성의 차이) -
유지보수 & 가독성
페이지의 구조를 쉽게 파악할 수 있어 코드 리뷰시 탐색이 용이하다.
코드 작성시 데이터 유형이 제한되어 편리하다.
시멘틱 태그의 단점
- 최신 문법이므로 브라우저 호환성에 문제가 있을 수 있음으로 확인해볼 필요가 있다. (Can I Use에서 확인)
마무리✨
html 을 공부하면서 '시멘틱' 시리즈의 단어들(시멘틱 웹, 시멘틱 요소, 시멘틱 태그 등)을 많이 들었지만 그 개념 정의를 정확하게 내리지 못했는데 이번 기회를 통해 정리 할 수 있었다. (다른 블로그 나 사이트들에서는 너무 사전적 의미로만 나와있어 처음에 이해하기에 어려움이 있었지만 나의 언어로 바꾸어 이해해보려 노력했다!)
코드를 치는 것도 중요하지만 이런 기본 개념을 알고 코드를 쳐야지 웹에 대해 더 잘 이해하고 좋은 코드를 작성 할 수 있는 것 같다.
결론은 시멘틱 태그를 잘 사용하자...!!😅
