Semantic Web & Semantic Tags

younghyun·2022년 1월 24일

Semantic Web

기계, 컴퓨터(특히 소프트웨어, 프로그램, 혹은 에이전트)가 정보의 의미를 이해할 수 있는 웹
기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상.

Semantic Tags

시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 함. 시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있음.

non-semantic 요소

div, span 등이 있음. non-semantic 태그는 content에 대하여 어떤 설명도 하지 않음.

semantic 요소

header, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명함. 코드의 가독성을 높이고 유지보수를 쉽게 함.

header
문서나 특정 섹션(section)의 헤더(header)를 정의할 때 사용합니다.

보통 도입부에 해당하는 콘텐츠나 네비게이션 링크 집합 등과 같은 정보를 포함하게 됩니다.

일반적으로 heading 태그(하나 이상의 제목 요소(h1 ~ h6))나 로고 또는 아이콘, 저작권 정보, 검색 양식, 작성자 이름 등을 포함합니다.

<header>
     <h3>날씨 정보</h4>
     <h4>2월 19일</h4>
     <p>- 기상청 제공 -</p>
</header>

nav
내비게이션 역할을 하는 <nav> 태그는 동일한 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크 모음을 나타냅니다.

<nav> 태그는 내비게이션 메뉴뿐만 아니라 푸터에 있는 사이트 링크 모음 부분에도 많이 사용됩니다. 다시 말해 사용하는 위치의 영향을 받지 않아 <header>나 <footer> 태그 또는 <aside> 태그 안에 포함시킬 수도 있고 독립해 사용할 수도 있습니다.

글을 읽지 못하는 사용자를 위한 스크린 리더기와 같은 브라우저는 <nav> 요소를 사용하여 해당 콘텐츠의 초기 렌더링을 생략할지 여부를 결정한다. -> 장애인 배려!! 항상 중요!!

aside
간접적으로 문서와 관련된 내용을 나타냅니다.
사이드바 또는 콜아웃 상자로 사용됩니다.
사이드바는 필수 요소가 아니므로 광고나 링크 모음 등 문서의 메인 내용에 영향을 미치지 않는 내용들을 넣을 때만 사용한다.

main
지배적인 콘텐츠 영역을 나타내는 태그이다.

section
주제별로 구분한 그룹입니다.
논리적으로 관계있는 요소 또는 문서를 분리할 때 사용합니다.

일반 문서 또는 애플리케이션 섹션. 제목 (제목)과 바닥 글도 있습니다. 긴 기사의 하위 섹션, 페이지의 주요 부분 (예 : 홈페이지의 뉴스 섹션) 또는 웹앱의 탭 인터페이스에있는 페이지와 같은 관련 콘텐츠의 덩어리입니다.

섹션에는 매우 소수의 예외를 제외하고 섹션 제목을 나타내는 <h1>~<h6> 제목 태그가 함께 사용됩니다.

<section>
        <h1>HTML5</h1>

        <p>웹 문서를 만드는 HTML 최신 규격...</p>
        ...
</section>

<section>
  <h1>HOT TOPIC</h1>
  <section>
     <p>World</p>
     <article>World news 1</article>
     <article>World news 2</article>
     <article>World news 3</article>
  </section>
  <section>
    <p>Sport</p>
    <article>Sport news 1</article>
    <article>Sport news 2</article>
    <article>Sport news 3</article>
  </section>
</section>

article
내용이 독립적입니다.
article 태그는 section과 다르게 독립적으로 존재할 수 있으며 재사용 할 수 있습니다.
즉 article이 좀 더 구체적입니다.
게시물, 잡지 또는 신문 기사, 블로그 작성글, 제품 카드, 사용자가 제출한 댓글, 대화형 위젯, 웹 로그 기사 (duh), 포럼 게시물 등이 있습니다.

즉, 태그를 적용한 부분을 떼어 내 독립적으로 배포하거나 재사용하더라도 완전히 하나의 콘텐츠가 된다면 <article> 태그를 쓰면 됩니다.

