[HTML] HTML5 시맨틱 태그 (Semantic Tag)

Semantic Tag란?

HTML5의 큰 특징 중 하나는 시맨틱 태그(Semantic Tag)다.
시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공하게 된다.

기존에 사용하던 div 태그는 non-semantic Tag라 할 수 있다.
table, article 등의 태그는 semantic Tag라 할 수 있다.

non-semantic Tag

주로 div로 레이아웃을 표현하며, class와 id로 스타일을 준다.

<div class="header">
	<div class="navi"></div>
	<div class="content"></div>
</div>

semantic Tag

의미있는 태그를 사용하여 검색엔진이 태그를 분석하여 유추할 수 있다.

<header></header>
<nav></nav>
<article>
	<section></section>
</article>
<aside></aside>
<footer></footer>

시맨틱 태그의 종류

header	화면 상단에 위치하여 보통 로고, 로그인, 회원가입 등을 포함한다
footer	화면 하단에 위치하여 보통 이메일, 저작권 표시 등을 포함한다
nav	보통 header 영역의 아래쪽에 위치하며 메뉴를 표현한다
article	하나의 주제에 대해서 그 내용에 대해 설명할 때 사용한다 (ex 뉴스기사, 블로그 글)
section	하나의 주제를 그룹화 할 때 사용한다 (ex 뉴스 기사의 제목)
aside	흔히 사이드바라고 불리는 곳으로 보통 광고, 검색, 카테고리 등을 표현한다

article과 section은 사용 용도가 비슷함. 회사마다 상이할 수 있다.

시맨틱 태그의 장점

시맨틱 태그를 사용함에 따라 오는 이점에는 크게 세 가지가 존재한다.

이 세 가지는 모두 인터넷 전반에 걸쳐 웹사이트의 일관성을 향상시키는 것과 관련이 있다.

Non-Semantic HTML 태그는 더 모호하며 해석하는 데 더 많은 리소스가 필요하다.

개발자가 의미론적으로 작성할 때 브라우저가 식별할 수 있는 요소에 대해 표준화된 이름을 사용하므로 인터넷에서 HTML의 상호 운용성이 향상된다.

1) 접근성 향상

시맨틱 태그를 사용하면 페이지의 접근성이 향상된다.

HTML 시맨틱 태그 요소는 사람들이 웹페이지를 탐색하고 페이지와 상호 작용하는 데 도움이 되는 화면 판독기, 키보드 또는 음성 명령과 같은 보조 기술에 대한 유용한 정보와 단서를 제공할 수 있다.
예를 들어, <nav>의 경우, 콘텐츠에 탐색 링크가 포함되어 있음을 나타낼 수 있고, <article>의 경우에는 독립형 콘텐츠가 포함되어 있음을 나타낼 수 있다.

접근성 측면에서 시맨틱 태그가 중요한 또 다른 이유는 스크린 리더 사용자에게 큰 이점을 주기 때문이다.

우리는 신체적, 인지적 장애가 있는 사람들을 포함하여 모든 사람에게 원활하고 원활한 경험을 보장하고자 한다.
또한, 시맨틱 태그 요소는 웹페이지의 다양한 섹션을 명확하게 정의하고 웹 전체의 일관성을 유지함으로써 사용자 경험과 만족도 또한 향상시킬 수 있다.

2) SEO (검색엔진최적화) 향상

SEO (검색엔진최적화)는 Google과 같은 검색엔진 상에서 웹사이트 순위에 영향을 미친다.

시맨틱 태그를 사용하면 검색엔진과 사용자에게 웹페이지가 더 눈에 띄고 매력적으로 보이게 만들 수 있다.

시맨틱 태그는 관련 키워드와 문구에 대해 웹페이지를 최적화하는 데 도움이 되며, 이를 통해 검색결과 상에서 웹 사이트 노출 순위를 높이고 더 많은 트래픽을 유도할 수 있다.

더불어 웹페이지의 성능과 속도를 향상시켜 이탈률을 줄이고 전환율을 높이는 데에도 도움이 될 수 있다.

또한, 검색엔진에 풍부하고 구조화된 데이터를 제공할 수 있으며, 이는 더욱 매력적이고 유익한 스니펫과 결과를 만들어 낼 수 있다.

3) 가독성 향상

시맨틱 태그를 사용하면 웹페이지의 가독성 또한 향상된다.
즉, 사람들이 콘텐츠를 더 쉽고 빠르게 이해하고 소비할 수 있게 된다. 시맨틱 태그는 콘텐츠의 명확하고 일관된 흐름과 구조를 만드는데 도움이 된다.

또한, 시맨틱 태그는 제목과 키워드, 요약 등 콘텐츠의 가장 중요하고 관련성 높은 부분을 강조할 때 도움이 된다.

가독성 측면에서 시맨틱 태그가 중요한 이유는 불필요하거나 중복되는 코드를 피하는 데 도움이 된다는 것이다. 이를 통해 웹페이지를 더 빠르고 효율적으로 만들 수 있다.

---

header

사이트의 헤더 부분에 사용된다.

<header>
  <h1><a href="/">LOGO</a>
  <nav>
    <h2>글로벌 네비게이션 영역</h2>
    <ul>
      <li><a href="#">menu 01</a></li>
      <li><a href="#">menu 01</a></li>
      <li><a href="#">menu 01</a></li>
      <li><a href="#">menu 01</a></li>
      <li><a href="#">menu 01</a></li>
    </ul>
  </nav>
