시멘틱 웹과 시멘틱 태그

시멘틱 웹과 시멘틱 태그

시멘틱 웹

시맨틱 웹(Semantic Web)은 의미론적인 웹이란 뜻으로, 현재의 인터넷과 같은 분산환경에서
리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를
기계(컴퓨터)가 처리할 수 있는 온톨로지형태로 표현하고,
이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다.
웹의 창시자인 팀 버너스 리가 1998년 제안했고 현재W3C에 의해 표준화 작업이 진행중이다.

쉽게 생각하자면 컨텐츠의 내용에 맞는 적절한 태그로 HTML을 작성하여 단순한 코드의 구성이 아닌 의미를 가진 사이트라는 것을 알려 주는 것이다.

시멘틱 태그

시멘틱 태그는 '의미를 가진' 태그를 말한다. 즉 태그 자체가 콘텐츠의 의미를 명확히 설명해줄 수 있다.

시멘틱 태그의 종류

header

header 태그는 문서의 헤더를 의미하고 문서의 위에 위치한다.

nav

nav 태그는 문서의 네비게이션 링크들을 담는다. 주로 메뉴에 사용되고 위치는 자유롭게 사용 할 수 있다.

section

section 태그는 문서의 컨텐츠들을 주제별로 나눌때 사용한다.

article

article 태그는 문서의 실제 내용이 담긴다.
뉴스, 기사, 블로그 포스팅등이 포함된다.

aside

aside 태그는 본문 내용과 상관 없는것들이 들어간다
광고나 베너같은것이 예시.

footer

footer 태그는 문서의 맨 아래 위치한다.
블로그나 웹페이지 아래에 위치한 웹페이지 주인의 연락처, 이름 등등이 들어가는 곳이다.

외 여러 의미 있는 태그들이 있고 <div>,<span>와 같이 non-시멘틱 태그가 있다.

시멘틱 태그 사용의 장점

• 검색 엔진에서 웹문서의 내용 검색을 할 수 있게 해준다.
• 구조 파악이 쉬운 웹페이지를 만들 수 있다.
• 웹 보조기구에서 웹문서 정확하게 판독할 수 있게 해준다.
• 동일한 문서 표현이 가능하다.

---

<!--과거 웹페이지는 화면을 나눌 때 div 태그를 통해 구역을 나누어 개발자가 사이트의 구조를 한눈에 파악하기 어려운 구조이고 검색엔진이 사이트를 정확하게 파악하지 못해 검색 결과의 정확도도 떨어졌다.-->
<div id="hearder">

</div>
<div id="nav">

</div>
<div id="aside">

</div>
<div id="section">

    <div id="article">

    </div>

</div>

<div id="footer">

</div>

<!-- 위의 예제와 같이 의미 없는 태그를 쓰기보다는 의미를 가진 태그(시멘틱 태그)를 사용하여 구조를 쉽게 파악할 수 있도록 도와준다.-->
<header>
</header>

<nav>
</nav>

<aside>
</aside>

<section>

    <article>
    </article>
</section>

<footer>
</footer>

---

question!

사이트에 이미지를 넣는 방법은 태그를 사용하는 것과 태그에 background-image 속성을 추가하는 것이 있다.

두가지의 차이점은 무엇인가?

-> img 태그를 사용하는 방법과 css 속성으로 처리하는 것은 시각적으로는 비슷하다고 볼 수 있으나 구조 자체가 다르다고 볼 수 있다.

웹 페이지의 메인 콘텐츠가 되는 정보와 밀접한 관련이 있는 이미지를 표시하기 위해서는 시멘틱 태그인 img 태그를 사용해 여러 가지 속성을 부여 할 수 있으며 단순 배경 이미지나 콘텐츠와 밀접한 관련이 없는 경우는 background-image 속성을 사용한다.

참고 : https://ko.wikipedia.org/wiki/%EC%8B%9C%EB%A7%A8%ED%8B%B1_%EC%9B%B9#:~:text=%EC%8B%9C%EB%A7%A8%ED%8B%B1%20%EC%9B%B9