[HTML] 시맨틱 태그 정리
시맨틱 요소는 요소에 대한 의미가 정확하게 드러도록 정의할 수 있다.
비의미적 요소의 예 : <div> 나 <span> 등등
의미적 요소의 예 : <form>, <table> 및 <article> 등등
HTML에는 웹 페이지의 다른 부분을 정의하는 데 사용할 수 있는 몇 가지 의미 요소가 있다.
- <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>🔊 결과
📝 <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>🔊 결과
📝 <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>🔊 결과