</header>

hgroup

제목을 묶어 표현하는데 사용한다.

<hgroup>
	<h1>HTML5의 소개</h1>
	<h2>HTML5의 elements에는 다음의 것들이 있다.</h2>
</hgroup>

section

책에서 소제목을 붙여놓는 것을 하나의 섹션화 했다고 하는데
그와 같이 문단 등의 컨텐츠를 하나의 그룹으로 만드는 역할을 한다.

section은 재배포 되어서는 안될 컨텐츠를 지정할 때도 사용. 단순 스타일을 적용하기 위해서는 div를 사용하고 맥락이 비슷한 내용을 그룹핑의 요소로 묶을때만 section을 사용한다.

<section>
  <h3>HTML5 시멘틱 마크업</h3>
  <p>시멘틱 마크업은 의미가 잘 전달 되도록 HTML을 작성하는 것을 말한다.</p>
</section>

nav

nav라는 태그를 사용하면 문서 어디서든 네비게이션이라는 요소를 빨리 파악할 수 있고 구조적으로도 안정적이다.
nav태그는 문서 어디에도 존재 가능한 위치 독립적인 요소다.
어떤 요소 안에도, 독립적으로 위치할 수 있다.

<nav>
  <h2>네비게이션 영역</h2>
  <ul>
    <li>
      <a href="#">1depth menu01</a>
      <ul>
        <li><a href="#">2depth menu01</a></li>
        <li><a href="#">2depth menu02</a></li>
        <li><a href="#">2depth menu03</a></li>
      </ul>
    </li>
    <li><a href="#">1depth menu02</a></li>
    <li><a href="#">1depth menu03</a></li>
  </ul>
</nav>

article

article의 사전적 의미가 ‘신문 또는 잡지의 기사’ 인 것처럼 웹상의 실제 내용을 말한다.
article은 신문기사처럼 문단화 되어 독립적인 문서로서 배포 가능한 문단을 말한다. 검색엔진은 배포 가능한 컨텐츠로 인식한다.

<article>
  <p>기업이 추구하는 가치에 도달하기 위해선 먼저 올바른 전략을 설정하고, 
  이에 부합된 사업전략과 기능전략을 유기적인 관계 속에서 일관되게 추진해야 합니다.</p>
  <section>
    <h1>스피드경영</h1>
    <p>스피드경영에 있어 가장 중요한 것은 ‘Time Line’의 개념입니다. 
    조직 내에서 속도를 저하시키는 최대의 장애 요인인 불분명한 지시와 
    초점 없는 결정, 단선 커뮤니케이션 등을 지양해야 합니다. 
    빠르게 변화하는 경쟁 사회에서 속도는 승자와 패자를 가르는 유일한 변수이기 때문입니다. 
    </p>
  </section>
  <section>
    <h1>변화경영</h1>
    <p>기업환경은 끊임없이 변화하고 있습니다. 
    단지 어디에서 어떻게 그 변화가 영향을 미치고 있는지를 신속하게 
    인식하지 못하는 것 뿐입니다.
    </p>
  </section>
</article>

aside

실제 내용이 담겨지는 영역 외에 기타 부수적인 내용을 담는 영역에 사용된다. 최근글 보기, 다녀간 블로거 보기, 최근 댓글이 달린 글 등 사이드바에 담길만한 내용 등을 담는 곳에 사용된다.

말 그대로 필수 요소가 아니기 때문에 사용하지 않아도 상관 없다.

<section>
  <h1>현대카드 스탬프가맹점이란?</h1>
  <p>스탬프가맹점에서 소정금액 이상 결제 시 자동으로 스탬프가 적립되고, 
  3회 적립시 쿠폰이 발행되는 새로운 신용카드 서비스입니다.
  </p>
</section>
<section>
  <h1>현대카드 스탬프가맹점 이용방법</h1>
  <ul>
    <li>스탬프가맹점에서 소정금액 이상 결제합니다.</li> 
    <li>휴대폰 SMS를 통해 스탬프 적립내역 및 쿠폰내역이 통보됩니다.</li>
  </ul>
</section>
<aside>
	<img src="images/side.jpg" alt="개인정보안심 서비스 신청/문의:1588-3483" />
</aside>

footer

관습적으로 사용되어진 위치를 나타내던 footer가 직접적인 태그명으로 지정되었다.
footer 태그 안에는 어떤 요소든 포함할 수 있다.

• 섹션의 푸터를 나타내고자 저자나 저작권 등을 포함

• 관련문서로의 링크, 저작권 정보, 작성날짜 등을 나타내기도 함.

• 저자나 편집자의 연락처는 footer 안에 address요소로 표현

• 대부분 섹션의 마지막에 위치하지만 반드시 그럴 필요는 없다.

<footer>
	<address>서울시 영등포구 의사당대로 3 현대캐피탈 빌딩 대표이사 정태영</address>
	<p>CopyRight &copy; MRI.inc. All Right Reserved.</p>
	<ul>
    <li><a href="#"><img src="images/twitter.jpg" alt="트위터" /></a></li>
    <li><a href="#"><img src="images/facebook.jpg" alt="페이스북" /></a></li>
	</ul>
</footer>