<article>
   <h3>브랜드 페이스북</h3>
   <ul>
      <li>포스팅1</li>
      <li>포스팅2</li>
      <li>포스팅3</li>
   </ul>
</article>

<article>
        <h1>쇼셜네트워크</h1>

        <p>온라인의 가상공간을 통해...</p>
        ...
</article>

article vs section
<section> 태그는 문맥 흐름 중에서 콘텐츠를 주제별로 묶을 때 사용합니다.

여러 개의 section을 article로 묶을 수 있고
마찬가지로 여러 개의 article을 section으로 묶을 수 있습니다.

<article>
   사람
    <section>뚱뚱한 사람</section>
    <section>마른 사람</section>
</article>

<section id="content">
    <article>블로그 글1</article>
    <article>블로그 글2</article>
    <article>블로그 글3</article>
</section>

div
논리적인 관계가 없는 요소들을 그룹화 할 경우에는 를 사용합니다.
HTML5에서는 주로 콘텐츠를 묶어 시각적 효과를 적용할 때 즉 콘텐츠에 CSS를 적용할 때

태그를 사용합니다.

#wrapper{
    width:800px;
    margin: 0 auto;    
}

<body>
<div id="wrapper">
  <header>
    <nav>
      <ul>
        <li><a href="#">애완견 종류</a></li>
        <li><a href="#">입양하기</a></li>
        <li><a href="#">건강돌보기</a></li>
        <li><a href="#">더불어살기</a></li>
      </ul>
    </nav>
  </header>
  <section>
    <h2>강아지 용품 준비하기</h2>
    <article class="at1">  
      <h3>강아지 집 </h3>
       <p>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.집을 구입하실 때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다.</p>
    </article>
    <article class="at2"> 
      <h3>강아지 먹이 </h3>
      <p>강아지의 먹이는 꼭 어린 강아지용으로 나와있는 사료를 선택하세요. 강아지들은 사람에 비해 성장속도가 8배정도 빠르답니다. 따라서 강아지에게는 성장속도에 맞는 사료를 급여하셔야 합니다. 사람이 먹는 음식을 먹게 되면 양념과 향신료에 입맛이 익숙해지고, 비만이 될 가능성이 매우 높아집니다. 강아지용 사료는 생후 12개월까지 급여하셔야 합니다.</p>
     </article>
     <article class="at3"> 
      <h3>밥그릇, 물병 </h3>
      <p>밥그릇은 쉽게 넘어지지 않도록 바닥이 넓은 것이 좋습니다.물병은 대롱이 달린 것으로 선택하세요. 밥그릇에 물을 주게 되면 입 주변에 털이 모두 젖기 때문에 비위생적이므로 대롱을 통해서 물을 먹을 수 있는 물병을 마련하시는 것이 좋습니다.</p>
     </article>
     <article class="at4"> 
      <h3>이름표, 목줄</h3> 
      <p>강아지를 잃어버릴 염려가 있으니 산책할 무렵이 되면 이름표를 꼭 목에 걸어주도록 하세요. 그리고 방울이 달린 목걸이를 하고자 하실 때는 신중하셔야 합니다. 움직일 때마다 방울이 딸랑 거리면 신경이 예민한 강아지들에게는 좋지 않은 영향을 끼칠 수 있기 때문입니다.</p>
     </article>
  </section>
  <aside>
      <img src="images/1.png" alt="">
      <img src="images/2.png" alt="">
      <img src="images/3.png" alt="">
  </aside>
  <footer>
    <p>Copyright 2012 funnycom</p>
  </footer>
</div>
</body>

footer
문서나 특정 섹션(section)의 푸터(footer)를 정의할 때 사용합니다.
일반적으로 작성자에 대한 정보, 저작권 데이터, 연락처 정보 사이트 맵, 페이지 맨 위로 갈 수 있는 버튼, 연관 페이지, 관련 문서 등에 대한 링크를 포함합니다.

<footer>
    <address>
        <p>제주특별자치도 남제주군 성산읍 수산리 000 번지 요안도라 </p>
        <p>yoan##@naver.com</p>
    </address>                
    <p> Copyright ⓒ. All rights reserved.</p>      
