[HTML] Semantic Tag와 Semantic Web

"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. 태그를 사용하는 것과
태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."

Semantic Tag란?

'semantic'이란 '의미의', '의미론적인'이라는 뜻을 가졌다. 따라서 시맨틱 태그란 의미가 있는 태그를 말한다. 아래에서 결과적으로 1번과 2번은 시각적으로는 차이가 없다. 하지만 2번에서는 <h1>에 <header>라는 의미가 부여되어 직관적으로 <h1>역할을 이해할 수 있다.

1. <h1> 태그 안에 쓴 제목

<h1>Title 입니다.</h1>

2. <header> 태그 안에 쓴 제목

<header>
 <h1>Title 입니다.</h1>
</header> 

Semantic Tag를 사용하는 이유(장점)

웹페이지의 궁극적인 존재 이유는 정보를 전달하기 위함이다. 시맨틱 태그를 사용하여 웹페이지의 이런 정보로서의 가치를 높일 수 있다.

예를들어 <div>, <span>을 사용하는 것보다 <header>, <nav>를 보면 문서의 제목과 방향이구나를 유추할 수 있기 때문에 코드를 수월하게 이해할 수 있다.

1. 검색 최적화 SEO(Search Engine Optimization)
   : 사용자가 원하는 키워드로 검색 시 정확한 웹 페이지를 제공할 수 있다.

2. 웹접근성 Accessibility
   : 음성으로 읽어주는 스크린리더를 이용할 수 있어 웹의 중요한 가치 중 하나인 웹 접근성을 실현할 수 있다.

3. 유지보수 Maintainalbility
   : 처음 보는 코드도 한눈에 이해할 수 있어 웹 유지보수에 용이하다.

HTML <img> 태그와 CSS background-image 속성

처음 문제로 되돌아가서 언제 <img>태그를 사용하고 언제 background-image 속성을 쓰는 것일까? 그것은 이미지의 사용 목적에 따라서 달라진다.

1. 이미지가 중요 요소 중 하나인 경우

만약 웹페이지가 어떤 이미지에 대한 설명 글이라고 하자. 그렇다면 여기서 이미지는 <img>태그로 작성해주는 것이 좋다. 왜냐하면 문맥상 하나의 중요한 요소로 존재하기 때문이다.

2. 이미지가 배경의 역할을 하는 경우

만약 이미지의 목적이 웹페이지를 꾸미는 것에 중점을 두고 있다면, CSS에서 background-image 속성으로 스타일링해주는 것이 좋다. 이미지가 단순히 배경 역할을 하여 이미지 없이도 글의 내용을 충분히 이해할 수 있기 때문이다.

대표적인 Semantic Tag의 종류

<header> : 웹 페이지의 제목 부분
<nav> : 웹 페이지의 navigation
<main>,<article>, <section> : 웹 페이지의 주요 부분
<footer> : 웹 페이지의 하단 부분

Semantic Web이란?

시맨틱 웹은 의미론적인 웹 이다. 즉, 시맨틱 태그를 사용하여 의미에 맞게 구성된 웹을 의마한다.