04. DOIT - 웹 문서 구조를 만드는 시맨틱 태그
시맨틱 태그 (Semantic Tag) 란?
시맨틱 태그(Semantic Tag) 란 ?
시맨틱 태그 (Semantic Tag)는 포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그입니다. 기존 HTML <div> 태그의 기능과 마찬가지로 block element이면서 사이트의 구조(레이아웃)을 설계하기 위해 존재합니다. 시맨틱 태그의 요소로는 <header>, <nav>, <article>, <section>, <footer>, <main> 등이 존재합니다. 이러한 시맨틱 태그 요소는 콘텐츠를 논리적 섹션으로 구성하고 각 부분의 역할과 기능을 전달하는 데 도움이 됩니다.
시맨틱 태그 역할
| 태그(Tag) 명 | 태그(Tag) 표기 |
| 헤더 | <header> </header> |
| 바디 | <body> </body> |
| 내비게이션 | <nav> </nav> |
| 메인 | <main></main> |
| 사이드바 | <aside> </aside> |
| 아티클 | <article> </article> |
| 섹션 | <section> </section> |
| 푸터 | <footer> </footer> |
시맨틱 태그 구조
· 헤더 영역을 나타내는 <header> 태그
<header> 태그는 헤더 영역을 의미합니다. 사이트 전체의 헤더도 있지만 특정 영역의 헤더도 있습니다. 사이트에서 헤더는 주로 맨 위쪽이나 왼족에 있으며, 검색 창이나 사이트 메뉴를 삽입합니다.
· 내비게이션 영역을 나타내는 <nav> 태그
<nav> 태그는 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만듭니다. 흔히 내비게이션을 만들 때 사용합니다. 흔히 내비게이션을 만들 때 사용합니다. <nav> 태그는 웹 문서의 위치에 영향을 받지 않으므로 헤더나 푸터, 사이드 바 안에 포함할 수 있고 독립해서 사용할 수도 있습니다.
· 핵심 콘텐츠를 나타내는 <main> 태그
<main> 태그는 메인 콘텐츠가 들어 있는 태그입니다. <main> 태그는 웹 문서에서 핵심이 되는 내용을 넣습니다. 여기에는 메뉴, 사이드 바, 로고처럼 페이지마다 똑같이 들어간 정보는 넣을 수 없고, 웹 문서마다 다르게 보여 주는 내용으로 구성합니다. <main> 태그는 웹 문서에서 한 번만 사용할 수 있습니다.
· 독립적인 콘텐츠를 담는 <article> 태그
<article> 태그는 아티클의 사전적 의미인 신문이나 잡지의 기사처럼 웹에서 실제로 보여 주고 싶은 내용을 넣습니다. 예를 들어 블로그의 포스트나 뉴스 사이트의 기사처럼 독립된 웹 콘텐츠 항목을 말합니다. 문서 안에는 <article> 태그를 여러 개 사용할 수 있고, 이 안에는 <section> 태그를 넣을 수도 있습니다.
· 콘텐츠 영역을 나타내는 <section> 태그
<section> 태그는 웹 문서에서 콘텐츠 영역을 나타냅니다. <section> 태그는 <article> 태그와 비슷해 보이기도 합니다. 하지만 <section> 태그는 몇 개의 콘텐츠를 묶는 용도로 사용하고, <article> 태그는 블로그의 포스트처럼 독립된 콘텐츠로 씁니다.
· 사이드 바 영역을 나타내는 <aside> 태그
<aside> 태그는 본문 내용 외에 왼쪽이나 오른쪽, 혹은 아래쪽에 사이드 바를 만듭니다. 보통 웹 사이트에서 사이드 바는 필수 요소가 아니므로 필요할 경우에만 사용합니다.
· 푸터 영역을 나타내는 <footer> 태그
<footer> 태그는 웹 문서에서 맨 아래쪽에 있는 푸터 영역를 만듭니다. 푸터에는 사이트 제작 정보나 저작권 정보, 연락처 등을 넣습니다. 또한 푸터 영역에는 <header> 태그를 비롯하여 <section>, <article> 등 다른 시맨틱 태그를 모두 사용할 수 있습니다.
+ 여러 소스를 묶는 <div> 태그
HTML의 <header>, <section> 같은 시맨틱 태그가 나오기 전에는 헤더나 내비게이션, 푸터등을 구별할 때 <div> 태그를 사용합니다. 아직도 문서 구조를 만들 때 <div> 태그를 사용하는 경우가 많습니다. <div> 태그는 <div id="header">나 <div class ="detail">처럼 id나 class 속성을 상용해서 문서 구조를 만들거나 스타일을 적용할 때 사용합니다. 즉, 영역을 구별하거나 스타일로 문서를 꾸는 것을 말합니다.
시맨틱 태그 예제
□ : <header> 영역
□ : <nav> 영역
□ : <main> 영역
□ : <footer> 영역