</footer>

hgroup
제목과 관련된 부제목을 묶는 태그

h
문서의 제목을 표시할 때 사용하는 태그로 'heading'의 의미를 가집니다.

제목 크기별로 <h1>부터 <h6>까지 사용이 가능합니다.
<h1>이 가장 상위 계층의 제목을 표시할 때 사용되며 <h6>이 가장 작은 소제목을 표시할 때 사용 합니다.
즉, 태그의 숫자가 커질수록 제목 글자의 사이즈는 작아집니다.

<h1> - <h6> 태그의 글씨 크기를 위해 사용하지 않습니다. 글씨 크기는 CSS의 font-size로 설정합니다.

<h1>부터<h6>까지 태그의 단계를 순차적으로 사용한다. 단계를 건너뛰지 않습니다.

한 페이지에 <h1> 태그는 한 번만 사용합니다.

<h1>태그는 구글 로봇에게 기준을 잡아주는 역할을 합니다. 내가 발행하고자 하는 글이 어떤 주제의 글인지 구글 로봇에게 알려주는 것입니다.

<h1> 태그가 기준점을 제공하는 만큼, <h1> 태그 제목과 실제 본문 내용이 관련성과 일관성이 없다면 구글 로봇은 정확한 판단을 내리지 못하고 해당 글이 정상적이지 않다고(부적합하다고) 인식합니다. 본문에 아무리 중요한 내용이 포함되어있어도 구글 로봇은 <h1> 태그를 가장 중요한 판단 기준으로 여기기 때문에 <h1> 태그에 맞는 본문 내용을 구성해야 합니다.

또한 h태그를 사용할 때는 h태그 밑에 실릴 내용을 신경 써서 작성해야 합니다. h태그를 적용한다는 것 자체가 글을 분류하는 것을 의미하기에 해당 분류에 들어맞는 내용을 작성해 주어야 구글 로봇이 제목과 내용의 연관성을 판단할 수 있습니다.

** 단, HMTL 문서 제목에 해당하는 부분을 <bold>태그를 사용하지 않도록 합니다.

ul
un-ordered list. 순서가 없는 목록을 나타낼 때 사용합니다

ol
ordered list. 순서가 중요할 때 사용합니다.

table
어떤 특정한 아이템들을 table처럼 grid형식으로 표현하기 위해서 table을 많이 이용합니다. 포인트는 문서 안에서 자체적으로 의미있는 태그가 필요한건지 아니면 내가 CSS의 스타일링을 위해서 이렇게 사용하는 지 확인해야 합니다.

<table>은 정말 많은 데이터의 양을 행과 열을 이용해서, 정말 테이블이 필요해서 그런 데이터를 나타내는 경우에 이용합니다. 단순히 아이템을 테이블 형식으로 <grid> 형식으로 표현하기 위해서 테이블 태그를 사용하는 것은 좋지 않습니다.

예전에는 CSS가 많이 발달되어져있지 않아서 <table>태그를 이용해서 스타일링을 했는데, 요즘에는 <table>을 사용하기보다는 CSS flex나 grid를 이용해서 조금 더 유연하고 아름답게 디자인을 할 수 있습니다.

img
이미지가 웹 페이지 안에서 하나의 중요한 요소로 자리를 잡고 있을 때 사용합니다.

HTML img태그사용과 CSS backgorund-image 사용해 img 넣는 방법 차이점.

img태그

이미지 로드가 실패했을 시 alt속성(이미지에 대한 정보 주는)을 활용해 어떤 이미지인지 정보를 줄 수 있는 의미가 부여된 Semantic Tag로 이미지에 대한 정보를 줄 수 있음. ( 검색엔진은 alt속성을 활용해 크롤링, 인덱싱 작업함. )

width, height 지정하지 않으면 원본 크기로 보임
width, height 중 하나만 지정해도 비율 맞춰 다른 속성 생성됨.
페이지 프린트 시 이미지 나오게 하는 경우

