드디어 7월!
오늘은 semantic tag와 semantic web의 차이에 대해 알아보자 😀
먼저 semantic이란? '의미의' 라는 뜻을 지니고 있다.
semantic tag와 semantic web을 직역하면
의미를 지닌 태그와 의미있는 웹을 의미할 것이다.
1. semantic tag
<div> 나 <span> 의 경우, 영역을 지정하여 효과를 주기엔 용이하나 자신이 가지고 있는 콘텐츠를 따로 설명하지 않는다.
ex) <div class = "header">
<div id = "header">
semantic tag는 구체적인 의미를 가지고 있는 태그이며,
코드의 가독성을 높이고 명확하게 해준다.
2. semantic web
웹에 존재하는 수많읜 웹페이지들에 메타데이터를 부여하여 여러 데이터의 집합이었던 웹페이지를 '의미'와 '관련성'을 지니는 거대한 데이터베이스로 구축하고자 하는 발상이다.
적절한 <meta> tag를 활용해 웹의 접근성(SEO- 검색엔진 최적화)을 높이는 것이 중요하다.
-meta : 문서 레벨 메타 데이터 요소
즉, semantic tag를 활용하여 의미를 보다 명확하게 표현한 페이지를 만들어야 semantic web이 실현된다는 의미!
[질문에 대한 답변 생각해보기!]
Q. 사이트에 이미지를 넣으려고 합니다. <img> 와 <div> 에 background-img를 추가하는 것의 차이는 무엇이며, 어떤 경우에 각각 사용하는 것이 좋은가?
A.
<img>의 경우, semantic tag에 포함되어 이미지의 src, class를 활용해 어떠한 의미의 사진인지 표현할 수 있다.
검색엔진 최적화도 동시에 가능하다.
<div> 의 background-image 속성을 넣는 경우,
배경의 데코로 사진 이미지를 넣거나, 별도의 설명과 노출이 필요없는 상황에서 유용하게 사용될 것이다.
또한, 이미지의 크기의 조절이 필요할 경우 (확대 필요 시)에도 사용할 수 있다.
.jpg)