.png)
Semantic Web
-
시맨틱 웹(Semantic Web)은 "의미론적인 웹"이라는 뜻으로, 기계가 이해할 수 있는 형태로 제작된 웹을 의미한다. (물론 사람도 이해할 수 있다.)
-
웹에 존재하는 수많은 웹페이지들에 *메타데이터(Metadata)를 부여하여 기존의 잡다한 데이터 집합이었던 웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.
메타데이터?
메타데이터란 데이터를 설명하는 데이터이다. 예를 들어 HTML은 데이터이다. 그리고 HTML의
<head>안에는 문서 작성자나 문서 요약과 같이 문서를 설명하는 데이터, 즉 메타데이터를 넣을 수 있다.
Semantic Tag
- 시맨틱 태그(Semantic Tag)란 여러 가지 정보들을 의미에 맞게 잘 표현하기 위한 태그이다.
- 아래의 그림 중 왼쪽은 non-semantic tag들로, 오른쪽은 semantic tag로 작성된 HTML 구조이다.
- 그럼 semantic tag가 어떤 역할을 하는지 간단한 예시를 들어보자.
<div id="header"></div>
<header></header>- 위의 첫 번째 코드는 non-semantic tag로 작성되었고, 두 번째 코드는 semantic tag로 작성되었다.
- 로봇은 id가 header라고 적혀 있다고 해서 그 부분이 웹 페이지의 헤더에 해당하는지 알 수 없다. 하지만
<header>라는 태그를 사용해서 웹 사이트의 헤더를 정의해주면 기계도 이 부분이 웹 페이지의 헤더라는 것을 이해할 수 있다.
왜 시맨틱 태그를 사용하는가?
-
검색엔진(SEO) 최적화 : 레이아웃을 잡을때 시맨틱 태그를 쓰든 쓰지않든 화면에 보이는 결과물은 같지만 검색엔진에 노출되는 차이는 크다. 왜냐하면 검색엔진은 시맨틱 요소를 이용하여 보다 효과적인 *크롤링과 인덱싱이 가능하기 때문이다.
-
웹접근성 최적화 : 스크린 리더와 같은 웹 보조기구를 이용하는 시작 장애를 가진 사람도 어려움 없이 웹 문서를 읽을 수 있다.
-
가독성 : 사람이 HTML 파일을 분석할 때도 시맨틱 태그로 되어 있는 것이 훨씬 가독성이 좋다.
크롤링과 인덱싱?
검색엔진이 검색 키워드에 대한 검색결과를 사용자한테 제공하기 위해서는 크롤러가 끊임없이 온라인 상의 문서를 수집해야하고, 크롤러가 수집한 문서를 인덱서가 잘 정리해서 인덱스 서버에 색인해 둬야 한다.
이제 다음 질문에 대한 답이 가능할 것이다.
질문
사이트에 이미지를 넣는 방법은 두 가지가 있습니다. <img> 태그를 사용하는 것과 <div> 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요.
답변
두 방식 모두 화면에 보이는 결과는 같지만 차이가 있습니다.<img> 태그는 alt 속성으로 이미지에 대한 설명을 넣을 수 있지만, background-image 속성은 이미지 정보를 가지고 있지 않다는 점입니다.
따라서,<img> 태그는 검색엔진(SEO)에 효과적으로 노출될 수 있습니다. 또한, 스크린 리더와 같은 웹 보조기구를 사용할 경우 <img>태그의 alt 속성을 읽을 수 있지만 background-image 속성은 무시됩니다.
즉, 의미가 있어야 하는 이미지라면 <img>태그를 사용하고, background-image 속성은 순수히 '장식'으로서의 배경 이미지로 사용하는 것이 좋습니다.
참고사이트 :
https://www.vikingcodeschool.com/html5-and-css3/html5-semantic-tags (사진출처)
https://cordelia273.space/21
https://velog.io/@rimu/HTML-Sementic-Tag-for-SEO-검색엔진-최적화-우리가-html문서를-시멘틱하게-작성해야하는-이유
https://velog.io/@chris/the-css-background-image-property-as-an-anti-pattern
https://developer.mozilla.org/ko/docs/Glossary/Metadata
