HTML 5 tag

콘텐츠 모델

XHTML : 인라인 요소, 블록요소를 구분 하는 정도의 개념
좀 더 명확한 정보구조 설계 및 구성을 위해 카테고리를 정의
섹셔닝 루트(Sectioning Root)

  blockquote, body, detail, fieldset, figure, td

섹셔닝 루트에 속하는 요소는 section이나 article요소와 같이 장이나 절과 같은 계층 구조로 구분되지 않고 독립적인 콘텐츠로 분리되기 때문에 아웃라인에 영향을 주지 않음

메타데이터 콘텐츠(Metadata Content)

  base, link, meta, noscript, script, style, title

메타데이터는 문서의 정보를 포함하는 메타데이터, 스타일 표현을 위한 style요소, 행동을 설정하는 script요소들을 나타냄. 웹 브라우저에 직접적으로 표시되지 않으며, 문서(document)와 문서간의 관계를 설정함

섹셔닝 콘텐츠(Sectioning Content)

  article, aside, nav, section

섹셔닝 콘텐츠는 대부분 HTML5에서 새롭게 추가된 요소들이며, 제목과 그 내용을 포함한 범위를 지정하는 콘텐츠를 나타냄. 모든 섹셔닝 콘텐츠는 헤딩과 아웃라인을 가짐

HTML4	HTML5

기존에 모든 구획을 나누던 DIV를 각각의 Sectioning Content로 대체 하여 구획의 명확성을 증대함
그림출처: https://www.slideshare.net/brucelawson/you-too-can-be-a-bedwetting-antfucker-bruce-lawson-opera-fronteers-2011/36-header_h1Exciting_blogh1headersection_h2Todays_articlesh2

플로우 콘텐츠(Flow Content)

  a, abbr, address, area, article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, data, datalist, del, details, dfn, dialog, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h2, h3, h5, h6, math, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, style, sub, svg, table, textarea, time, u, ul, var, video, wdr

메타데이터 콘텐츠 요소 중 일부를 제외하고 문서 분문에 해당하는 body요소에 들어가는 대부분의 요소들이 플로우 콘텐츠 모델에 속한다

헤딩 콘텐츠(Heading Content)

  h1, h2, h2, h3, h5, h6

헤딩 콘텐츠는 섹션의 제목을 나타냄. 문서의 아웃라인을 고려하여 사용해야 함.

프레이징 콘텐츠(Phrasing Content) - 표현 내용

  a, abbr, area, audio, b, bdi, bdo, br, button, canvas, cite, code, data, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, u, var, video, wbr

문서의 텍스트를 나타내며, 그 텍스트를 문단 내부 레벨로 마크업하는 요소들. 프레이징 콘텐츠가 모여 문단을 구성함
프레이징 콘텐츠로 분류되는 요소의 대부분은 플로우 콘텐츠 전체를 포함할 수 없으며, 프레이징 콘텐츠로 분류된 요소만을 포함할 수 있음

임베디드 콘텐츠(Embedded Content)

  audio, canvas, embed, iframe, img, math, object, svg, video

임베디드는 ‘포함된’이라는 뜻을 가지고 있으며, 문서 안에 외부자원(‘외부 리소스’라고 불리기도 함) 또는 HTML이 아닌 다른 언어로 표현되는 콘텐츠를 말함.
외부자원에는 이미지, 동영상, 플러그인, 아이프레임 콘텐츠 등이 있고, 다른 언어로 된 콘텐츠에는 수학 공식을 표현하는 MathML과 SVG등이 있음.

인터랙티브 콘텐츠(Interactive Content)

  a, audio(controls 속성), button, details, embed, iframe, img(usemap 속성), input, keygen, label, object(usermap 속성), select, textarea, video(controls 속성)

인터랙티브 콘텐츠는 사용자가 어떤 기능을 조작할 수 있는 (상호 작용)콘텐츠를 말함
audio,img,input,object,video요소는 이러한 특성을 바탕으로 조건부 인터랙티브 콘텐츠가 됨

팰퍼블 콘텐츠(Palpable Content) - 뚜렷한 콘텐츠

  a, abbr, address, article, aside, audio(controls 속성), b, bdi, bdo, blockquote, button, canvas, cite, code, data, details, dfn, div, dl(자식요소), en, embed, fieldset, figure, footer, from, h1, h2, h2, h3, h5, h6, i, iframe, img, input, ins, kbd, keygen, label, main, map, mark, math, menu, meter, nav, object, ol(자식요소), output, p, pre, progress, q, ruby, s, samp, section, select, small, span, strong, sub, svg, table, textarea, time, u, ul(자식요소), var, video, span

펠퍼블 콘텐츠는 기존 콘텐츠 모델에 새롭게 추가된 개념으로 구체적으로 보여지고 이해할 수 있는 콘텐츠 요소를 말하며, 최소한 하나 이상의 요소가 존재해야 하고 이때 해당 요소는 숨김 상태여서는 안됨

