시메틱 웹은 사전적인 의미로는
기계가 이해할 수 있는 형태로 제작된 웹을 의미한다.
"왜 그런 형태로 웹을 제작해야 하는건가?" 에 대해 알아보자.
1. Sematic Web
: 웹에 존재하는 수많은 웹페이지들에 아무렇게나 구분 없이 흩어져 있는 정보가 아닌 Metadata 로써의 의미를 부여하여 컴퓨터가 그 중요도와 의미를 구분을 할 수 있게 만들어진 웹페이지이다.
아래 태그를 예시로 한번 보자.
<!-- 1번 예시 -->
<body>전체 코드</body>
<!-- 2번 예시 -->
<body>
<header>
<nav>상단부 네이게이션바 코드</nav>
</header>
<section>본문 첫번째 내용 코드</section>
<section>본문 두번째 내용 코드</section>
<footer>하단 링크 코드</footer>
</body>
- 위와 같이
header, section, footer태그로써 어떠한 기능도 없다. - 하지만 페이지가 어떤 구조를 가지고 있는지, 어떤 용도인지 알아보기 쉽다.
- 또한 코드의 가독성을 높여 유지보수를 손쉽게 할 수 있다.
Question 1 : 나만 볼건데 굳이?
- 물론 혼자 개발하고 서비스하는 환경이라면 이런 생각이 들 수 있다.
그러나 시메틱 웹(Sematic Web)의 주요 기능은 우리의 가독성을 높여주는 것보다 더 중요한 것이 있다.
기계(컴퓨터)가 그 코드를 어떻게 분류하고 의미를 파악할 수 있는지에도 중요도를 둔다.
Question 2 : 왜 귀찮게 컴퓨터를 위해?
- 나만의 일기장이 아니라면, 나의 웹페이지를 최대한 많은 사람에게 노출되는 것이 중요하다.
일기장이라면 굳이 웹으로??
이때 우리의 웹페이지를 분석하고 분류해서 최대한 노출 시켜주는 역할을 컴퓨터가 우리를 대신해서 해주고 있다.
따라서 컴퓨터를 위해 하는 것이 아니라 내 웹페이지를 더 많이 노출 시키기 위해 하는 것이다.
Question 3 : 어떻게 내 웹페이지를 노출시키나?
- 우리에겐 이미 구글, 네이버, 다음과 같은 훌륭한 검색엔진이 있다.
이런 검색엔진은 매일 웹사이트 정보를 대량으로 수집하여 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스를 만들어 둔다. 이때 수집하는 자료가 결국 HTML 태그인 것이다.
HTML태그를 잘 작성해둔다면 내 웹페이지의 노출을 자연스럽게 올릴 수 있겠지?
2. Sematic Tag
: 이제 이런 시메틱 웹을 태그로 어떻게 만드는지 알아보자.
<div>Hello World</div> <!-- output : Hello World -->
<header>Hello World</header> <!-- output : Hello World -->- 위에서처럼 둘의 반환 값은 동일하다.
- 하지만 검색엔진이 크롤링할때 첫번째 줄은
<div>로 인해블럭 하나에 해당할 것이지만 두번째 줄은<header>가 가진중요도 : 최상위 레벨이라는 의미를 부여하게 될 것이다.
1) non Semantic & Semantic
(1) non semantic elements
<div>.<span>과 같은 태그들
어떤 의미도 담고 있지 않다.
(2) semantic elements
<header>,<table>,<section>과 같은 태그들
의미를 부여할 수 있다.
2) Semantic Tag 종류
<!-- 신문사 페이지를 만들어보자 -->
<body>
<header>
<nav>상단 메뉴바 형태</nav>
</header>
<!-- 정치 기사 -->
<section>
<article>블라블라</article>
<aside>위 설명은 블라블라</aside>
</section>
<!-- 연예 기사 -->
<section>
<article>블라블라</article>
<aside>위 설명은 블라블라</aside>
</section>
<!-- 스포츠 기사 -->
<section>
<figure>
<img src="overwatch.jpg">
<figcaption>This picture shows characters from Overwatch.</figcaption>
</figure>
</section>
<footer>회사소개, 약관, 카피라이트</footer>
</body>(1) header
<header>태그는 head 와는 다른 것이다.
<head>는<body>위에 작성되어 탭의 제목등을 표현하기 위함이고
<header>는 주로 머리말 상단바 등을 표현하기 위해<body>내부에 작성되는 태그이다.
(2) nav
- 콘텐츠를 담고 있는 문서를 사이트간에 서로 연결하는 링크 역할을 담당한다.
주로 메뉴에 사용되고 위치에 영향을 받지 않아 어디에서든 사용 가능하다.
(3) section
<body>영역을 주로<header><section><footer>로 구분한다.
그중 섹션은 본문에 해당하여 그 본문 콘텐츠를 구분하는 역할을 한다.
(4) article
<section>이 본문 콘텐츠를 구분하였다면 아티클은 섹션 내부에서 그 콘텐츠의 실질적인 내용을 넣는다.
(5) aside
- 본문의 부가적인 설명을 넣으며 해당하는 링크나 광고를 넣기도 한다.
(6) figure
<article>,<aside>로 본문 내용을 설명했다면 이미지는 어떻게 보여줄까.
<figure>태그를 사용하여 내부에<img>를 담는다.
(7) figcaption
- 이미지에 대한 부가적인 설명은
<figure>내부에<figcaption>을 이용하여 작성한다.
(8) footer
- 화면 구조 중 맨 아래 위치하며 주로 회사소개나 카피라이트 문구, 연결 링크 페이지 등의 정보가 들어간다.
.jpg)
"꾸준한 삽질과 우연한 성공"