[HTML] 시맨틱 태그

웹 문서 구조를 만드는 시맨틱 태그

시맨틱 태그

그 이름만 봐도 의미를 알 수 있는 태그

시맨틱 태그가 필요한 이유

1. HTML 소스 코드만 보고도 어느 부분이 제목이고, 메뉴이고, 본문 내용인지 쉽게 알 수 있다.
2. 문서 구조가 정확히 나눠지므로, PC나 모바일의 웹 브라우저와 여러 스마트 기기의 다양한 화면에서 웹 문서를 표현하기가 쉽다.
3. 인터넷에서 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있다.

---

주요 시맨틱 태그들

 💡 헤더 영역을 나타내는 <header> 태그

• 말 그대로 헤더 영역을 의미
• 사이트에서 header는 주로 맨 위쪽이나 왼쪽에 있음
• header에는 주로 검색 창이나 사이트 메뉴를 삽입

 💡 내비게이션 영역을 나타내는 <nav> 태그

• 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만듦
• 웹 문서의 위치에 영향을 받지 않음 → header나 footer, side bar 안에 포함할 수도 있고, 독립해서 사용할 수도 있음
• 웹 문서에서 <nav> 태그를 여러 개 사용할 경우, 각각 id 속성을 지정하면 내비게이션마다 다른 스타일을 적용할 수 있음

 💡 핵심 콘텐츠를 담는 <main> 태그

• 메인 콘텐츠가 들어 있는 부분. 핵심이 되는 내용을 넣음
• 웹 문서마다 다르게 보여 주는 내용으로 구성
• 웹 문서에서 한 번만 사용 가능

 💡 독립적인 콘텐츠를 담는 <article> 태그

• 독립된 웹 콘텐츠 항목 (ex. 블로그의 포스트, 뉴스 사이트의 기사)
• 웹에서 실제로 보여주고 싶은 내용을 넣음

 💡 콘텐츠 영역을 나타내는 <section> 태그

• 웹 문서에서 콘텐츠 영역을 나타냄
• <section> vs <article>
  • <section> : 몇 개의 콘텐츠를 묶는 용도로 사용
  • <article> : 독립된 콘텐츠로 사용

 💡 사이드 바 내용을 나타내는 <aside> 태그

• 본문 내용 외에 왼쪽이나 오른쪽, 혹은 아래쪽에 사이드 바를 만듦

 💡 푸터 영역을 나타내는 <footer> 태그

• 웹 문서에서 맨 아래쪽에 있는 footer 영역을 만듦
• 주로 사이트 제작 정보, 저작권 정보, 연락처 등이 들어감
• footer 영역에는 <header> 태그를 비롯하여 <section>, <article> 등 다른 시맨틱 태그 모두 사용 가능

 💡 여러 소스를 묶는 <div> 태그

• <header> , <section> 같은 시맨틱 태그가 나오기 전에 사용했던 태그
• id나 class 속성을 사용해서 문서 구조를 만들거나 스타일을 적용할 때 사용
• 영역을 구별하거나 스타일로 문서를 꾸밈
  
  
  
  
  출처: Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희, 이지스퍼블리싱)