스크립트 지원 요소(Script-supporting Elements)

  script

스크립트 지원요소는 요소 자체가 어떤 정보를 표현하지는 않지만 사용자에 대한 기능 등에 해당하는 스크립트를 지원하는 데 사용됨.

HTML5 요소

section 요소

일반적으로 콘텐츠를 장이나 절 등으로 구분하고자 할 경우 사용
반드시 헤딩관련 요소를 사용하여 해당 섹션의 제목을 지정
div의 대치요소가 아님
열이나 행을 구분하기 위해 사용해서는 안됨

<section>
	<h1>색션(section) 요소</h1>
	<section>
		<h2>색션(section) 요소의 사용</h2>
		<p>
			section 요소는 일반적으로 콘텐츠를 장이나 절 등으로 구분하고자 할 경우나 탭 형식으로 되어있는 콘텐츠를 마크업 할 때 사용합니다.
		</p>
		<p>
			장이나 절 등으로 구분되기 때문에 반드시 section 요소 안에는 제목을 의미하는 헤딩 요소가 포함되어야 합니다.
		</p>
	</section>
	<section>
		<h2>색션 요소의 콘텐츠 모델</h2>
		<p>
			section 요소는 섹셔닝 콘텐츠에 속한 요소로 아웃라인에 영향을 줍니다.
		</p>
	</section>
</section>

nav 요소

내비게이션을 마크업 할때
내비게이션은 메인 메뉴나 서브 메뉴 등을 의미
서로 다른 페이지로 이동할 수 있는 링크 포함
모든 목록 형태의 하이퍼링크 콘텐츠에 nav요소를 사용하는 것은 바람직 하지 않음
페이지의 주요 네비게이션에 사용해야 한다고 규정

<h1><a href="index.html"><img src="image/logo.gif" alt="Webcafe"></a></h1>
<nav>
	<ul>
		<li><a href="page1.html">1 페이지</a></li>
		<li><a href="page2.html">2 페이지</a></li>
		<li><a href="page3.html">3 페이지</a></li>
	</ul>
</nav>

article 요소

독립된 하나의 콘텐츠
블로그의 포스트, 뉴스 본문
독립된 하나의 콘텐츠로 분류할 때 해당 콘텐츠를 별도로 배포하거나 재사용하기 위한 경우
section 요소와 구문이 애매할 경우도 있기 때문에 콘텐츠의 의미와 성격을 고려하여 사용하는 것이 바람직

<article class="post">
	<h1>책 그리고 커피와 함께한 생일</h1>
	<p>
		느즈막이 일어난 생일 아침. 요가로 몸을 플어준 뒤 책 몇권을 가방에 넣고...
	</p>
	<footer>
		<p>슬비 / 2013-10-04 17:00</p>
	</footer>
	<article class="reply">
		<p>생일 이셨군요. 늦었지만 축하 드려요.</p>
		<footer>
			<p>미희 / 2013-10-05 02:00</p>
		</footer>
	</article>
</article>

aside 요소

메인 콘텐츠와 관련이 적은 콘텐츠를 마크업할 때 사용
사이드바, 광고 등의 콘텐츠가 적절 (부가적인 콘텐츠)
명확히 정의하기 어려운 경우도 많다.
콘텐츠의 틀을 정해놓고 사용하기보다 콘텐츠의 중요성이나 의미를 고려하여 사용

<aside>
	<h1>국내 추천 여행지 Best5</h1>
	<ul>
		<li><a href="http://">여행지1</a></li>
		<li><a href="http://">여행지2</a></li>
		<li><a href="http://">여행지3</a></li>
		<li><a href="http://">여행지4</a></li>
		<li><a href="http://">여행지5</a></li>
	</ul>
</aside>

페이지의 헤더, 섹션 헤더로 사용
페이지 헤더: 제목, 로고, 검색 등을 포함
섹션 헤더: 내에서 사용 시 해당 섹션의 헤더의 의미

페이지의 푸터, 섹션 푸터로 사용
섹션 푸터: 해당 섹션의 푸터의 의미

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf=8" />
		<title>header 요소</title>
	</head>
	<body>
		<header>
			<a href="index.html">logo</a>
			...
		</header>
		<section>
			<header>
				...
			</header>
			...
		</section>
	</body>
</html>

HTML 5 tag

콘텐츠 모델

섹셔닝 루트(Sectioning Root)

메타데이터 콘텐츠(Metadata Content)

섹셔닝 콘텐츠(Sectioning Content)

플로우 콘텐츠(Flow Content)

헤딩 콘텐츠(Heading Content)

프레이징 콘텐츠(Phrasing Content) - 표현 내용

임베디드 콘텐츠(Embedded Content)

인터랙티브 콘텐츠(Interactive Content)

팰퍼블 콘텐츠(Palpable Content) - 뚜렷한 콘텐츠

스크립트 지원 요소(Script-supporting Elements)

HTML5 요소

section 요소

nav 요소

article 요소

aside 요소

header 요소

footer 요소