https://poiemaweb.com/html5-semantic-web 참고 하였습니다.
Semantic web & Semantic tag(or element) 에 대해 위 참조 페이지가 개괄적으로 매우 잘 설명해놓았다고 생각합니다. 꼭 읽어보시길 바랍니다. 여기에서는 간단하게 참조 페이지에서 참고한 Semantic tag 및 Semantic web 의 개념을 정의하고 다음의 가상 면접 질문에 답을 서술합니다.
"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. img 태그를 사용하는 것과 div 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."
-
검색엔진은 robot을 이용해서 전 세계 웹 페이지를 크롤링 함
-
검색엔진은 사용자가 미리 검색할 키워드를 예상해서 인덱스를 생성
-
인덱스를 생성할 때 웹 페이지의 HTML 구조를 이용
-
즉, html element를 이용해서 인덱스 생성
-
semantic element(tag): 브라우저, 검색엔진, 그리고 개발자 모두에게 해당 element 의 의미를 명확히 설명하는 요소
e.g. form, img, table, section, article 등 태그를 보면 해당 content의 의미를 바로 파악할 수 있게 해주는 tag들
cf) div, span 등 은 non-semantic tag로 tag 그 자체를 보고 content 의미를 파악하기 어렵다. -
semantic web: semantic web 패러다임 전, 웹은 웹 페이지들이 만들어내는 의미나 관계를 정의하지 않은 무수히 많은 데이터의 집합이었다. 이러한 웹 세계를 semantic element 등을 이용해서 단순한 데이터 집합에서 의미나 관련성을 가지는 거대한 데이터베이스로 만드는 발상이 semantic web 이다.
면접 답안
검색에 노출되거나 업로드한 이미지를 통해 사용자를 웹 페이지에 접속하도록 유도하려고 할때는 img 태그를 이용해서 이미지를 업로드 합니다. 그리고 앞의 목적과 관계없이 홈페이지나 블로그의 배경 이미지를 사용할 때 div 를 이용하면 유지하기 편리합니다.
저를 커피 원두를 판매하는 온라인 유통업자라고 가정하겠습니다. 제품을 판매할 웹 페이지를 만들고자 할 때, 판매하고자 하는 제품의 이미지는 img 태그를 이용해서 업로드 해야 합니다. 이 때, img tag의 alt 속성 값(예를 들면, '커피원두')을 입력 하는 것이 좋습니다.
사용자가 검색창에 커피원두를 검색 했을 때 검색엔진은 커피원두라는 의미에 해당하는 이미지들을 결과물로 보여줍니다. 이 때, 검색엔진은 커피원두의 의미를 semantic tag인 img tag 를 통해서도 파악하기 때문에 제가 판매하고자 하는 제품의 이미지를 img 태그를 이용해서 나타내야 합니다. alt 값을 잘 입력하는 이유도 마찬가지로 검색엔진이 해당 이미지 태그의 의미를 더욱 잘 파악할 수 있기 때문입니다. 즉, img tag 이미지는 제가 만드는 제품 페이지의 SEO(Seach Engine Optimization)를 그렇지 않을 경우 보다 더 높이고 제가 판매하는 제품의 이미지가 검색에 더 잘 노출될 가능성이 높아집니다.
