[HTML] Semantic Web, Semantic Tags

Minju Kim·2022년 3월 1일

html/css

목록 보기

3/5

⚽️ 목표 : Semantic Web, Semantic Tags와 img태그, CSS background 속성을 연관지어 이해해보기

1. 배경

사이트에 이미지를 넣는 방법은 두 가지가 있다. 하나는 img 태그를 사용하는 방법과 또 하나는 태그에 background 속성을 넣어주는 법. 방법은 아래와 같은데 그 차이점은 무엇이고, 언제 무얼 사용해야 좋은지 알아보자!

방법 1. 태그에 background 속성 넣어주기

👉 div 박스를 만들고 CSS background 속성으로 넣어준다.

// html =>  <div class="bg-img"></div>

.bg-img {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png");
  height: 300px;
  width: 300px;
  background-size: 100%
}

방법 2. img 태그 사용하기

👉 div 안에 img 태그 작성해서 만들어준 후, div에 넓이 적용, 이에 맞게 img넓이 100%로 적용. → div는 안의 내용만큼 높이 늘어나기 때문에 별도로 작성해주지 않아도 img의 높이만큼 div가 늘어나 그림이 보이게 된다.

// html => <div class="bg-img2">
//      <img class="third" alt="js" src="https://www.w3schools.com.png" />

.bg-img2{
  width: 300px;
}

.third{
  width: 100%;
}

2. 정의 : Semantic Web, Semantic tag란?

Semantic Web

시맨틱 웹
(Semantic Web)은 '의미론적인 웹'이라는 뜻으로,현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다. 웹의 창시자인 팀 버너스리가 1998년제안했고 현재 W3C에 의해 표준화 작업이 진행 중이다.

일단 정의를 살펴보면 위와 같다. 짧게 다시 한번 이해해보면, 웹에 존재하는 수많은 웹페이지를 ‘의미'와 ‘관련성'을 가지는 거대한 데이터베이스로 구축하고자 하는 것이다.

Semantic Tag

시맨틱 태그란, 말 그대로 ‘의미'를 가지고 있는 태그들을 의미한다.

form, table, img, header, h1과 같이 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 하는 태그이다. 이 시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다.

Semantic Tag를 사용할 때의 이점

검색 엔진은 의미론적 마크업 을 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주(SEO 참조)
시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용할 수 있음
의미없고 클래스 이름이 붙여져있거나 그렇지 않은 끊임없는 div 들을 탐색하는 것보다, 의미있는 코드 블록을 찾는 것이 훨씬 쉬움
개발자에게 태그 안에 채워질 데이터 유형을 제안
의미있는 이름짓기(Semantic naming)는 적절한 사용자 정의 요소 / 구성 요소의 이름짓기(namimg)를 반영합니다.

3. 결론 - 이미지가 콘텐츠에 포함되어야 한다면 img, 단순히 미적인 배경요소로 존재한다면 background 속성을 사용!

Use an img tag :

서치엔진에서 검색이 되도록 할 때 ➡️ alt attribute를 이용해서 이미지 다운로드가 실패하거나 깨질 때에도 여전히 유저에게 정보를 줄 수 있다.
HTML과 동시에 이미지가 보여져야 할 때 ➡️ HTML에 있는 순서대로 parsing이 되기 때문에 HTML 순서 상 다음 정보가 뜨기 전에 이미지가 뜬다.
유저들이 페이지를 print 했을 시 꼭 이미지가 포함되어야 할 때 ➡️ default로 이미지가 함께 프린트 된다.

Use CSS background- image :

반복되는 이미지일 때 ➡️ 블로그 아이콘, 날짜 아이콘 등 여러번 사용될 때
유저들이 페이지를 print 했을 시 배경이 필요없을 때.
단순히 미적인 요소로 존재할 때

4. 요약

시맨틱 웹은 웹사이트 상에 존재하는 수많은 페이지를 ‘의미'와 ‘관련성'을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다. 시맨틱 태그는 header, h1, img와 같이 이런 시맨틱 웹을 가능케 하는 역할을 한다. 브라우저와 검색엔진, 개발자에게 콘텐츠의 의미를 설명해주는 역할을 하기 때문이다.

이미지를 컨텐츠에 삽입하는 방법은 두 가지가 있는데 img 태그를 사용하는 것과 CSS background 속성을 사용하는 것이다. img는 시맨틱 태그로, 모두가 그 img가 컨텐츠의 어떤 역할을 한다는 것을 이해할 수 있다. 예시로, 만약 사진을 다운로드 하는데 실패하더라도 alt라는 속성을 통해 그 이미지가 컨텐츠에 어떤 의미가 있는지 해석해준다. 반면 background 속성은 이미지 자체에 어떠한 의미가 없을 때, 단순히 배경이미지로의 필요성만 있을 때 사용된다.

Semantic Web | PoiemaWeb
Semantics - 용어 사전 | MDN
시맨틱 웹 - 위키백과, 우리 모두의 백과사전