HTML | Semantic Web 과 Semantic Tags

heesoolee·2022년 1월 26일
1

HTML

목록 보기
1/1
post-thumbnail

1. Semantic Web

Semantic Web 이란 무엇인가

Semantic Web 은 사전으로는 '의미론적인 웹'이라는 뜻으로, 컴퓨터가 사람을 대신해 스스로 웹 속 정보의 의미를 파악하고 처리, 추론 할 수 있도록 제작된 Web을 뜻한다.
또한 Semantic Web 이란 웹 속 존재하는 수많은 웹 페이지들에 Metadata(어떤 목적을 가지고 만들어진 데이터)를 부여하여, 기존의 잡다한 데이터의 집합이었던 웹페이지를 '의미'와 '관련성'을 가진 거대한 데이터베이스로 구축하고자 하는 발상이다.

2. Semantic Tags

Semantic Tags 란 무엇인가

Semantic Tags란 브라우저와 인간 모두에게 컨텐츠의 의미를 명확히 설명할 수 있는 태그를 뜻한다. Semantic Tags를 사용함으로써 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석해 그 데이터를 활용할 수 있도록 하는 Semantic Web을 실현할 수 있다.

Semantic Tags 사용의 장점

  • 검색 엔진이 Semantic Tags 를 중요한 키워드로 간주하기 때문에 검색엔진 최적화에 유리하다.
  • 코드 관리에 용이하다.

3. Nonsemantic Tags 와 Semantic Tags

왼쪽은 div 와 같은 Nonsemantic Tags, 즉 컨텐츠에 대한 어떤 설명도 없는 태그들로 이루어진 블로그이고, 오른쪽은 header, article, footer 와 같은 컨텐츠를 유추할 수 있는 Semantic Tags 로 만들어진 블로그이다.

4. Semantic Tags 의 사용 예시

Img 와 Background-image

ImgBackground-image 둘 다 화면에 이미지를 띄우는 데 사용하는 태그이지만 그 쓰임이 각각 다르다. Img 는 Semantic Tag 이고 Background-image는 Non Semantic Tag 이다.

Img

<img src=" " alt=" "> 

Img 는 Semantic Tag 로서, 이미지가 본문의 실질적 내용일 때 사용한다. Img 태그를 사용하면 alt 속성에 문자열을 넣을 수 있어서 문자적으로 이미지에 대한 정보를 포함시킬 수 있다. alt 속성에 작성한 문자열은 meta 정보로 인식이 되어 이미지가 문자열 내용을 통해 검색 엔진에 노출될 수 있도록 한다. 또한 만약 이미지 로딩에 실패할 경우 alt 를 불러와 사용자에게 이미지에 대한 정보를 대신 전달할 수 있다.

Background Image

<background-img: url(" ")>

Background-image 는 이미지가 본문의 내용과 관련이 없을 때 사용하는 Non-semantic Tag 이다. Background-image의 경우 단순한 이미지 첨부일 뿐, 어떠한 정보도 담지 않는다. 담고 있는 정보가 없기 때문에 검색 엔진을 통해 노출되지 않는다. 따라서 이미지를 순수히 디자인적인 요소로만 사용할 때 활용한다.

결론

img 와 Background-image 중 어떤 걸 사용하는 게 좋을 지 고민이 된다면

Is this part of the content or part of the design?

이 질문을 해보면 된다. 만약 이미지가 내가 전달하고자하는 내용의 일부라면 img 를 사용하고 이미지가 단순히 디자인적인 요소로 쓰인다면 background-image 를 사용하면 된다.

profile
성장 중!

0개의 댓글