[HTML5 기초] 시멘틱 태그 (sementic tag)
html 시멘틱 태그란?
시멘틱 태그란 웹 페이지의 구조를 쉽게 이해할 수 있도록 정의된 태그를 의미한다.
- 헤더 영역을 나타내는
<header> - 내비게이션 영역을 나타내는
<nav> - 핵심 콘텐츠를 담는
<main> - 독립적인 콘텐츠를 담는
<article> - 콘텐츠 영역을 나타내는
<section> - 사이드 바 영역을 나타내는
<aside> - 맨 아래쪽 영역을 나타내는
<footer>
시멘틱 태그는 왜 필요할까
첫 번째 이유는 웹 브라우저가 HTML 소스 코드만 보고도 어떤 부분이 제목이고 본문 내용인지 쉽게 알 수 있다. 특히 시각 장애인이 웹 사이트를 이용할 때 쓰는 화면 낭독기와 같은 보조 기기에서 사이트의 구조를 제대로 이해할 수 있다. 두 번째 이유는 문서 구조가 정확히 나눠지므로 PC나 모바일의 웹 브라우저와 여러 스마트 기기의 다양한 화면에서 웹 문서를 표현하기가 쉽다. 마지막으로 인터넷에서 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있다. 웹 사이트의 본문 내용을 검색해야 한다면 header나 footer영역이 아니라 본문 영역 안에서만 검색할 수 있다.( 👉검색엔진 최적화, SEO)
시멘틱 태그 종류
<header> 태그
웹 페이지 상단에 위치하는 헤더 영역을 정의한다. 로고, 제목, 사이트 메뉴 등을 포함한다.
<header>
<h1>gang's blog</h1>
</header><nav> 태그
같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만든다. nav 태그는 웹 문서의 위치에 영향을 받지 않으므로 header나 footer 안에 포함할 수도 있고 독립해서 사용할 수도 있다.
<header>
...
<nav>
<ul id="topMenu">
<li><a href="#">공지사항</a> </a></li>
<li><a href="#">문의사항</a> </a></li>
<li><a href="#">방명록 </a></li>
<li id="log"><a href="#">로그인</a></li>
<li ud="join"><a href="#">회원가입</a></li>
</ul>
</nav>
</header>
<main> 태그
웹 문서에서 핵심이 되는 내용을 넣는다. 메뉴, 사이드 바, 로고 처럼 페이지 마다 독같이 들어가는 정보는 넣을 수 없고, 웹 문서마다 다르게 보여주는 내용으로 구성한다. <main> 태그는 웹 문서에서 한 번만 사용할 수 있다.
<article> 태그
독립적인 웹 콘텐츠 항목을 말한다. 웹에서 실제로 보여주고 싶은 내용을 넣는다. 문서 안에서는 article태그를 여러 번 사용할 수 있고, 태그 안에 section 태그를 넣을 수도 있다.
<section> 태그
웹 문서에서 콘텐츠 영역을 나타낸다. article태그와 비슷하지만 section은 몇 개의 콘텐츠를 묶는 용도로 사용하고, article태그는 블로그 포스트처럼 독립된 콘텐츠로 사용한다. 태그 안에 article태그를 넣을 수도 있다.
<aside> 태그
사이드바. 태그 본문 내용 외에 왼쪽이나 오른쪽, 혹은 아래쪽에 만든다.
<footer> 태그
웹 문서에서 맨 아래쪽에 있는 영역이다. 주로 문서의 저자, 저작권에 대한 정보 약관, 컨택 정보등을 표시한다.