background-image
문서의 내용과는 별개로 디자인 목적을 위해 배경 이미지로 사용되는 경우에 사용한다. 문서의 일부분이 아닌 경우, 이미지가 없어도 문서를 읽고 이해하는데 전혀 지장이 없을 때 css <background-image>를 사용해서 이미지를 표기하는 것이 좋습니다.

이미지에 대한 정보를 담지 않음. ( 검색엔진 로봇이 크롤링, 인덱싱을 할 수 없음. )

background-size 속성을 통해 이미지 크기 쉽게 조작 가능

이미지 위에 텍스트 들어가는 경우

페이지 프린트시 이미지가 나오지 않게 하는 경우

div태그 활용할 경우, width, height지정하지 않으면 width:0, height:0. 크기를 지정해야 보임

크기에 맞추려면 background-size: 100% 작성

height 지정 안하면 아예 이미지가 보이지 않음

width지정 안하면 background-size: 100%;를 주더라도 비율이 유지 되지 않고, 가로는 다 보이지만 세로로 잘린 이미지 보임.

CSS sprites를 사용해 이미지 속도를 향상시킬 경우
다수의 img 태그를 통한 방법보다 CSS sprites 기법을 사용하면 이미지의 수정, 보관, 관리가 용이하고 미리 다른 아이콘 영역도 읽어들여 로딩 속도도 향상할 수 있습니다.

i
시각적으로만 이탤릭체로 변환이 되고 의미는 없습니다.

em
강조하는 이탤릭체입니다. 문장에서 정말 강조하고 싶은 이탤릭체가 있다면 사용합니다.

b
시각적으로만 볼드체를 만듭니다.

strong
정말 중요한 것, 강조하는 내용이 있을 때 사용합니다.

p
글의 단락에 사용됩니다.

address
사이트 제작자 정보, 연락처 정보를 담습니다.

<footer>
    <p>Copyright © 2018 tcpschool.co.,Ltd. All rights reserved.</p>
    <address>Contact webmaster for more information. 070-1234-5678</address>
</footer>

figure
이미지, 다이어그램, 사진 등 독립적인 콘텐츠를 표현합니다. <figcaption> 요소를 사용해 설명을 붙일 수 있습니다. 피규어, 설명, 콘텐츠는 하나의 단위로 참조됩니다.

figcaption
figure 요소 설명 캔션(caption) 정의

mark
HTML <mark> 요소는 현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트한 부분을 나타냅니다.

time
시간의 특정 지점 또는 구간, datetime과 같은 속성을 이용해 알림같은 기능 구현

details
주변 문맥에서 표시된 구절의 관련성 또는 중요성으로 인해 참조 또는 표기 목적으로 표시되거나 강조된 텍스트를 나타냅니다.
열림 상태 일 때만 내부 정보를 보여줍니다.

요약이나 레이블은 <summary> 요소를 통해 제공할 수 있습니다.

summary
details 요소에 대한 요약, 캡션 또는 범례를 지정합니다. summary 요소를 클릭하면 상위 details 요소의 상태가 열리고 닫힙니다.

<details>
    <summary>I have keys but no doors. I have space but no room. You can enter but can’t leave. What am I?</summary>
    A keyboard.
</details>

시맨틱 태그 장점

검색엔진 최적화 (SEO)

웹 사이트를 웹 검색 크롤러가 잘 읽어갈 수 있도록, 검색 결과에서 높은 랭킹을 얻을 수 있도록 페이지별로 태그과 콘텐츠를 최적화하는 것.

검색엔진은 로봇(robot)이라는 프로그램을 이용해 전 세계 웹 사이트 정보 수집함.(크롤링) 그리고 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 만들어 둔다.(이것을 인덱싱이라 하며 검색엔진의 인덱서가 이를 수행함.)

인덱스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보, 웹사이트의 HTML 코드 중 시맨틱 요소 만으로 인덱스 내용을 생성함.
즉, 의미론적 태그(요소)를 사용해야 인덱스에 저장이 되어 이용자들이 검색 했을 때 내 웹 사이트가 검색이 될 확률이 높음.