시맨틱 태그, 시맨틱 웹

웹페이지에 이미지를 추가하는 방법에는 2가지가 있습니다.

1) <img> 태그를 사용하는 방법

2) background-image CSS 프로퍼티를 사용하는 방법

같은 이미지URL을 넣었다고 했을 때, 페이지에 출력되는 이미지만 놓고 보자면 2가지 방법은 동일한 결과를 낸다고 볼 수 있지만, 두 가지 방법 사이에는 몇 가지 차이점이 존재합니다.

1) 이미지 로드가 실패했을 때

• <img> 태그를 썼다면, 'broken image'와 함께 alt속성에 입력되어있는 값이 출력된다.
• background-image CSS 프로퍼티를 썻다면, 아무것도 출력되지 않는다.

2) 검색했을 때

• <img> 태그를 썼다면, 검색결과에 이미지가 노출된다.

• background-image CSS 프로퍼티를 썻다면, 검색결과에 이미지가 노출되지 않는다.

  이 경우, CSS 프로퍼티를 통한 이미지의 삽입은 컨텐츠의 하나로써가 아니라 단순히 디자인적의 요소로 페이지에 삽입 되었기 때문에 검색결과에 노출 되지 않습니다. 반면에 img 태그를 통한 이미지의 삽입은 태그가 이미지 컨텐츠를 감싸고 있고, 자신이 감싸고 있는 컨텐츠가 이미지라는 것을 브라우저에게 전달하기 때문에 노출이 됩니다. 그리고 이러한 태그를 Semantic Tag 라고 합니다.
  

시맨틱 태그 (Semantic Tag)

시맨틱 태그는 자신이 포함하고 있는 컨텐츠의 의미를 개발자와 브라우저에게 명확하게 전달하는 태그입니다. 대표적인 시맨틱 태그는 form, table, img등이 있으며, HTML5 에서 추가된 시맨틱 태그는 다음과 같습니다.

• <header> : 문서나 섹션의 헤더를 의미합니다.
• <nav> : 네비게이션 역할을 의미합니다.
• <aside> : 페이지 컨텐츠의 사이드 위치를 의미합니다.
• <section> : 문서나 컨텐츠의 한 부분을 의미합니다.
• <article> : 독립적이고 분리 가능한 컨텐츠를 의미합니다.
• <footer> : 문서나 섹션의 푸터를 의미합니다.

그리고 이러한 시맨틱 태그를 사용하여 구성한 웹페이지가 Semantic Web 입니다.

시맨틱 웹 (Semantic Web)

시맨틱 웹은 페이지가 자신이 가진 컨텐츠의 구조와 의미를 브라우저와 사용자에게 잘 전달하도록 설계된 웹을 말합니다. 시맨틱 웹을 사용해야하는 이유는 아래와 같습니다.

1. SEO (Search Engine Optimization, 검색엔진최적화)

• 우리가 검색을 하면 브라우저는 검색엔진을 통해 정보를 제공합니다.
• 검색엔진은 웹사이트들의 정보를 수집합니다.
• 수집된 정보에서 시맨틱 요소를 통해 해당 컨텐츠의 의미를 파악하기
  때문에 잘 작성된 시맨틱 웹이 검색엔진에 노출이 잘 됩니다.

2. 코드의 가독성 향상

• 포함한 컨텐츠의 의미와 관련성을 쉽게 파악 할 수 있는 시맨틱 태그로 작성된 웹페이지는 리딩이나 문서 전체의 구조 파악이 용이합니다.