TIL no.20-Semantic Web과 Semantic Tag

시맨틱 웹(Semantic Web)

사전적 의미에서 시맨틱은 "의미론적인"이라는 뜻이다. 말 그대로 컴퓨터가 웹사이트를 단순한 코드의 구성이 의미를 주어서 사이트라는 걸 알 수 있게 만드는 것이다. HTML5 버전에 오면서 만들어진 것이 시맨틱 태그이다.

시맨틱 태그(Semantic Tag)

HTML5에서부터 도입된 시맨틱 태그는 개발자와 브라우저에게 의미 있는 태그를 제공한다. 일반적으로 <div> 태그는 non-semantic 태그, <table>, <article> 등의 태그는 semantic 태그라고 한다. 개발자 입장에서 non-semantic 태그 안의 이름은 개발자 마음대로 정의할 수 있었지만 코드의 내용을 한눈에 알아보기는 쉽지 않았다. 시맨틱 태그는 HTML 태그의 의미를 명확하게 할 수 있고 대략이라도 태그 안에 들어갈 내용을 대략적으로 유추할 수 있다.

#non-semantic 태그 사용

<div class="class">
  <div >
    xxx
  </div>
</div>

#semantic 태그 사용
 
<header>
  <footer>
   xxx
  </footer>
</header>

<img> VS <div>+background-image

<img>

html에서 태그로 이미지를 생성하는 방법이다. alt를 이용해 이미지 오류 시 이미지가 화면에 출력되지 않더라도 이미지 대신 보여줄 텍스트를 출력해 어떤 이미지였는지 알 수 있다.

<div>+background-image

css를 이용해 이미지를 생성하는 방법이다. 오류 시 화면에 출력되지 않는다.