semantic tag

시맨틱 태그(Semantic Tag)은 '의미가 담긴 태그'라는 뜻으로, tag가 어떤 것과 관련된 것인지 의미를 담고 있는 태그이다.

시맨틱 태그로는,
<header>, <nav>, <aside>, <section>, <article>, <footer>, <img> ∙∙∙ 가 있다.

semantic tag는 어떤 의미를 나타내는 것이라고 표시를 해주기 때문에 컴퓨터가 안에 있는 내용을 알아낼 수 있다.

의미가 없는(non-semantic) <div>를 사용해서 이미지를 표현 하려면
컴퓨터는 image 파일이라고 알 수 없기 때문에,
가로의 크기와, 세로의 크기를 모두 지정해야 하며,
지정한 크기와 백그라운드에 있는 컨텐츠의 크기가 같다고 지정 해주어야 한다.

<style>
#html5 {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/
        thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-
        HTML5_logo_and_wordmark.svg.png");
    height: 100px;
    width: 100px;
    background-size: 100%;
}
</style>
<div id="html5"></div>

반면에 semantic tag인 <img>를 사용하게 되면
컴퓨터는 html 문서를 분석하여 컨텐츠가 image 파일이라는 것을 알게 되고,
가로만 지정해도, 설정한 이미지를 자동으로 축소시켜 세로를 따로 설정해주지 않아도 된다

<style>
  img {
  width: 100px;
  }
</style>
<img src="https://upload.wikimedia.org/wikipedia/commons/
thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-
HTML5_logo_and_wordmark.svg.png">

semantic tag 를 사용하면 개발자 입장에서도 코드의 가독성이 좋아지기 때문에 업무능력이 좋아진다.

semantic tag를 사용하지 않고 코드를 작성하면,
코드가 길어졌을 때 구분이 명확하지 않아서 원하는 부분을 찾는데 시간이 더 걸리지만

<div>제목</div>
<div>
  <ul>
    <li><a href="naver.com">naver</a></li>
    <li><a href="google.com">google</a></li>
    <li><a href="https://velog.io/@chosh91">velog</a></li>
  </ul>
</div>
<div>
  <div>
    <div>html이란?</div>
      <p>hyper text markup language</p>
  </div>
  <div>
    <div>css란?</div>
      <p>cascading style sheet</p>
  </div>
</div>
<div>
  <ul>
    <li><a href="">개인정보처리방침</a></li>
    <li><a href="">쿠키 정책</a></li>
  </ul>
</div>

semantic tag를 사용하여 코드를 작성하면,
코드가 길어져도 header, nav, section, footer의 의미가 있는 태그로 구분되어 있기 때문에
원하는 코드를 찾는데 더 수월하다.

<header>
  <h1>제목<h2>
</header>
<nav>
  <ul>
    <li><a href="naver.com">naver</a></li>
    <li><a href="google.com">google</a></li>
    <li><a href="https://velog.io/@chosh91">velog</a></li>
  </ul>
</nav>
<section>
  <article>
    <h2>html이란?</h2>
      <p>hyper text markup language</p>
  </article>
  <article>
    <h2>css란?</h2>
      <p>cascading style sheet</p>
  </article>
</section>
<footer>
  <ul>
    <li><a href="">개인정보처리방침</a></li>
    <li><a href="">쿠키 정책</a></li>
  </ul>
</footer>

semantic web

시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻으로,현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다

예를 들면,"바나나는 노란색이다."라는 문장에서
사람은 바나나가 노란색이라는걸 알 수 있지만 컴퓨터는 문자열로 밖에 인식하지 못한다.

하지만 semantic web에서는, "바나나 라는 정보의 색상 정보는 노랑이다."
의 방법으로 정보를 컴퓨터에게 전송하면,
바나나를 검색했을때 노란색이라는 정보가 나올 수 있다.

온톨로지 형태로 표현하는 방법은,
시맨틱 웹은 XML에 기반한 시맨틱 마크업 언어를 기반으로 한다. 가장 단순한 형태인 RDF는 <Subject, Predicate, Object>의 트리플 형태로 개념을 표현한다.
ex) <바나나, 색상, 노랑>

RDF >>> <웹페이지, 검색엔진에 노출시킬 이름, " ">

에서 "" 사이에 <h1></h1> 안에 들어가는 내용 이라는 정보를 입력해주면
컴퓨터는 "h1이라는 시맨틱 태그 사이에 있는 내용으로 검색엔진에 노출"이라는 내용을 처리 할 수 있을 것 같다.