TIL21. HTML : Semantic Web과 Semantic Tag

📌 이 포스팅에서는 Semantic Web과 Semantic Tag에 대해서 정리하였습니다.

1. Semantic Web과 Semantic Tag 이란?

🤔 Semantic Tag와 Non-Semantic Tag 란?

✔️ Non-Semantic Tag는 태그 자체의 의미가 없기 때문에 태그 자체로 어떤한 의미도 가지지 않습니다. 이에 태그 내에 담긴 content를 파악하기 어렵다는 단점이 있습니다.
✔️ 이에 Semantic Tag가 생겨났고, 자신의 의미를 웹브라우저 엔진 또는 개발자에게 태그 이름 그 자체로 의미를 가지고 설명해줍니다.
✔️ Non-Semantic Tag는 <div></div>, <p></p>, <span></span> 등이 있고, Semantic Tag는 <header></header>, <main></main>, <footer></footer> 등이 있습니다.

🤔 Semantic Web과 Semantic Tag는 왜 중요할까?

✔️ 웹브라우저는 사용자의 경험을 향상시키기 위한 방법으로 해당 웹사이트의 html 태그 정보를 자신들의 기준에 맞게 분석 및 분류하고 이를 평가합니다. 이를 검색 엔진 최적화(SEO)라 합니다.
✔️ 이에 우리가 서비스하는 웹사이트가 검색엔진에 최적화되어 노출될 수 있게하기 위해서는 Semantic Tag를 효과적으로 활용하여 의미에 있어 타당하게 작성되어야 합니다.
✔️ 또한 "문서 의미에 맞게 구성된 Web" 또는 "웹브라우저가 태그 자체로 의미를 이해하고, 가공할 수 있도록 만들어진 차세대 지능형 Web"을 Semantic Web이라 합니다.
✔️ 이에 Semantic Web을 만들기 위해서는 적극적으로 Semantic Tag를 활용해야 합니다.

참고 : 구글 SEO(Search Engine Optimization) 기본 가이드 : https://static.googleusercontent.com/media/www.google.com/ko//intl/ko/webmasters/docs/search-engine-optimization-starter-guide-ko.pdf

2. HTML에 이미지 삽입하는 방법

🤔 img 태그 이용하기

✔️ img태그는 이미지를 html에 삽입하는 대표적인 html 태그입니다. img태그에 사용되는 속성은 alt와 src가 있습니다.
✔️ src속성은 이미지의 url주고 또는 이미지 파일 경로를 적습니다.
✔️ alt속성에 사용되는 속성값에는 이미지가 없거나 잘못된 이미지일 경우에, 이미지를 대신하여
보여줄 텍스트값이 들어값니다. 시각장애인에게 도움을 줄 수 있을 뿐 아니라, SEO에 따르면 alt속성을 사용하는 것이 권장되고 있습니다.

<img alt="이미지에 대한 설명(text)" src="이미지 주소값">

🤔 background-image 속성 이용하기

✔️ background-image는 속성값으로 이미지 경로를 연결해주고, div 태그의 css 속성 넣어 주로 사용됩니다.
✔️ 또한 background-image 속성은 이미지가 컨텐츠로 활용되는 것이 아닌 배경 등 디자인 요소만으로만 필요할 때 사용됩니다.
✔️ 일반적으로 background-image, background-size, background-repeat, background-position등과 함께 사용됩니다.

.bg-img {
  background-image: url("이미지 url주소");
}

🤔 img 태그를 사용하는 것과 background-image 속성의 차이

✔️ img는 태그 자체가 의미를 가지기 때문에 content를 이미지로 다룰 때에는 img 태그를 사용해야합니다. 즉, 이미지 자체가 정보로써 가치와 중요성을 가졌다면 img 태그를 이용해야합니다.
✔️ 특히, alt를 img 태그의 속성을 사용함으로써 오류시 대체 텍스트를 제공하고, 스크린 리더로 황요할 수 있습니다.
✔️ 이에 반해 background-image는 배경 등 디자인적 요소로만 이미지를 사용할 때 이용하기 때문에 content로써 중요성을 가지지 않습니다. 즉, 정보로서 의미가 없어도 될 때 사용합니다.
✔️ 참고로, img태그를 이용한 이미지는 출력이 가능하고 검색 노출에도 영향을 미치지만, background-image는 검색 노출에 영향을 미치지 않습니다.