Semantic Web & Tag

Chipmunk_jeong·2021년 9월 28일
TIL
0

TIL

목록 보기
61/62
post-thumbnail

시맨틱 웹(Semantic Web)

의미론적인 웹이라고 해석할 수 있을까?

<body>
  <div></div>

  <div></div>

  <div>
    <div></div>
    <div></div>
  </div>

  <div></div>
</body>

위의 코드를 보면 요소들이 어떠한 의미를 가지는지 알 수 있을까?
시맨틱적인 웹을 작성하려면 요소의 의미를 고려하여 구조를 설계하고 코드를 작성해야한다.

<body>
  <header></header>
 
  <nav></nav>
 
  <main>
    <article></article>
    <aside></aside>
  </main>
 
  <footer></footer>
</body>

시멘틱 태그를 이용하면 위처럼 훨씬 가독성이 좋아진다.
이 처럼 보는것만으로도 구조를 파악할 수 있는 이런 코드들이 시맨틱 웹을 만들어갈 수 있다.

의미론적인 마크업을 이용한다면

  • 검색 엔진에 최적화가 가능하다
  • 시각 장애자에게 스크린리더로 페이지를 탐색할 때 의미론적인 마크업을 잘 확인할 수 있어 웹 접근성이 좋아진다.
  • 위의 예시처럼 코드의 가독성이 좋아진다.
  • 태그안에 데이터를 제한 및 조절할 수 있다.

위와 같은 이점이 있으니 의미있게 마크업을 하는것이 중요하다.
의미를 가진 구조를 나타내는 태그는 무엇이 있을까?


구조를 나타내는 요소(태그)

<header>요소는 <div>와 같은 블럭 컨테이너로 동작을 하지만, 내부에 들어가는 정보가 특정한 의미를 가지고 있다.
소개 및 탐색에 도움을 주는 콘텐츠를 나타내는데, 예제로 제목, 로고, 검색폼 등의 요소가 포함 된다.
그리고 Header를 웹페이지 소개를 위해 사용할때는 한번만 사용해야한다.

페이지 제목으로 사용

<header>
  <h1> 메인 페이지 </h1>
  <p> 이 곳은 메인 페이지 입니다 </p>
</header>

글 제목으로 사용

<article>
  <header>
    <h2>북극곰은 왜 북극곰인가?</h2>
    <p>북극곰의 모든것을 알아보자</p>
  </header>
  <p> 살기 힘든 환경의 북극. 거기서 생존하는 곰! 대단해! </p>
</article>

<footer>요소는 가장 가까운 구획 컨텐츠나 구획 루트의 푸터를 나타낸다.
일반적으로 구획의 작성자나 저작권 정보또는 관련 문서 등의 내용을 나타낸다.
footer태그는 스크린 리더에서 푸터의 랜드마크 역활을 표현하지 않는 문제가 있어 role="contentinfo"를 추가로 작성해야 한다.

예제

<footer>
  Somecopyright info or perhaps some author
  info for an &lt;article&gt;?
</footer>
<footer>
  <address>
    <a href="mailto:test@test.test">test@test.com</a><br>
    <a href="tel:+821012341234">010-1234-1234</a>
  </address>
</footer>

<nav>요소는 페이지 이동 링크 및 현재 페이지에서 이동 및 탐색을 편하게 해준다.
웹 상단의 메뉴라던가 목차 또는 현재페이지 색인 같은것들이 포함된다.
하나의 nav는 사이트 전체를 탐색 및 이동, 다른 하나의 nav는 현재 페이지에서 탐색 및 색인으로 사용하는 등, 여러개의 nav를 하나의 문서에서 가질 수 있다.

예제

<nav>
  <ul>
    <li><a href="#">홈</a></li>
    <li><a href="#">소개</a></li>
    <li><a href="#">컨텐츠</a></li>
  </ul>
</nav>

Aside

<aside>태그는 주요 내용과 간접적으로 연관된부분을 나타낸다.
주로 웹의 광고나 사이드바에 오는 컨텐츠를 표현한다.
또는 글에서 간접적으로 연결되어있는 구문을 따로 쓸때도 사용한다.

예제

<article>
  <p>
    디즈니 만화영화 <em>인어 공주</em>는
    1989년 처음 개봉했습니다.
  </p>
  <aside>
    인어 공주는 첫 개봉 당시 8700만불의 흥행을 기록했습니다.
  </aside>
  <p>
    영화에 대한 정보...
  </p>
</article>

Main

<main>요소는 전체 문서의 주요 콘텐츠를 나타낸다. 핵심 주제나 핵심 기능에 직접적으로 연결됐거나 확장하는 컨텐츠로 이루어 진다. 그래서 <body>태그 밑에 한번만 사용할 수 있다.
main요소의 컨텐츠는 유일한 내용이어야 한다. 사이드바나 검색바 저작권 정보 메뉴 등 여러 문서에 걸쳐 반복되는 컨텐츠는 포함해선 안된다.
만약에 검색기능이 메인인 사이트라면 검색폼을 메인에 둬도 괜찮다.
그리고 해당 요소는 인터넷 익스플로러에서 지원이 안된다.

예제

<main>
  <h1>Apples</h1>
  <p>The apple is the pomaceous fruit of the apple tree.</p>

  <article>
    <h2>Red Delicious</h2>
    <p>These bright red apples are the most common found in many
    supermarkets.</p>
    <p>... </p>
    <p>... </p>
  </article>

  <article>
    <h2>Granny Smith</h2>
    <p>These juicy, green apples make a great filling for
    apple pies.</p>
    <p>... </p>
    <p>... </p>
  </article>

</main>

Article

<article>요소는 문서, 페이지, 애플리케이션 또는 사이트 안에서 독립적으로 구분하여 재사용 가능한구획을 표현할 수 있다. 게시판, 기사, 블로그 글, 뉴스 등이 여기에 해당된다.
하나의 문서는 여러개의 article을 가질 수 있다.
각각의 article은 색인을 할 수 있는 수단이 필요한데, <h1>~<h6>요소를 자식으로 포함한다.
article 안에 article도 가능하며 외부의 article의 내용은 외부에만 관련이 되어야하고 내부의 article은 내부적으로 독립적이여야 한다.

예제

<article>
  <h2> 특종 ! 오징어 게임이 전세계적으로 인기! </h2>
  <p> 
    넷플릭스에서 서비스되고 있는 오징어게임이라는 드라마가 전 세계적으로 인기를 끌고있다.
    한국에서는 보기 힘들었던 스토리를 구사하며 흥미를 모으는데 성공하였다.
  </p>
  <footer>
    <p>
      Posted on <time datetime="2015-05-15 19:00">May 15</time> by Staff.
    </p>
  </footer>
</article>

Section

<section>요소 또한 문서의 독립적인 구획을 나타낸다. 적합한 의미를가진 요소가 없을때 사용하는것이 보통이며 <article>처럼 완전 독립적으로 나가도 괜찮을때는 article을 사용하지만 그것이 아니라면 section을 사용하면된다.

예제

<article>
  <h2> 맥북 프로 13인치</h2>
 
  <section>
    <h3> 소개 </he>
    이 제품은 최강의 라인업 프로!라인업 중 하나이며 ...(생략)...
  </section>
 
  <section>
    <h3> 성능 </he>
    16코어 ...(생략)...
  </section>
 
</article>
profile
Chipmunk_jeong
Web Developer
이전 포스트

웹 표준·웹 접근성·웹 호환성을 알아보자

다음 포스트

vim을 알아보자

0개의 댓글