[HTML] 시맨틱 태그 정리

시맨틱 요소는 요소에 대한 의미가 정확하게 드러도록 정의할 수 있다.

비의미적 요소의 예 : <div> 나 <span> 등등
의미적 요소의 예 : <form>, <table> 및 <article> 등등

HTML에는 웹 페이지의 다른 부분을 정의하는 데 사용할 수 있는 몇 가지 의미 요소가 있다.

[출처 : W3Schools ]

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

뭐 이런 것들이 있는데, 이 중 몇 가지 정도 정리해볼려 한다.

---

📝 <section> 태그

<section> 태그는 문서의 섹션을 정의한다. 제목이 있는 주제별 콘텐츠 그룹정도를 나눈다 생각한다.
예를 들어, 웹 페이지의 일반적으로, 소개, 내용 및 연락처 정보를 위한 섹션으로 나눈다.

📢 예시

<section>
  <h1>section 1</h1>
  <p>section 1 : 소개 ... </p>
</section>

<section>
  <h1>section 2</h1>
  <p>section 2 : 내용 ... </p>
</section>

🔊 결과

section 1

section 1 : 소개 ...

section 2

section 2 : 내용 ...

---

📝 <article> 태그

<article> 태그는 독립적인 자체에 포함된 내용을 담당한다.
말 그대로, 기사는 그 자체로 의미가 있어야하며, 나머지 웹 사이트와 독립적으로 배포 할 수 있어야 한다.

<article> 요소를 사용할 수 있는 위치의 예

• 포럼 게시물
• 블로그 게시물
• 신문 기사

📢 예시

<article>
  <h2>기사 1</h2>
  <p>김 아무개씨가 오늘 아침 식사를 했다고 합니다. 아주 맛있었다고 합니다.</p>
</article>

<article>
  <h2>기사 2</h2>
  <p>김 아무개씨가 오늘 점심 식사를 했다고 합니다. 아주 별로였다고 합니다.</p>
</article>

<article>
  <h2>기사 3</h2>
  <p>김 아무개씨가 오늘 저녁 식사를 했다고 합니다. 아주 아주 맛있었다고 합니다.</p>
</article>

🔊 결과

기사 1

김 아무개씨가 오늘 아침 식사를 했다고 합니다. 아주 맛있었다고 합니다.

기사 2

김 아무개씨가 오늘 점심 식사를 했다고 합니다. 아주 별로였다고 합니다.

기사 3

김 아무개씨가 오늘 저녁 식사를 했다고 합니다. 아주 아주 맛있었다고 합니다.

---

📝 <header> 태그

<header> 태그는 일반적으로, 소개 내용이나, 탐색 링크의 집합에 대한 컨테이너를 담당한다.
<header> 태그는 일반적으로

• 하나 이상의 제목 요소 (<h1>-<h6>)
• 로고 또는 아이콘
• 저자 정보

정도의 정보를 담는다.

📢 예시

<article>
  <header>
    <h1>header h1</h1>
    <p>header의 paragraph</p>
  </header>

  <p>header 바깥부분 article paragraph</p>
</article>

🔊 결과

header h1

header의 paragraph

header 바깥부분 article paragraph

---

📝 <main> 태그

<main> 태그는 문서의 주요 내용을 담당한다.

<main> 태그 내부의 콘텐츠는 주로 문서여야 한다. 사이드 바, 탐색 링크, 저작권 정보, 사이트 로고 및 검색 양식과 같은 문서에서 반복되는 콘텐츠를 포함해서는 안된다.

둘 이상의 <main> 태그가 있어서는 안된다.
<main> 태그는 <article>, <aside>, <footer>, <header>, or <nav> 같은 요소 자식요소가 아니어야 한다.

 

---

📝 <footer>

<footer> 태그는 문서나 구역의 바닥 글을 담당한다.
<footer> 태그는 일반적으로

• 저자 정보
• 저작권 정보
• 연락 정보
• 사이트 맵
• 맨 위로 링크
• 관련된 문서

정도의 정보를 담는다.

📢 예시

<footer>
    <p>페이지 하단부를 의미하는 footer</p>
    <p><a href="링크">hello@email.com</a></p>
</footer>

🔊 결과

페이지 하단부를 의미하는 footer

hello@email.com

---

📝 <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>

🔊 결과

HTML | CSS | JavaScript | jQuery

---

📝 <aside> 태그

<aside> 태그는 본문 내용을 제외하고, 간접적으로 주위의 내용과 관련있는 담당을 한다.

CSS를 적용해야, 의미가 더욱 확실히 보인다.

---

📝 <figure> 및 <figcaption> 태그

<figure> : 그림, 도표, 사진, 코드목록과 같은 태그를 지정 자체에 포함된 내용을 담당한다.

<figcaption> : <figure> 요소에 대한, 작은 부수설명 담당이라 생각한다.

📢 예시

<figure>
    <img src="www.w3schools.com/html/pic_trulli.jpg" alt="trulli">
   <figcaption>fig-1 trulli</figcaption>
</figure>

🔊 결과

Fig.1 - Trulli, Puglia, Italy.