본문 영역을 만들기 위해 가장 먼저 해야 할 일은 웹 문서의 구조를 만드는 것이다. 웹 문서는 인쇄물과 달라서 상호작용을 위한 기능성(functionality)을 포함하고 있다. 그래서 내용을 전달하는 곳과 기능을 실행하는 곳이 비교적 엄격하게 구분되며, 이러한 구분에 따라 여러 곳의 영역(section)으로 나뉜다. 이 영역들이 일정한 원리에 따라 구성되면서 웹 문서의 구조가 만들어진다.
일반적으로 웹 문서는 다음과 같은 영역으로 나뉠 수 있다.
- 헤더 영역(header section): 웹 문서 맨 윗부분에 위치하며, 웹 사이트 이름, 글로벌 링크(global links)[50] 등으로 구성된 영역
- 내비게이션 영역(navigation section): 원하는 목적지로 이동할 수 있도록 내비게이션을 별도로 모아둔 영역
- 본문 영역(content section): 본문 내용을 담고 있는 영역
- 사이드바 영역(sidebar section): 본문의 왼쪽 또는 오른쪽에 위치하며, 본문 처리에 도움을 주거나 본문과 관련 있는 요소로 구성된 영역
- 푸터 영역(footer section): 웹 문서 맨 아래쪽에 위치하며, 저작권, 연락처 등으로 구성된 영역
<일반적인 웹 페이지 구조>
물론 모든 웹 문서가 같은 구조를 갖는 것은 아니다. 내비게이션이나 사이드바 영역이 없는 경우도 있을 수 있고, 극단적인 경우에는 헤더나 푸터 영역 없이 본문 영역만으로 구성된 웹 문서도 있을 수 있다. 그러나 대부분의 웹 문서는 위 그림과 같거나 비슷한 구조를 갖고 있으며, 고맙게도 HTML에는 이러한 구조를 손쉽게 표시할 수 있는 규격들이 마련되어 있다.
- 헤더 영역(header section) 🡪 HEADER 요소
- 내비게이션 영역(navigation section) 🡪 NAV 요소
- 본문 영역(content section) 🡪 SECTION 요소, ARTICLE 요소
- 사이드바 영역(sidebar section) 🡪 ASIDE 요소
- 푸터 영역(footer section) 🡪 FOOTER 요소
<웹 페이지 구조를 만들기 위한 HTML 규격>
위와 같은 HTML 규격을 예제의 원문 내용과 요구사항에 적용하면 웹 페이지는 다음과 같이 나뉠 수 있다.
<영역 만들기>를 위한 표준 기술
BODY 요소
카테고리 | 해당 사항 없음 |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 |      |
BODY 요소는 문서의 본문 영역(document’s BODY)을 표시한다. 본문 영역은 실제 콘텐츠가 표현되는 공간이며, 이 공간에서 사용자와의 상호작용이 실질적으로 이루어진다. BODY 요소는 브라우저에게 렌더링해야 할 범위를 알려준다. 이 요소가 없으면 렌더링도 이루어지지 않으므로 HTML 문서에는 반드시 BODY 요소가 있어야 하며 한 문서 내에서 한 번만 정의할 수 있다.
<!DOCTYPE html><html lang=”ko”><head>…
</head><body>…
</body></html>
예제 |
실제 콘텐츠가 나타날 영역을 BODY 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head>중략
</head><body>UX Design ~ (중략) ~ 사용자 경험의 순환구조
</body></html>HEADER 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
HEADER 요소[51]는 헤더 영역(HEADER section)을 표시한다. 헤더 영역은 주로 소개 정보(introduction), 내비게이션 장치(navigation aids) 등으로 구성된다. 일반적으로 문서나 섹션은 의인화 기법을 사용하여 크게 머리 영역(header, 머리), 본문 영역(body, 몸통), 바닥 영역(footer, 다리)으로 나뉜다. 이 중 머리 영역을 HEADER 요소로 표시하는데, 문서뿐만 아니라 섹션 수준에서도 사용할 수 있으므로 같은 문서 내에 여러 개의 헤더가 존재할 수 있다.
대개 헤더 영역은 사이트 이름(로고), 내비게이션, 헤드라인, 검색 등으로 구성된다. 그런데 과거에는 이 영역을 마땅히 표현할 방법이 없었기 때문에 DIV 요소와 id 속성을 이용하여 해당 영역이 헤더 영역이라는 사실을 알리려고 노력했다.[52] 그러나 이렇게 하더라도 브라우저는 해당 영역이 헤더 영역이라는 사실을 객관적으로 알릴 수 없었는데, HEADER 요소가 정의되면서 이러한 문제가 해결되었다.
브라우저가 헤더 영역을 알 수 있게 되면 스크린 리더의 내비게이션과 검색엔진의 색인에 도움을 줄 수 있다. 우선 스크린 리더 사용자는 복잡한 헤더를 읽지 않고 좀 더 쉽게 다른 영역으로 이동할 수 있게 된다. 지금까지는 “본문으로 바로가기” 링크(skip navigation link)와 같은 보조적인 장치가 필요했지만, 헤더를 명시적으로 표시하면 보조적인 장치가 없어서 된다. 또한 검색엔진이 헤더 영역에 대한 색인을 생략함으로써 검색 자원을 본문에 집중시킬 수도 있다.
<!DOCTYPE html><html lang=”ko”><head>…
</head><body><header>헤더 영역
</header></body></html>
예제 |
로고와 검색창이 있는 영역을 헤더 영역으로 표시하였고, 이것을 HEADER 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head>중략
</head><body><header>로고와 검색창
</header>UX Design ~ (중략) ~ 사용자 경험의 순환구조
</body></html>NAV 요소
카테고리 | Flow content, Sectioning content, Phrasing content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
NAV 요소[53]는 내비게이션 영역(a section with NAVigation links)을 표시한다. 내비게이션은 다른 곳으로 이동하기 위한 링크(links) 또는 이동 방법을 말한다. 대개 콘텐츠는 한 문서로 구성되는 것이 아니라 여러 문서로 나뉘어 구성되며, 비슷한 성격의 문서들이 모여 메뉴 또는 카테고리를 만든다. 각각의 문서로 이동하려면 링크(link)가 필요한데, 이러한 링크 중에서 중요도가 높은 링크를 체계적으로 구성해 놓은 것이 바로 ‘내비게이션’이다. 그리고 이 내비게이션이 있는 영역을 NAV 요소로 표시한다. NAV 요소가 특별하게 기능성을 갖고 있는 것이 아니고, 단순히 내비게이션이 있는 영역을 표시하는 것뿐이므로 내비게이션은 여전히 A 요소, UL 요소, LI 요소 등을 이용하여 표현한다.
웹 사이트에서 내비게이션은 필수적인 요소이지만, 이에 관한 공식적인 표준 기술은 없었었다. 웹 문서를 어떻게 만들어야 하는지에 관한 기술 표준은 있었지만, 웹 사이트(웹 문서)를 어떻게 만들어야 하는지에 관한 기술 표준은 없었다. 그런데 NAV 요소에 의해 내비게이션 영역을 표시할 수 있는 방법이 생기면서 같은 링크라도 단순히 본문에 있는 링크인지 메뉴(카테고리) 성격의 링크인지 객관적으로 확인할 수 있게 되었다. 그리고 SECTION 요소와 마찬가지로 브라우저가 내비게이션 영역을 알 수 있게 되면 스크린 리더의 내비게이션과 검색엔진의 색인에 도움을 줄 수 있다.
내비게이션이 있는 자리가 딱히 정해진 바 없다. 브랜드 요소인 사이트 이름도 홈으로 돌아가기 위한 내비게이션이고, 본문 내용에 직접 링크가 걸려 있는 인라인 링크도 내비게이션이다. 이렇듯 내비게이션은 웹 문서 내에 산재하여 제공될 수 있는데, 이 모든 내비게이션들을 NAV 요소로 표시하는 것은 오히려 혼란을 부추길 수 있다. 링크가 모여 있는 영역이라고 해서 무조건 NAV 요소로 표시하는 것보다는 그 영역이 메인 내비게이션 영역(main navigation section)일 때에 한 해 NAV 요소를 사용하는 것이 바람직하다.
<!DOCTYPE html><html lang=”ko”><head>…
</head><body><header>헤더 영역
</header><nav>내비게이션 영역
</nav></body></html>
예제 |
6개의 메뉴를 내비게이션 영역에 표시하였고, 이것을 NAV 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head>중략
</head><body><header>로고와 검색창
</header><nav>책소개
저자소개
미리보기
서평
이벤트
구입처
</nav>UX Design ~ (중략) ~ 사용자 경험의 순환구조
</body></html>SECTION 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
SECTION 요소[54]는 섹션(SECTION)을 표시한다. ‘섹션’의 사전적 의미는 여러 개로 나뉜 것의 한 부분을 의미하는데, 논문이나 책에서는 새로운 내용이 시작되는 지점을 나타낸다는 뜻으로 섹션을 ‘절’(節)이라고 부른다.
HTML 4.x 버전에서는 DIV 요소를 사용하여 문서를 나누었는데, 이 방식은 의미적 요소와 기능적 요소의 구분이 어렵다는 단점이 있었다. 물론 id와 class의 속성값으로 해당 영역의 용도와 성격에 관한 단서를 제공할 수 있지만[55], 이것은 어디까지나 단순 구분을 위한 방법이지 의미 부여를 위한 방법은 아니었다. 내비게이션 영역과 본문 영역은 엄연히 다른 성격을 갖고 있으며, 이 영역에서의 사용자 행동은 크게 다르다. 그래서 같은 영역으로 표시하는 것보다는 의미에 맞게 구분하여 표시하는 것이 더 효과적이다.
DIV 요소와 SECTION 요소 모두 영역을 나누는 용도로 사용되지만 엄연한 차이가 있다. DIV 요소는 단순히 영역을 나누는 용도이고, SECTION 요소는 내용적 흐름과 구조를 만들기 위해 내용을 나누는 용도다. 다시 말해, DIV 요소의 대상은 제한이 없는 반면, SECTION 요소의 대상은 내용(content)에 한정된다.
본문을 DIV 요소, SECTION 요소 어느 방법으로 표시하더라도 시각적 차이는 없다. 그래서 정보를 시각적으로 처리하는 사람에겐 직접적인 혜택이 없지만, 스크린 리더 사용자나 검색엔진에겐 적지 않은 혜택을 줄 수 있다. 스크린 리더 사용자는 섹션 단위로 이동할 수 있으므로 문서 내 내비게이션이 좀 더 수월해 지고, 검색엔진은 섹션 중심으로 색인 활동을 할 수 있으므로 검색엔진의 효율성을 높일 수 있다.
섹션은 내용의 시작 지점과 종료 지점을 표시하는 것이므로 SECTION 요소는 다음의 경우처럼 관련 있는 내용을 묶는 용도로 사용한다.
-
일반적으로 한 문서 내에서는 같은 성격의 내용을 담는 것이 원칙이다. 이 원칙 대로 문서를 만들면 하나의 문서에 하나의 주제를 담을 수 있지만(One Page One Story), 이렇게 되면 문서가 과도하게 증가하는 단점이 있다. 웹은 인쇄물과 달리 스크롤링(scrolling)을 통해 한 화면에 여러 문서를 담을 수 있으므로 한 문서 내에 다양한 성격의 내용을 담을 수 있다. 이럴 때 같은 성격의 내용, 즉 관련 있는 내용을 SECTION 요소로 표시한다.
-
홈페이지(homepage)[56]는 다른 곳과 달리 여러 문서에 있는 내용들이 간추려져 구성되므로 하나의 문서가 아주 이질적인 내용으로 구성될 수도 있다. 가령, 홈문서의 뉴스 섹션과 광고 섹션은 사용자 입장에선 아주 다른 내용이다. 이런 경우, SECTION 요소로 표시하면 영역 구분이 아주 명확해 진다.
-
주어진 공간 내에서 다양한 내용을 제공하기 위해 탭 방식의 구성(tabbed user interface)을 채택할 때가 있다. 탭은 하나의 주제를 서로 다른 내용으로 구분할 수 있는 장점이 있다. 가령, ‘자동차’라는 상위 주제 아래에 ‘소개, 제원, 가격’이라는 하위 주제가 탭 방식으로 구성되었다면, 각각의 탭은 서로 다른 내용이 담기게 된다. 이 때, 각각의 탭을 표시할 때 SECTION 요소를 사용할 수 있다.
섹션은 독립적인 영역이다. 그래서 문서처럼 섹션 내에도 헤더(header)나 푸터(footer)를 둘 수 있다. 이것은 각 섹션마다 나름의 제목 체계를 가질 수 있다는 것을 의미한다. 즉, 섹션마다 H1 요소를 가질 수 있게 된 것이다. 원래 H1 요소는 문서 내에서 가장 중요한 제목을 표시하는 방법이었지만, SECTION 요소처럼 독립적인 영역을 표시할 수 있는 기술 표준이 추가되면서 H1 요소가 문서 전체가 아닌 문서 일부분인 섹션에서 가장 중요한 제목을 표시할 수도 있게 되었다.
<body><section><header><h1>상록수</h1></header><p>저들의 푸르른 솔잎을 보라...</p><footer>노래: 양희은</footer></section><section><header><h1>이등병의 편지</h1></header><p>집 떠나와 열차타고 훈련소로 가던 날...</p><footer>노래: 김광석</footer></section></body>id 속성
id 속성은 요소 식별자(element identifier)를 지정한다. 문서 내에는 다양한 요소들이 있고, 요소들은 상호관계를 맺는다. 상호관계를 맺기 위해서는 요소를 식별할 수 있는 단서가 필요한데, 이 때 id 속성을 사용한다. 특히, 문서 내에는 같은 요소가 얼마든지 중복적으로 제공될 수 있기 때문에 브라우저가 명확하게 구분할 수 있도록 사람에게 아이디를 부여하듯이 요소에도 아이디를 부여한다.
id 속성값은 문서 내에서 유일해야 하며, 문자, 숫자, 하이픈(“-“), 언더스코어(“_”), 콜론(“:”), 마침표(“.”) 등을 사용하여 값을 작성할 수 있다.
<section id=”main”>…</section><section id=”sub”>…</section><!DOCTYPE html><html lang=”ko”><head>…
</head><body><section id=”main”><section id=”sub\_overview”>개요 영역
</section><section id=”sub\_index”>목차 영역
</section><section id=”sub\_picture”>그림 영역
</section><section id=”sub\_comment”>댓글 영역
</section></section></body></html>
예제 |
본문 영역을 개요, 목차, 그림, 댓글 영역으로 구분하였고, 이것을 SECTION 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head>중략
</head><body><header>로고와 검색창
</header><nav>책소개
저자소개
미리보기
서평
이벤트
구입처
</nav><section id=”main”><section id=”sub\_overview”>UX Design ~ (중략) ~ 사용자 경험의 순환구조
</section><section id=”sub\_index”>사용자 경험 디자인이란 경험의 흐름 지식화에 의한 경험 형성 소비자-사용자 경험 사용자 경험의 순환구조
</section><section id=”sub\_picture”>그림 영역
</section><section id=”sub\_comment”>댓글 영역
</section></section></body></html>ARTICLE 요소
카테고리 | Flow content, Sectioning content, Phrasing content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
ARTICLE 요소는 독립적으로 구성된 글(ARTICLE)[57]을 표시한다. 일반적으로 ‘article’은 신문이나 잡지의 기사를 의미한다. 비슷한 성격의 기사(article)가 모여 하나의 섹션을 이루기 때문에 위계적인 측면에서 기사(article)은 섹션보다 세분화된 분류다. 문서를 한 그루의 나무에 비유했을 때, BODY 요소가 ‘줄기’라면, SECTION 요소는 ‘마디’, ARTICLE 요소는 ‘가지’에 해당한다. 그래서 법 체계에서는 ‘article’을 ‘조’(條)라고 부른다. 여하튼 HTML의 ARTICLE 요소는 기사로써의 ‘article’과 분류 항목으로써의 ‘article’, 이 두 가지 의미를 모두 포함하고 있다고 볼 수 있다.
관련 있는 내용(related content)을 묶을 수 있는 SECTION 요소가 있음에도 ARTICLE 요소를 제정한 배경에 주목할 필요가 있다. ARTICLE 요소의 대상은 독립적으로 구성된 글이다. 이 글은 본문과 별개로 구성되었기 때문에 다른 영역에 영향을 주거나 받지 않고 독립적으로 배포되거나 재사용할 수 있다. 예컨대, 게시판의 게시물(forum post), 블로그 포스트(blog post), 사용자 의견(user comment), 위젯에 담긴 콘텐츠(contents in widget)가 바로 독립적으로 구성된 글로 볼 수 있는 좋은 예다.
일반적인 상황이라면 SECTION 요소가 ARTICLE 요소를 포함하는 것이 맞다. 그러나 이러한 위계적 순서는 내용의 구조나 문맥에 따라 바뀔 수도 있다. 따라서 독립적으로 구성된 내용이 몇 개의 섹션으로 구성된 경우라면 ARTICLE 요소가 SECTION 요소를 포함할 수도 있다. 이렇듯 SECTION 요소와 ARTICLE 요소의 위계적 관계가 상황에 따라 뒤바뀔 수 있다 보니 이 두 요소의 성격이나 역할이 애매한 측면도 있다. SECTION 요소가 관련 있는 내용을 묶는 역할이라면, ARTICLE 요소는 관련 있는 내용 중에서 독립적으로 구성된 글을 별도로 묶는 역할이다. 이렇게 정의할 경우, ARTICLE 요소가 SECTION 요소보다 좀 더 특별한 성격을 갖는다고 볼 수 있다.
SECTION 요소와 마찬가지로 ARTICLE 요소로 표시된 영역 내에 헤더(header)와 푸터(footer)를 둘 수 있다.
<section><article><header><h1>제목</h1></header><p>내용…</p><footer><p>저작권은 00에게 있습니다.</p></footer></article></section>
<!DOCTYPE html><html lang=”ko”><head>…
</head><body><section id=”main”><section id=”sub\_overview”>개요 영역
</section><section id=”sub\_index”>목차 영역
</section><section id=”sub\_picture”>그림 영역
</section><article id=”sub\_comment”>댓글 영역
</article></section></body></html>
예제 |
댓글 영역을 독립적으로 구성하기 위해 SECTION 요소가 아닌 ARTICLE 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head>중략
</head><body><header>로고와 검색창
</header><nav>책소개
저자소개
미리보기
서평
이벤트
구입처
</nav><section id=”main”><section id=”sub\_overview”>UX Design ~ (중략) ~ 사용자 경험의 순환구조
</section><section id=”sub\_index”>사용자 경험 디자인이란 경험의 흐름 지식화에 의한 경험 형성 소비자-사용자 경험 사용자 경험의 순환구조
</section><section id=”sub\_picture”>그림 영역
</section><article id=”sub\_comment”>댓글 영역
</article></section></body></html>ASIDE 요소
카테고리 | Flow content, Sectioning content, Phrasing content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
ASIDE 요소는 본문과 따로(ASIDE) 구성된 내용을 표시한다. 원칙적으로는 관련 있는 내용들이 한 데 모여 문서를 구성하지만, 그렇지 않는 경우도 얼마든지 있을 수 있다. 흔히, ‘사이드바’(sidebar)라고 부르는 영역은 배너, 용어 설명, 관련 상품 등 본문 내용과 직접적인 관련성이 적거나 없는 내용들로 구성될 수 있는데, 이와 같은 영역이 필수는 아니지만 실제로는 본문 처리나 내비게이션을 효과적으로 돕는다.
그렇다면 이런 영역을 어떻게 표시하는 것이 좋을까? SECTION 요소로 표시할 수도 있지만, 그렇게 되면 해당 영역의 성격을 제대로 표현하기 어렵고 본문과의 구분도 애매모호해 진다. 이럴 때 ASIDE 요소로 표시하면 검색엔진은 본문 위주로 색인을 진행할 수 있고 스크린 리더 사용자는 해당 영역이 어떤 성격의 영역인지 신속하게 파악할 수 있으로 곧바로 다른 영역으로 이동할 수도 있다.
<!DOCTYPE html><html><head>…
</head><body><section id=”main”><section id=”sub\_overview”>개요 영역
</section><section id=”sub\_index”>목차 영역
</section><section id=”sub\_picture”>그림 영역
</section><article id=”sub\_comment”>댓글 영역
</article></section><aside id=”sidebar”>사이드바 영역
</aside></body></html>
※ 문서 레이아웃은 스타일 시트에 의해 정의되므로 ASIDE 요소는 ARTICLE 요소 아래에 와야 하지만, 지면 제약과 쉬운 이해를 돕기 위해 ASIDE 요소가 오른쪽 영역에 오는 것처럼 표현하였다.
예제 |
문서의 오른쪽 영역에 1개의 사이드 바를 두었고, 이것을 ASIDE 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head>중략
</head><body><header>로고와 검색창
</header><nav>책소개
저자소개
미리보기
서평
이벤트
구입처
</nav><section id=”main”><section id=”sub\_overview”>UX Design ~ (중략) ~ 사용자 경험의 순환구조
</section><section id=”sub\_index”>사용자 경험 디자인이란 경험의 흐름 지식화에 의한 경험 형성 소비자-사용자 경험 사용자 경험의 순환구조
</section><section id=”sub\_picture”>…
</section><article id=”sub\_comment”>…
</article></section><aside id=”sidebar”>사이드바 영역
</aside></body></html>FOOTER 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
FOOTER 요소는 푸터 영역(FOOTER)을 표시한다. ‘푸터’는 바닥 영역 또는 ‘꼬리말을 지칭하는데, 이 곳에는 저자권이나 연락정보와 같이 본문과의 관련성은 있지만 본문에는 담기 어려운 내용들이 담긴다.
일반적으로 푸터 영역은 한 문서 내에서 한 번만 제공된다. 그런데 FOOTER 요소는 한 문서 내에서 여러 번 사용할 수 있기 때문에 아래 예제처럼 BODY 요소 내에 사용된 FOOTER 요소는 문서 전체에 관한 꼬리말을 표시하고, SECTION이나 ARTICLE 요소 내에 사용된 FOOTER 요소는 해당 영역에 관한 꼬리말을 표시할 수 있다.
<!DOCTYPE html><html><head>…
</head><body><section id=”main”><section id=”sub\_overview”>개요 영역
</section><section id=”sub\_index”>목차 영역
</section><section id=”sub\_picture”>그림 영역
</section><article id=”sub\_comment”>댓글 영역
</article></section><aside id=”sidebar”>사이드바 영역
</aside><footer>푸터 영역
</footer></body></html>
저작권이나 연락처도 때에 따라서는 헤더나 본문 영역에 둘 수 있는 것처럼 내비게이션이나 본문 관련 내용도 푸터 영역에 둘 수 있다. 이처럼 푸터 영역에 어떤 것이 와야 하는지에 대해서는 명확한 기준이 마련되어 있지 않다. ‘맨 위로 가기’(To the top) 링크나 헤더의 메인 내비게이션도 반복 제공을 위해 푸터 영역에 둘 수 있다(아래 참조).
<footer><nav><h1>메뉴</h1><ul><li><a href=”menu1.html”>메뉴 1</a></li><li><a href=”menu2.html”>메뉴 2</a></li><li><a href=”menu3.html”>메뉴 3</a></li><li><a href=”menu4.html”>메뉴 5</a></li></ul></nav><address>㈜밸류어블디자인랩<br />
<a href=”mailto:test@vdlab.com”>이메일보내기</a><br />연락처: 서울 강남구 역삼동 000번지
</address><p>Copyright© 2011. VDLab.com</p></footer>예제 |
문서의 아래 영역에 푸터 영역을 두었고, 이것을 FOOTER 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head>중략
</head><body><header>로고와 검색창
</header><nav>책소개
저자소개
미리보기
서평
이벤트
구입처
</nav><section id=”main”><section id=”sub\_overview”>UX Design ~ (중략) ~ 사용자 경험의 순환구조
</section><section id=”sub\_index”>사용자 경험 디자인이란 경험의 흐름 지식화에 의한 경험 형성 소비자-사용자 경험 사용자 경험의 순환구조
</section><section id=”sub\_picture”>그림 영역
</section><article id=”sub\_comment”>댓글 영역
</article></section><aside id=”sidebar”>사이드바 영역
</aside><footer>푸터 영역
</footer></body></html>주석
[50] 로그인, 회원가입, 사이트맵, 언어선택 등 웹 사이트 어느 곳에서든지 이용할 수 있는 링크
[51] HTML5에 추가된 속성이다.
[52]
<div id=”header”>[53] HTML5에 추가된 속성이다.
[54] HTML5에 추가된 속성이다.
[55]
<div id=”nav”>, <div class=”section”>[56] 여기에서 ‘홈문서’는 웹 사이트가 아니라 가장 중심이 되는 문서 또는 시작 문서를 의미한다.
[57] W3C에서는 “self-contained content”라고 표현하고 있다.