html5의 시맨틱 태그(Semantic Tag)

html5의 시맨틱 태그(Semantic Tag) updated_at: 2024-07-05 14:43

시맨틱 태그(Semantic Tag)

시멘틱이란 언어에서 문장이나 단어의 의미를 연구하는 것을 말합니다.
시멘틱 요소 = 요소의 의미 라고도 할 수 있습니다.

시멘틱태그(요소)란

시멘틱태그는 개발자와 브라우저에게 해당 태그가 쓰인 용도를 명확하게 전달해줍니다.
예를들어 시멘틱태그가 아닌 <div><span>같은 경우는 해당 내용에 대한 어떠한 정보도 전달해주지 않습니다.
하지만 <form>,<table>,<article>같은 시멘틱태그들은 해당 내용의 의미를 정확하게 전달할 수 있습니다.

시멘틱태그를 사용해야 하는 이유

기존 HTML4에서 개발자들은 태그에 직접 클래스나 아이디로 이름을 부여해왔습니다. header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav같은 것들을 말이죠.
위와 같은 작업방식은 검색엔진이 여러분의 웹페이지 컨텐츠를 검색하기 불가능하게 만들었습니다. 하지만 이제는 HTML5의 시멘택 태그를 (<header>,<footer>,<nav>,<section>,<article>) 이용해서 해당 작업이 보다 수월해 졌습니다.
W3C에서 제공하는 시멘틱웹 문서에 따르면 "시멘틱 태그를 이용하면, 애플리케이션, 기업 및 커뮤니티간에 데이터를 서로 공유하고 재사용 할수 있다고" 말하고 있습니다.

브라우저 지원

HTML5 시멘틱태그는 거의 모든 최신 브라우저들에서 동작합니다.
추가로 오래된 구형 브라우저에도 해당 시멘틱태그가 어떻게 읽어야 할지를 지정해줄 수도 있습니다.

크롬 익스플로러 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원

HTML5의 새로운 시멘틱태그

HTML5 Element Flowchart

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

HTML5에서이 시멘틱 태그 정리

<article>

<article> 태그는 그 컨텐츠 자체로 독립적인 내용을 표현할때 쓰입니다.

  1. 포럼관련 포스트
  2. 블로그 포스트
  3. 뉴스기사

예제

<article>
  <h1>What Does WWF Do?</h1>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

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>

details

보이거나 숨길 수 있는 추가적인 정보

figure

일러스트나,다이어그램, 사진, 코드등과 같이 독립적인 컨텐츠 정의

figcaption

figure요소에 캡션정의 이미지의 비주얼적인 설명글을 적용하기 위함입니다. HTML5에서 이미지와 그 이미지에 대한 캡션은

태그안에서 그룹으로 묶어줄 수 있습니다.

예제

<figure>

  <img src="pic_trulli.jpg" alt="Trulli">

  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>

</figure>

img태그는 이미지를 정의하고, figcaption태그는 해당 이미지의 비주얼적인 설명을 나타냅니다.

footer

문서에서 하단부분의 영역을 지정하는 태그입니다.
<footer>태그는 해당 내용에 대한 정보를 포함하고 있어야합니다.
일반적으로 푸터에는 문서의 저자, 저작권에 대한 정보 약관, 컨택 정보등을 표시합니다.
마찬가지로 하나의 문서안에 여러개의 <footer>태그가 올 수도 있습니다.

예제

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p>Contact information: <a href="mailto:[email protected]">
  [email protected]</a>.</p>
</footer>

header

문서의 상단영역 <header>태그는 문서나 섹션의 머리말 부분을 지칭합니다.
<header>태그는 소개내용에 해당하는 컨첸트의 그릇으로써 사용되야 합니다.
하나의 문서에 여러개의 <header>태그도 사용가능합니다.
아래 예제는 하나의 기사안에 적절하게 머리말부분을 적용한 사례입니다.

예제

<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

main

문서의 주요본문내용

mark

중요표시된 텍스트

nav

네비게이션 링크를 지정할때 쓰입니다. 주로 메뉴영역에 사용 <ㅠㄱ> 문서안의 모든 링크가 nav태그로 감싸야 한다는 의미는 아닙니다. 보통은 문서에서 중요한 링크정보만을 nav태그로 감싸줍니다.

예제

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

<section>

<section> 태그는 문서에서 특정 구역을 나타낼때 쓰입니다.
W3C에서 제공하는 HTML5관련 문서에 따르면, 해당 태그는 제목과 컨텐츠로 구성되어진 의미있는 그룹덩어리를 표현할때 쓰인다고 말하고 있습니다.
일반적으로 홈페이지는 소개, 본문, 연락처정보등의 섹션으로 분할될 수 있습니다.

예제

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

section vs article

<article>태그는 컨텐츠 자체로 자기 자신이 독립적인 요소를 나타낼때 쓰입니다.
그리고 <section>태그는 문서에서 특정 구역을 정의할때 쓰입니다.

summary

detail의 제목부분

time

날짜와 시간을 정의

평점을 남겨주세요
평점 : 5.0
총 투표수 : 1