Semantic Web

Semantic Web이란?

 

시멘틱 웹은 직역을 하면 의미있는 웹이라는 뜻이다. 

<h1>제목</h1>

위의 예시에는 제목을 표현하기 위해서 h1이라는 태그를 사용하였다. h1을 사용함으로써 개발자가 의도한 목적을 쉽게 알 수 있으며 코드의 가독성 또한 높여줄 수 있는 효과를 가질 수 있다.

<div class="title">제목</div>

HTML5 이전에는 시멘틱 태그라는 개념이 존재하지 않았기 때문에 span태그와 div태그가 남발되었는데 이는 코드의 가독성을 감소시킬뿐만 아니라 웹의 접근성 좋지않은 단점을 지니고 있다.

 

쉽게 말해서 시멘틱 웹은 개발자가 의도한 의미를 가지고 있는 웹이다.

 

Semantic Tag

1. Semantic tag
   • table
   • img
   • header
   • nav
   • section
   • article
   • footer
   • time
   • summary
2. Non-semantic tag
   • div
   • span

시멘틱 태그와 논시멘틱 태그는 다음과 같다. 예시에서도 볼 수 있듯이 div태그와 span태그는 아무런 의미를 가지고 있지 않는다. 웹을 단순히 시각적으로 표현하는데 그치지 말고 데이터를 보여준다는 개념으로 개발자가 프로그래밍 하게 된다면 좋은 웹이 될것이다.

 

question) img 태그를 사용하는 것과 div 태그를 통하여 background-image 속성을 추가하여 이미지를 표현하는 것, 2가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋을까?

• 앞에서도 보았듯이 img는 semantic tag , div는 non-semantic tag 이다. 즉 img는 개발자가 의도한 의미를 가지고 있는 태그이고 div는 아무런 설명과 의미가 없는 태그인 차이점을 가지고 있다.
• img 태그는 콘텐츠적 의미를 가지고 있는 경우, alt를 사용하는 경우, 검색할 경우 노출이 되도록 하고 싶을 때 사용된다.
• background-image 속성은 단순히 디자인만을 활용하고 싶을 때, 아이콘과 같은 반복되는 이미지일 경우에 사용된다.