[HTML] #3 시맨틱 마크업 Semantic Markup

시맨틱 마크업 Semantic Markup

시맨틱(Semantic)이란 ‘의미론적인’의 뜻을 가지고, 마크업(Markup)이란 HTML 태그로 문서를 작성하는 것을 말합니다. 즉 시맨틱 마크업은 작업에 있어서 태그들이 의미를 잘 전달 할 수 있도록 문서를 작성하는 것을 말합니다.

 

html5에 시맨틱 웹을 위해 관련 태그들이 제공됩니다.

 

시맨틱 웹을 위한 태그	설명
header	말그대로 문서의 헤더영역을 의미합니다.   페이지의 머리글, 제목, 로고, 메뉴, 검색 관련, 유틸, 작성자의 이름 등등으로 구성합니다.
nav	페이지의 내비게이션 영역. (사이트 내, 외부로 이동). 메뉴, 목차, 색인 등등
main	메인 컨텐츠 영역. 문서 내에서 *반드시* 한 번만 사용합니다.   다른 header, footer, nav, article, section, aside의 하위로 작성할 수 없습니다.
section	본문의 여러 내용(article)을 포함하는 부분을 의미합니다.
article	본문의 주 내용이 들어가는 부분을 의미합니다.
aside	간접 컨텐츠, 보조 컨텐츠를 의미하며, 대체적으로 옆에 위치하는 내용의 부분을 의미합니다.
footer	하단 바닥글을 의미합니다. 주로 들어가는 정보는 회사정보, 저작권, 연락처 등등이 있습니다.

 

웹페이지의 각 부분을 시맨틱 웹 태그로 구성하면, 검색엔진등에서 각 부분을 보다 잘 이해 할 수 있습니다.

시맨틱 웹 태그들을 이용하여 웹페이지의 각 부분들을 구성하는데에만 사용되며 구성하는 위치나 표현법은 전적으로 css를 통해 작성해야 합니다.

 

 

---

예전 방식의 구조 표현

<div id="container" class="wrapper">

	<div id="header">
		<div id="title">페이지의 제목</div>
		<div id="nav">
			페이지의 내비게이션 영역
			<div class="gnb">메뉴</div>
		</div>
	</div>
    
	<div id="contents">
		<div class="main_cont">
			메인 컨텐츠 영역
			<div class="txt_box">내용</div>
		</div>
		<div class="side_cont">사이드 내용</div>
	</div>

	<div id="footer">
		하단바닥글
		<address>주소 & 연락처</address>
	</div>
    
</div>

---

---

현재 방식의 구조 표현

<div id="container" class="wrapper">

	<header>
		<h1>페이지의 제목, 로고</h1>
		<nav>
			페이지의 내비게이션 영역.
		</nav>
	</header>
	
 	 <main>
		<section>일반적인 문서 영역. (제목태그와 함께 작성 권장.)
        	<article>독립된 컨텐츠. (게시판, 블로그, 뉴스, 매거진...)</article>
		</section>
		<aside>간접 컨텐츠. 보조 컨텐츠.</aside>
	</main>

	<footer>
		하단 바닥글. 회사정보, 저작권, 연락처...
	</footer>
    
</div>

---