❓❓❓ 웹에 이미지를 넣기위해 img 태그를 사용하는 것과 div 태그에 background-image 속성을 추가하는 방법중 각각 어떠한 경우에 사용하면 좋은지.... 답을 찾기위해 이 두 개념을 간단히 정리했다.
1. Semantic Web
쉽게말해, '의미론적인 웹' 이다.
말 그대로 컴퓨터가 웹사이트를 단순한 코드의 구성이 아닌 의미를 가진 사이트라는걸 알 수 있게 만드는 것이다.
- 시맨틱 웹과 현재 웹의 차이
기존의 HTML로 작성된 문서는 예를 들어
<em>바나나</em>는 <em>노란색</em>이다. 라는 예에서 볼 수 있듯 em이라는 태그는 단지 바나나와 노란색이라는 단어를
강조하기 위해 사용된다.
이 HTML을 받아서 처리하는 기계(컴퓨터)는 바나나라는 개념과 노란색이라는 개념이 어떤 관계를 가지는지 해석할 수 없다. 단지 em 태그로 둘러싸인 구절을 다르게 표시하여 시각적으로 강조를 할 뿐이다.
반면, 시맨틱 웹은 XML에 기반한 시맨틱 마크업 언어를 기반으로 한다. 바나나 라는 개념은 노랑이라는 색을 가지고 있다는 개념을 해석하고 처리할 수 있게 된다. 단순한 div와 span로만 이루어진 코드가 아닌 적절한 meta태그들을 이용하여 웹 접근성을 높이는 것이다.
2. Semantic Tag
컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹을 실현할 수 있다
태그가 의미를 가짐으로써 검색엔진의 크롤링에게 사이트에 대한 정보를 비교적 정확히 제공할 수 있게 된다
*크롤링: 웹 페이지를 그대로 가져와서 거기서 데이터를 추출해 내는 행위- 시맨틱 태그의 종류
form, table, img 등
- semantic vs non-semantic
semantic tag : 제목, 문단, 내비게이션 등등 뭔가 뜻이 있는 태그
non-semantic tag : 아무 지칭하는 바가 없는 의미 없는 태그
h1 태그는 의미가 있다. 헤더 1이라는 뜻이다.
반면에, div는 의미가 없다. ( 그 안에 있는게 링크,이미지,리스트인지 알수가없다)
article의 경우 이게 article 이라는 걸 알 수 있다.
따라서 div, span 등 이들 태그는 content에 대한 어떤 설명도 없다.
form, table, img 등 content의 의미를 명확하게 설명하고 있는것을 볼 수 있다.💻 질문에 대한 답
👏사용자가 정보를 검색하여 이미지를 얻을때
HTML에서 img 태그에 alt속성에 문자열을 넣음으로서 이는 meta정보가 되며, 검색엔진은 alt속성에 지정된 문자열을 인식하게 된다.
👏단순히 웹을 꾸미는 용도일때
CSS에서 div 태그 background-image 속성을 추가하는 것은 단순히 이미지삽입만 될뿐 아무 정보를 가지지않는다.
