<HTML/CSS> Semantic Web와 Semantic Tag에 대하여

은경·2021년 10월 11일
0

Semantic Web // 의미론적인 웹


지금도 인터넷이 발전하면서 많은 정보가 축적되고 있다
방대한 자료를 사람이 하나하나 처리할 수는 없다.

따라서 자동으로 컴퓨터가 읽고 처리 할 수 있는 웹을 개발하고자 탄생한 것이Semantic web이다.


단순히 < div >로 시작되는 코드는 컴퓨터가 구분할 수 없기에 사용자가 원하는 결과만을 보여주고자 시작되었다. ex)검색엔진



HTML 요소는 non-semantic 요소, semantic 요소로 구분할 수 있다.

  1. non-semantic 요소
    div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않는다.
  1. semantic 요소
    form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명한다,

Semantic Tag


Semantic Tag란 콘텐츠의 의미를 명확히 설명하는 역할을 하며 사용자가 눈으로 보고 헤더 또는 이미지 인것을 구분 하듯이 컴퓨터도 구분할 수 있게 해준다 . 또한 웹개발자의 가독성도 높여준다.

tag 예시

header: 헤더 (머릿글)
nav: 내비게이션 (목차)
aside: 좌우측 사이드의공간
section: 본문의 내용(article)을 포함하는 공간
article: 분문의 주내용이 들어가는 공간
footer: 푸터 (꼬리말)


일반적으로 Semantic Tag 사용시

  • img tag 사용시, alt 속성을 함께 사용하여 이미지 정보표기가 가능하다
  • 검색엔진에서 alt 속성에 담긴 정보를 검색할 수 있도록 수집한다.

  • 그러나 < div > background-image를 사용할 경우 검색이 불가능하 고 정보를 담고있지 않다. 그러므로 홈페이지 바탕 이미지 등 꾸밈 용도가 적당하다.
profile
Back-end 개발자

0개의 댓글