[HTML] 시맨틱 태그

<header>

머리말 영역 (페이지 제목 및 페이지 소개), 문서 또는 섹션의 헤더

 

<nav>

- 하이퍼링크를 모아 둔 내비게이션

- 다른 영역과 사이트, 다른 문서 사이를 탐색할 수 있는 링크의 집합

- 문서 안의 모든 링크가 모두 <nav> 영역에 있는 것은 아니다.

 

<aside>

- 사이드바

- 본문 흐름에 벗어나는 노트나 팁

- <aside>는 css를 활용하여 스타일을 지정함

 

<section>

- 어느 한 구역

- 문서의 장이나 절에 해당하는 내용

- 문서의 전체 내용과 관련 있는 컨텐츠의 집합

- <section>은 반드시 heading(<h1>  ~ <h6>)을 가져야 한다.

 

<article>

- 본문과 독립적인 컨텐츠 영역

- 개별 뉴스 기사 혹은 게시물을 의미함

---

<section>과 <article>의 차이

<section>	문서에서 독립적인 특정 영역 여러 개의 컨텐츠 묶음
<article>	영역 속에서 독립적인 컨텐츠 그 자체로 독립적인 컨텐츠

---

<footer>

- 꼬리말(저자나 저작권 정보) 혹은 바닥글

- 주로 회사 소개, 약관, 저작권 등을 표기함

- 연락처는 <address> 태그를 사용함

 

 

출처 및 참고자료

https://nonipc.com/entry/%EC%8B%9C%EB%A7%A8%ED%8B%B1-%ED%83%9C%EA%B7%B8semantic-tag-%EC%82%AC%EC%9A%A9-%EB%B0%A9%EB%B2%95

시맨틱 태그(semantic tag) 사용 방법