main
main태그는 현재페이지의 주된 내용을 담기위해 사용한다.- 자동으로 닫는 태그 : x
header
header태그는 페이지 상단부(주로 메뉴나 검색폼등)의 내용을 담기위해 사용한다.- 자동으로 닫는 태그 : x
footer
footer태그는 페이지 하단부(부로, 저작권, 사업자정보 등)의 내용을 담기위해 사용한다.- 자동으로 닫는 태그 : x
aside
aside태그는 의미적으로 페이지의 주된내용과 관련이 없거나 부수적인 경우 위치적으로 좌/우측에 해당하는 내용을 담기위해 사용한다.- 자동으로 닫는 태그 : x
nav
nav태그는 서로 관련있는 링크(혹은 클릭과 관련되는 모든 기능)들을 모아놓기 위해서 사용한다.- 자동으로 닫는 태그 : x
article
article태그는 게시글, 뉴스 기사등을 담기위해 사용하나 광범위하게는 현재페이지에서 분리하여 족립적으로 사용하여도 자체적인 기능에 문제가 없는 것들을 분리하여 사용한다.- 자동으로 닫는 태그 : x
section
section태그는 페이지에서 분리하면 그 의미나 가능을 상실하는 것을 담는 용도로 사용한다.(잘안씀)- 자동으로 닫는 태그 : x
span
span태그는 아무데나 다 사용할 수 있다.(구문 컨텐츠용: 글자와 같은 방향으로 흐름)- 자동으로 닫는 태그 : x
div
div태그는 아무데나 다 사용할 수 있다.(플로우 컨텐츠용 아래방향으로 흐름)- 자동으로 닫는 태그 : x
예제)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>컨테이너 태그</title>
</head>
<body>
<main>main</main>
<header>header</header>
<footer>footer</footer>
<aside>aside</aside>
<nav>nav</nav>
<article>article</article>
<section>section</section>
<div>div</div>
<span>span</span>
</body>
</html>