Intro.

세 번째 미션을 90% 완성한 시점에서 항상 공통되었던 첫 번째 요구사항이 있었다. 그건 바로

<header영역 마크업 시 시맥틱 요소를 활용해서 마크업 해 주세요>

라는 내용이였다.

사실 무슨 말인지 자세히 몰랐고 대략 header를 사용해서 마크업을 하라는 이야기로 이해를 했고 이해 한 대로 header로 마크업 했지만 시맨틱요소로 잘 했는지 아닌지에 대한 확신은 없었다.

그 부분에 대해 이해를 제대로 해야 과제를 제대로 수행 했는지 판단이 가능하지 않을까 하는 생각이 들었다.

그래서 시맨틱 요소를 활용한 마크업에 대해 정리하고자 한다.

시맨틱요소란?

시맨틱 요소는 의미있는 요소라는 뜻을 가지고 있다. 시맨틱 요소는 브라우저와 개발자 모두에게 그 요소의 의미를 명확하게 설명 해 주는 요소를 말한다.

비 시맨틱요소는 div나 span같이 그 내용에 대해 id나 calss로 정의 하지 않는 이상 내용이 정의 되지 않는 요소를 말한다.

시맨틱요소는 img나 table등과 같이 그 내용을 따로 정의 하지 않아도 분명히 정의 되는 요소를 말한다.

HTML5 의 시맨틱 요소들

• header

  문서 또는 섹션 헤더를 지정한다.

  소개 내용에 대한 컨테이너로 사용되어야 한다

  하나의 문서에 여러

  요소를 포함 할 수 있다.

  <article>
    <header>
      <h1>Internet Explorer 9</h1>
      <p><time pubdate datetime="2011-03-15"></time></p>
    </header>
    <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
    the  public on March 14, 2011 at 21:00 PDT.....</p>
  </article>

• nav

  탐색 링크(navigation links)의 집합
  을 정의한다

  탐색 링크의 큰 블록을 위한 것이나, 문서의 모든 링크

  요소 내부에 있어야 하는 것은 아니다.

  <nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
  </nav>

• section

  제목이 있는 주제를 갖는 내용들의 그룹 으로 정의 한다.

  <section>
    <h1>WWF</h1>
    <p>The World Wide Fund for Nature (WWF) is....</p>
  </section>

• article

  글/기사(article)는
  그자체로 의미를 가질 수 있어야 하며, 웹 사이트의 나머지 부분과는 독립적으로 배포 할 수 있어야한다.

  예시) 포럼 게시물, 블로그포스트, 뉴스기사, 논평

  <article>
    <h1>Internet Explorer 9</h1>
    <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
    the  public on March 14, 2011 at 21:00 PDT.....</p>
  </article>

• aside

  주요 내용을 제외한 내용의 정의
  하며 사이드 바 등에 배치된다.

  aside 컨텐츠는 주변 컨텐츠와 관련되어 있어야 한다.

  <p>My family and I visited The Epcot center this summer.</p>
  
  <aside>
    <h4>Epcot Center</h4>
    <p>The Epcot Center is a theme park in Disney World, Florida.</p>
  </aside>

• figure and figcaption

  • figure

    태그 같은 그림, 도표, 사진, 코드 샘플 등과 같이 자족적인(self-contained) 내용을 지정한다.

    요소의 내용이 주된 흐름과 관련되어 있지만, 그 위치는 독립적이며, 제거된 경우에도 그 문서의 흐름에 영향을 주지 않아야 한다.
    

  • figcaption

    figcaption 태그는 figure 요소에 대한 캡션을 정의한다.
    
    figcaption 요소는 figure 요소의 첫 번째 또는 마지막 내용으로 배치 할 수 있다.

    <figure>
      <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
      <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
    </figure>

• footer

  문서나 구역의 바닥 글을 지정한다

  바닥글(footer)은 일반적으로 등 문서의 작성자, 저작권 정보, 이용 약관에 대한 링크, 연락처 정보를 포함한다.

  하나의 문서에 여러 footer 요소를 포함 할 수 있다.

  <footer>
    <p>Posted by: Hege Refsnes</p>
    <p><time pubdate datetime="2012-03-01"></time></p>
  </footer>

시맨틱 웹이란?

시맨틱 웹은 의미론적인 웹이라는 뜻으로 문서의 의미에 맞게 구성된 웹을 칭한다.

내가 만든 웹 사이트를 검색 엔진에 좀더 잘 노출시키고 코드의 의도가 잘 보일 수 있도록 작성한 것이 바로 시맨틱 웹이다.

예를 들어 제목을 만들 경우

<div class=”title”>제목입니다.</div>

위와 같이 작성하는 것 보다는

<h1 class=”title”>제목입니다.</h1>

이렇게 작성 하게 된다면 h1태그로 인해서 대제목이라는 것을 바로 알 수가 있다.

왜냐하면 검색엔진은 대체로 h1요소 안에 있는 콘텐츠를 그 문서의 중요 제목으로 인식하고 인덱스에 포함 시킬 확률이 높기 때문이다.

이 처럼 의미를 가진HTML 요소 작성 방식인 시맥틱웹은 웹 최적화에 좋은 작성 방법이라고 한다.

ending.

이 글을 정리함으로써 시맨틱요소에 대한 개념을 정리 할 수있게 되었고

앞으로 레이아웃을 짜는 단계에서 어떤 요소를 어떤 태그로 정리 해서 구성해야 할지도 정리가 되었다.

프론트엔드로서 협력하는 사람들과 함께 보기 좋은 코드를 만들어가는데에 있어서 중요한 정보라고도 생각했다.

참고

https://xtring-dev.tistory.com/entry/HTML-시맨틱-웹Semantic-Web이란-HTML의-기본-중-기본?category=999981