'sementic'는 사전적으로 '의미론적'이란 뜻을 가진다. 우리는 웹을 만들 때 Sementic Web, Sementic Tag란 단어를 듣게 된다.
1. Sementic Tag
말 그대로 의미를 가진 태그를 뜻한다. html 문서를 작성하면서 <div> 태그를 매우 자주 사용할텐데, 맨 처음 이 태그를 배울 때 이것은 파트를 구분해줄 뿐 아무런 의미를 갖지 못하는 태그라는 내용을 접했을 것이다.
Sementic Tag는 이와 완전 정반대이다.
태그 자체가 의미를 갖고 있어 기계가 해당 태그를 만났을 때 자동적으로 이 태그가 어떤 내용을 가질 것이고, 그 설명은 어떤지를 받아들인다. <header>, <footer>, <img>, <table>과 같은 태그가 바로 이 Sementic Tag에 해당한다.
<img src="(경로)" alt="(설명)"> <img> 태그를 만나는 순간 지금부터 나올 내용은 이미지이고, 소스 경로와 그 설명이 이어질 것임을 기계는 당연하게 예상한다.
2. Sementic Web
이렇듯 그저 무의미한 <div>의 나열이 아닌 Sementic Tag들이 들어간 웹을 Sementic Web이라 부른다. 그렇다면 우리가 굳이 이렇게 코드를 작성해야 하는 이유는 무엇인가.
누군가 인터넷에 검색어를 입력하고 검색을 했을 때 기계는 검색어에 맞는 정보를 색출하여 화면에 보여주려 할 것이다. 이 검색에 우선적으로 구분되는 대상이 바로 이 Sementic Tag들이다.
혹은 개발자가 이미 작성된 코드를 읽으려할 때 무수한 <div>의 나열보다는 명확하게 파트가 구분된 코드가 훨씬 가독성이 좋을 것이다. 즉, 유지보수가 편해진다는 뜻이다.
이처럼 Sementic Web은 사람에게도, 기계에게도 복잡한 코드 덩어리보다는 의미를 가지고 잘 정리된 데이터로 만들자는 개념이다.
3. 응용
이미지를 넣는 방법 두 가지:
① <img> 태그 사용 → sementic
② <div>에 background-image 속성 사용 → non-sementic
