HTML 시맨틱 태그의 모든 것 Semantic Tag

HTML 시맨틱 태그 뜻 

시맨틱 태그 (Semantic tag)의 의미는 '의미를 가지고 있는 tag'를 의미합니다. Semantic을 네이버 영어 사전에 찾아봤을 때, Semantic은 '의미의, 의미론적인' 의미를 가지고 있으니, 시맨틱 태그는 의미가 있는 태그를 말합니다. 여기서 의미라는 것은 태그가 어떤 내용을 가지고 있는지 알려준다는 의미입니다. 검색이 중요한 시대에서 브라우저가 검색 내용을 찾을 때, 태그를 보고 내용이 중요한지 아닌지 구분할 수 있게 해주는 지표라고 생각하면 됩니다. 

---

시맨틱 태그 종류 

시맨틱 요소(elements) 

• article
• aside
• details
• figcaption
• figure
• footer
• header
• main
• mark
• nav
• section
• summary

semantic tag

각 요소들은 웹 페이지를 구성합니다.

---

article 태그 

article독립적인 글을 다루는 데 사용하는 태그입니다. 

<article>
<h2>Hello H2</h2>
<p>Good day!</p>
</article>

article태그는 독립적인 하나의 내용을 의미하고, section태그는 문서의 부분을 의미합니다. HTML 페이지에서 article태그를 포함하는 section태그도 볼 수 있고, section태그를 포함하는 article 태그도 볼 수 있습니다. 

---

aside 태그 

aside 옆에 위치하는 콘텐츠를 담는 태그입니다. 주로 문서에서 사이드바를 놓기 위해 사용하는 태그입니다. 

<aside>
<h3>h3 tag in aside tag</h3>
<p>It's a good day</p>
</aside>

---

details 태그 

details사용자가 클릭하여 상세보기를 열 수 있는 태그입니다. 사용자와 상호작용 가능한 태그이며, 사용자는 열고 닫을 수 있습니다. 기본적으로 닫은 상태에 있고, 클릭하면 내용이 보이면서 확장되는 성질을 가집니다. 

<details>
  <summary>What is it?</summary>
  <p>This is details tag example.</p>
</details>

 

before

 

after

---

figure figcaption 태그 

figcaption문서에서 사진의 설명을 추가하기 위해 사용되며, 주로 figure 태그와 함께 사용됩니다. Caption 뜻이 이미지에 대한 간략한 설명이니 figcaption은 figure에 대한 간략한 설명이라는 뜻이 됩니다. 

<figure>
  <img src='picture.jpg'>
  <figcaption>This is figcaption tag</figcaption>
</figure>

---

footer 태그 

footer꼬리말을 의미하는 footer는 문서의 아래쪽에 위치합니다. footer 요소에는 저작권 정보, 연락처, 사이트맵, 관련된 링크 등을 적습니다.

<footer>
  <p>Author: Week-book</p>
</footer>

---

header 태그 

headerrehader 태그는 문서에서 맨 윗부분에 위치하는 태그입니다. head 태그나, 로고, 관련 링크를 가지는 태그입니다. 

<header>
 <h1>this is header tag example</h1>
</header>

---

main 태그 

main메인 내용을 담는 태그입니다. 메인 안에 article 태그를 여러 개 사용하여 글을 구성할 수 있습니다. main은 문서에서 유일해야 하고, article, aside, footer, header, nav 요소의 자식이 되면 안 됩니다. 

<main>
 <h1>Week-book post</h1>
 
 <article>
   <h2>Sunday</h2>
   <p>tomorrow is monday</p>
 </article>
 
 <article>
   <h2>Monday</h2>
   <p>yesterday was sunday</p>
 </article>
</main>

---

mark 태그 

mark글을 강조해주는 태그입니다. 

<p>Woo...tomorrow is <mark>sunday</mark>. It's not good.</p>

Woo...tomorrow is sunday. It's not good.

---

nav 태그 

nav 내비게이션 링크 모음을 의미하는 태그입니다. 

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a>
</nav>

---

section 태그 

section섹션은 문서의 부분을 의미하는 태그입니다. 

 

<section>
  <h2>Sunday</h2>
  <p>Sunday is a good day.really.</p>
</section>

summary 태그 

summary태그는 details태그와 함께 쓰이는 태그이며, details에서 보이는 부분을 담당하는 태그입니다.

summary 태그는 details태그의 첫 번째 자식 태그여야 합니다. 

---

hr 태그 

가로줄 태그입니다. HTML 문서에서 주제(thematic)의 구분이 필요할 때 사용하는 태그이며, HTML에서 콘텐츠를 구분하기 위해 가장 많이 사용되는 태그입니다. 

HR Tag

Semantic 요소가 아닌 것

div 태그와 span 태그는 semantic 요소가 아닙니다. 콘텐츠에 대한 내용을 설명하는 태그가 아니기 때문입니다.